Cómo hacer un sitio web primario para cobrar más rápido

Esta es una transcripción de nuestro tutorial “Acelera Elementary: cómo hacer un sitio web elemental para cargar más rápido” para que pueda seguir fácilmente.Las herramientas que utilizamos:

Wprocket

Activos de limpieza

Ewww

Perfmatrón
Este video analiza las herramientas, consejos y técnicas que necesita para mejorar su artículo o velocidad de sitio web.En este ejemplo de un video, mejoramos la velocidad de un sitio web elemental de 3.4 segundos a 1.4 segundos.Entonces, si está interesado en aprender a hacer esto, este es el tutorial para usted.
Así que pasaremos, espero que este video tome aproximadamente una hora y le enseñe todo lo que necesita saber sobre la mejora de la velocidad y el rendimiento de su sitio web. De acuerdo, primero, quiero pasar por qué quiere mejorar el tiempo de carga de su sitio web. Vaya a su sitio ahora mismo, ingrese la URL en el navegador y cárguela. Si el sitio web toma un tiempo para cargar y permanecer allí y pensar e incluso está enfocado en la carga del tiempo, entonces cree que es demasiado largo. Esta no es una buena imagen de mi empresa o mi sitio web o mi negocio, entonces ciertamente desea concentrarse en el rendimiento de su sitio. Hay muchas estadísticas que podríamos analizar. Y le mostraré algunos en este momento sobre por qué desea que su sitio cobre más rápido. Entonces esto es para Neil Patel. Él es un tipo de SEO. Y hay algunas estadísticas bastante malditas aquí. En primer lugar, el 73% de los usuarios de Internet móvil dicen que han conocido un sitio web demasiado lentamente. Y luego el 47% de los consumidores esperan cobrar en dos segundos o menos. Y luego, si dura más de tres segundos, el 40% de las personas abandonarán el sitio.
Por lo tanto, suponga que es un instalador en una ciudad pequeña y tiene 100 personas en su sitio web, y de estas 100 personas se convierte en clientes potenciales. Entonces, elimine el 40% de esas 10 personas, quedan, no muchas, quedarse con seis personas y esas seis personas que saben que podrían ser potenciales podrían no, pero las cuatro personas que abandonaron su sitio se convertirían en huellas. Pierdes mucho dinero. Por esta razón, este también es un pequeño ejemplo de sitio de servicio pequeño en una ciudad pequeña, si aumenta la cantidad de visitantes o aumenta la cantidad de clientes potenciales que podría generar por mes, verá que “incluso perderá mucho dinero Si su sitio no cobra un día rápido, un segundo retraso en la página puede costarle $ 2.5 millones. Entonces esto es de Amazon y Walmart. Ambos mejoran la carga de sus sitios web y sus ventas cesan. Así que concéntrese en la velocidad cuando se trata de Su sitio web de elementos, construido con WordPress, es absolutamente esencial. El elemento en sí mismo es una gran herramienta, porque le permite construir realmente lo que desee. Por lo tanto, como puede ver, creamos este sitio web aquí Yo con Elementor, utilicé una plantilla elemental y este será el sitio que usamos para optimizar, por lo que usaré este sitio para mostrarle cómo nuestra agencia optimiza los sitios.
Pero realmente puedes construir lo que quieras con el elemento. Sin embargo, Elementor viene con sus defectos. Elemento. El número uno está bastante hinchado cuando se trata de salidas codificadas. Por lo tanto, elimine mucho código que no esté muy limpio. Y por esta razón, puede aumentar el tiempo de carga de su sitio. Y luego Elementor también te permite construir lo que quieras. Para que puedas construir esto, podrías construir algo loco, podrías construir algo más simple, pero debido a que te permite construir lo que quieras, debes ser un poco cuidadoso cuando se trata de crear tu sitio web y tienes que pensar, esto ¿Hará que mi sitio se cargue más lento, y si esto hace que mi sitio sea más lento, vale la pena? Por lo tanto, este es realmente el intercambio constante en el que debe pensar al construir su sitio web cuando se trata de rendimiento. ¿Esto aumentará mis ventas? ¿Esto reducirá mis ventas? ¿Esto me hará más creíble o me hará perder más visitantes? Entonces es realmente un columpio. E intentarás equilibrar ese swing.
Por lo tanto, siempre debe pensar en lo que construye en el elemento.Y como puede ver, se usó un elemento integrado a partir de una plantilla.Así que no construí todo, pero agregué algunas cosas aquí.Y también tenemos contactos, por lo que esta es la página y el sitio web que utilizaremos para optimizar la primaria para la velocidad.Y como puede ver, los únicos dos complementos que usamos en este sitio web son Elementary y Elementor Pro, y luego el único tema que usamos en este sitio es Hello Elementor.Por lo tanto, esto debería brindarle un buen sitio web básico básico que puede seguir cuando comenzamos la optimización.Así que vamos directamente a ello.
Lo primero en lo que debe centrarse al optimizar el sitio elemental para la velocidad es el alojamiento. Entonces, cuando se trata de alojamiento y primaria, hay mucha información incorrecta. Y hay muchas personas que buscan orientación a este respecto. Veo mucho en el grupo de Facebook Elementer y el general de WordPress Reddit. La gente pregunta, ¿en qué anfitriones debería estar? ¿Debería estar en Godaddy? ¿Debería estar en Bluehost? ¿Debería lidiar con algo más? Oh, si estás a la sombra y puedes rendirte, entonces debes rendirte. Si está pensando en comprar alojamiento, no debe considerar la sombra. Y esto se debe a que el intercambio es simplemente más lento que otras ofertas de alojamiento. Y ahora cuesta casi lo mismo. Así que quería mostrarle una comparación entre nuestro anfitrión favorito, que es Cloudways, y explicaré más sobre Cloudways en un poco y un host compartido que es Bluehost. Entonces, Bluehost es probablemente el anfitrión más promocionado allí, tienen un programa de afiliación. Y si las personas envían a otras personas a Bluehost, ganarán $ 65. Entonces este Bluehost está en todas partes. Y muchas personas que comienzan por primera vez, permanecen atrapadas creen que Bluehost es una buena opción para ellos.
Y, en algunos casos, podría ser una buena opción para un sitio web súper básico.Pero un sitio web creado con Elementor requiere muchos recursos para cargarse de manera efectiva.Y esto se debe al hecho de que el número uno está cargado, una herramienta de creación de página muy, muy completa.Y en la parte delantera, hay una página muy bien diseñada, que tiene muchas características, como transiciones, imágenes de alta resolución, menú, cosas así.Esta no es una página básica, incluso si crea algo básico en el elemento.La salida del código no es básica.Y requiere potencia de procesamiento para cargar.Y esto no te da la sombra de compartir.La partición compartida no proporciona los recursos que necesita para cargar rápidamente el elemento.Y si todo esto lo supero, te mostraré algunos números ahora.
Así que este es el tiempo de carga de nuestro sitio de WordPress en Cloudways. Y este es el campo que usaremos para probar nuestro sitio de WordPress, cargar, diagnosticar las causas que hacen que la carga sea lenta y luego arreglar todo. Entonces, aquí está alojado nuestro sitio ahora, como puede ver, tiene una puntuación de 68 de cada 100 en la velocidad de la velocidad de Google. Y aquí están nuestros datos de laboratorio. Por lo tanto, tomaremos este video, veremos principalmente el índice de velocidad debajo del índice de velocidad de datos de laboratorio le brinda una medida completa de tiempo de carga. Por lo tanto, muestra qué tan rápido es el contenido de una página. Entonces, este es un medio feliz entre todo lo que está aquí. Y escribe que tarda 2.8 segundos en cargar completamente esta página. Bueno, el tiempo visible poblado para interactivo está lleno, pero observamos el índice de velocidad. Por lo tanto, tarda 2.8 segundos en cargar esta página.
Lo que hice, tomé toda la instalación del sitio web.Entonces, todo lo que le mostramos en la parte posterior de la página, la página de contacto y utilizamos una herramienta llamada WP Migrae All en One WP Migra, que generó una copia perfecta de este sitio web.Y tomé este sitio y lo instalé en una instalación de Bluehost.Y esperaba Bluehost para un desarrollo en vivo que no requiere velocidad o potencia o algo así.Ya no lo usamos demasiado, pero lo tenemos.Así que tomé este sitio, lo copié por completo, luego lo puse en Bluehost y te mostraré la página, la instalé en el blog.isotrópico.co y eso será en realidad cuando publiquemos este video, solo redirigirá en nuestro blog de diseño isotrópico.Entonces, esta es una copia exacta, a menos que el host sea diferente.Esto está en un anfitrión de Bluehost y lo que hice lo hice retroceder a través de las ideas de PageSpeed.Así que esta es la misma página que esta aquí.
Y puede ver, aquí está el identificador de su página. Y corrí a través de Bluehost. Y tenemos un índice de velocidad mucho peor. Entonces, en comparación con el tiempo de carga de 2.8 segundos, lleva 3.4 segundos. Y como puede ver, esta es la misma página. Y tiene una puntuación ligeramente diferente, un poco peor. Pero lo principal que debe mirar aquí es 3.4 segundos, en comparación con 2.8 segundos en la misma página. Y este es un sitio bastante simple, no hay complementos adicionales. No hay características especiales en la página que no sean animaciones. Entonces, lo que trato de mostrarle es que la compra de compartir es más lenta que la compra de alojamiento para empresas y le mostraré cómo Cloudways es más lenta y luego este es un sitio muy grande. Para complementos, el tema Hello Elementor, el Página básica de transición básica. Entonces, si se carga en 3.4 segundos, sin complementos, tres páginas, cosas como compartir, los problemas de velocidad con él empeorarán, a medida que construya su sitio aumentando y en la medida de más y más personas comienzan a visitarlo y tiene más Las personas en la página simultáneamente, este índice de velocidad aumentará exponencialmente. Y un índice de mayor velocidad es peor, porque así es como se hace cargo la página de carga. Entonces, desde el principio, puede ver que el intercambio es peor en un sitio web básico en un entorno de desarrollo sin factores externos. Pero cuando agrega el artículo real de un sitio web, todo empeora aún más. Así que no quieres estar en Bluehost, no quieres estar en GoDaddy, sin importar lo que la gente te diga.
Y te digo esto solo porque obtengo $ 65 por conversión. Entonces, nuestro host recomendado son las nubes. Usamos vías de nubes en todos los sitios de nuestras agencias, usamos Cloudways en todos nuestros sitios, y como puede ver, lo usamos en todos los sitios de nuestras agencias, lo usamos en todos los sitios de nuestros clientes. Y Cloudways es un host que le permite alojar fácilmente su sitio web en el alojamiento de la nube a nivel empresarial. Y lo que significa es que puede alojar su sitio web en AWS, ofrece Google Compute Engine Digitalocean. Y este es un anfitrión muy bien presentado, bien administrado y bien impulsado. Por lo tanto, puede ejecutarlo en cinco proveedores de nubes, puede instalar tantos tribunales como desee. El aspecto de soporte de esta empresa es increíble. Como agencia, les hacemos muchas preguntas avanzadas sobre PHP y responden y generalmente harán cosas por nosotros. Entonces eso es lo que quieres cuando se trata de alojar. Recibieron administración de seguridad, copias de seguridad automáticas, monitoreo en tiempo real, CDN incorporado y este tipo. Entonces es un gran anfitrión. Recomendamos esto, con todo mi corazón. Cuando se trata de precios. Si compara este anfitrión con Bluehost o GoDaddy, en realidad es casi el mismo precio. Entonces, si compra una instalación básica de BlueHost, cuesta alrededor de $ 7 por mes. Esto le costará alrededor de $ 10 por mes por el plan más simple. Y esto es lo suficientemente bueno para una instalación individual de un sitio web elemental. Por lo tanto, puede acomodar DigitalCean, Linode, Vultr, AWS, Google Cloud.
Hacemos todos nuestros sitios en Digitalocean porque es el plan más barato aquí. Y realmente no necesita lo que ofrecen otras compañías. Si solo hace un elemento o sitio web básico, es el pago personalizado. Entonces, cada mes, se le factura en lugar de tener que pagar por adelantado un año, cosas como esta, que harán otros anfitriones. Y puedes comenzar gratis. Entonces puede darle un intento gratuito de tres días, sin información sobre la tarjeta de crédito, algo como esto. Y también porque nos gusta esta compañía, colaboramos con esta compañía y puede obtener un descuento del 30% en el primer mes de alojamiento. Al introducir el código “isotópico”, hay un enlace en la descripción a continuación. Así que usamos este host para este sitio web y para todos nuestros otros sitios web. Y la razón por la que usamos este anfitrión es que nos permite organizar centros de liderazgo en la industria, de la marca Name. Y debido a que usamos un buen hardware que otras compañías usan a nivel empresarial, obtenemos un buen rendimiento. Comparando esto con los servidores Bluehost, retírelo del agua porque recibe una RAM dedicada, un procesador dedicado con un núcleo, 25 gigactas de almacenamiento SSD y un terabyte por $ 10 por mes, facturado mensualmente. Por lo tanto, usamos esta empresa y le recomendamos que use esta empresa. Por lo tanto, este tutorial utiliza un sitio web creado con el alojamiento de Cloudways como un proveedor de almacenamiento básico. De acuerdo, entonces esperamos que le haya dado una buena imagen general sobre por qué usamos Cloudways, por qué quiere mejorar su sitio elemental y este tipo.
Entonces, para presentarle rápidamente quién soy, soy el fundador de una agencia que construye exclusivamente con WordPress y alrededor del 50% de nuestros sitios de WordPress se crean con Elementor. Y por esta razón, noté que hay problemas de rendimiento con Elementor. Así que encontré formas de resolver el rendimiento lo mejor posible. Así que esto es lo que compartiré aquí, compartiré lo mismo que hace mi agencia cuando se trata de rendimiento primario. Entonces creamos sitios web y luego tenemos un servicio profesional de optimización de páginas de WordPress. Y las técnicas que le mostraré en este video son prácticamente las mismas cosas que hacemos con este servicio. Entonces, este servicio práctico entra y hará exactamente lo que le mostraré aquí. También escribí el libro en WordPress PageSpeed. Entonces, si entras en la tranquila Amazon, y luego entra en WordPress PageSpeed. El libro que escribí en WordPress PageSpeed ​​es lo primero que aparece. Así que escribí el libro sobre eso bastante. Es una guía paso a paso sobre cómo aumentar el rendimiento de su sitio y tenemos un enlace a continuación. También escribí el libro sobre la construcción de un sitio web de Elementor. Entonces, aquí está nuestro otro libro sobre cómo construir un elemento en nuestro sitio. Y este es el siguiente enlace a. Por lo tanto, hay mucho conocimiento que nuestra agencia tiene cuando se trata de aumentar la velocidad y la velocidad de rendimiento y todo lo relacionado con el sitio web de Elementor. Así que prácticamente, eso es lo que compartiré contigo. En esta siguiente sección de este video.
Compartiré todas las cosas que he identificado como agencia, durante cuatro años de construcción de sitios web con WordPress y el 50% de los sitios web que se construyen con Elementor. Compartiré con ustedes todas las herramientas y técnicas que utilizamos. Y eso es exactamente lo que haría en una agencia. Pero intentaré hacer que este tutorial sea simple y fácil de entender. Entonces, incluso si usted es un principiante, esperamos que pueda ver y verificar las herramientas al menos e instalarlas en su sitio web y ver si puede aumentar la velocidad. Así que intentaré presentarles estos temas de una manera simple y fácil de entender. Bien, vamos directamente al tutorial ahora. Espero que la introducción no haya sido demasiado larga, pero espero que te haya dado información y cosas por las que tener cuidado. Entonces, como ha visto en la sección inicial de este video, utilizamos PageSpeed ​​Insights para identificar la puntuación de rendimiento básica y el tiempo de carga de nuestro sitio. Y la razón por la que usamos las estadísticas de PageSpeed ​​es que es simple de entender y le da exactamente lo que está mal con el tiempo de carga de su sitio. Hay otras herramientas, como GT, Pingdom, una nueva herramienta llamada rápida o lenta. Y todo esto está vinculado en la descripción de este video. Pero la razón por la que usamos PageSpeed ​​es que es muy simple de usar, la industria lo usa y le brinda una lista de cosas que querrá centrarse en la mejora. Es una herramienta muy simple.
Y la simplicidad es lo que hace fácil de usar, fácil de entender y luego fácil de continuar y remediar los problemas que identifican. Por lo tanto, hay otras herramientas, otras herramientas le darán mucha más potencia, pero si solo desea hacer el sitio web que creó en el elemento para cargar más rápido, esta es una buena manera de hacer esto. Por lo tanto, ingrese la dirección de su sitio aquí, haga clic en el análisis de botones y tomará unos segundos para generar un informe y, qué hace esto, use una API subyacente llamada FAR. Lighthouse es una herramienta de optimización y auditoría de rendimiento, creada por Google. Y este también es un sitio web GoogleDevelopersGogle.com y tomará su sitio y lo ejecutará a través de todas sus pruebas, luego tomará este informe. Y emite un primer informe móvil. Y luego puede acceder a la relación de escritorio y centrarse en ambos aspectos. Pero primero nos centraremos en la relación de escritorio. Así que aquí está la dirección de nuestro sitio. Como puede ver, es el sitio de hamburguesas que he construido especialmente para este video, le dirá todos los valores aquí, le dirá oportunidades y le dirá diagnósticos, luego le dirá las auditorías pasadas y Parecerá que esto fue hecho por el faro. Entonces, las cosas que queremos centrar aquí son el número uno, todos estos valores. Entonces, la medida principal en la que nos centramos es el índice de velocidad y saltará hacia arriba y hacia abajo hasta que realmente optimice el sitio web, luego es la pintura más grande con contenido, luego es hora de interactuar, luego es la primera pintura con contenido. Todo esto se puede explorar más aquí.
Hay muchos enlaces en la descripción de este video en una publicación de blog que escribí sobre todos estos valores. Pero solo para este video, veremos el índice de velocidad. Por lo tanto, queremos aumentar el índice de velocidad de nuestro sitio. Y lo haremos corriendo y echando un vistazo a las oportunidades. Y estas sugerencias ayudan a su página a cargarse más rápido, no afectan directamente el puntaje de rendimiento, y este es su puntaje de rendimiento. Y también algo a tener en cuenta es que realmente no debería importarle este puntaje. Este es más un valor general que dice “Hola, su sitio es un poco lento, oye, su sitio se está cargando un poco rápidamente”. No querrás empujarlo punto por punto hacia arriba y hacia arriba. En lo que desea centrarse es en el índice de velocidad, queremos apuntar a un tiempo de carga en menos de dos segundos. A veces, esto es imposible con la forma en que se construyeron los sitios web, pero trataremos de mejorar el índice de velocidad lo mejor posible. Entonces queremos que esto sea [inaudible]. Y no nos importa. Nuevamente, nos importa más el índice de velocidad. Por lo tanto, la forma en que optimizamos nuestro sitio web es analizar las oportunidades que se desencadenan por el informe PageSpeed. Entonces, como puede ver aquí, busque imágenes en los formatos de próxima generación y brinde todas las imágenes que desea transmitir en un formato de próxima generación. Le dice que reduzca el tiempo de respuesta inicial del servidor, y esto probablemente se deba a nuestras páginas y optimizadas, quiere eliminar los recursos que bloquean la representación. Y te dice todos estos archivos CSS que quiere eliminar.
Y luego le dice que dimensione las imágenes correctamente. Entonces, lo que puede hacer de estas sugerencias es entrar y hacer todo manualmente y dimensionar adecuadamente las imágenes, colocándolas en Photoshop y cambia el tamaño de que coincida con este identificador del tamaño correcto. También puede continuar y eliminar los recursos del botón de representación tomando todas estas hojas de CSS, copiar y pegar todas las CSS en otra hoja, eliminando todos los CSS no utilizados y luego cargándolo de ese CSS individual instalando un fragmento de código PHP. También puede reducir el tiempo de respuesta del servidor haciendo casi todos los demás identificados aquí. También puede servir estos formatos de generación siguientes instalando algo en la línea de comandos para convertir todo en Web P., pero esto es muy complicado. Todo lo que dije probablemente pasó sobre tu cabeza. Es complicado, es manual, lleva mucho tiempo y realmente no tiene sentido hacerlo. Lo que desea hacer es abordar estas oportunidades, pero desea ser inteligente sobre cómo optimiza su sitio de velocidad. Entonces, como agencia, utilizamos tres herramientas principales cuando se trata de optimizar el rendimiento de WordPress. Estas tres herramientas funcionan juntas. Y resuelva casi cualquier oportunidad aquí. Y le mostraré cómo abordar estas oportunidades directamente aquí. Resuelven todas las oportunidades y lo convierten en el sitio para cobrar más rápido. De acuerdo, las tres herramientas principales que usaremos en este tutorial son las siguientes. Usaremos un complemento llamado Asset Cleanup Pro. Y este es un complemento de WordPress de rendimiento. Y funciona con un complemento de caché.
Y lo que hace es que le ayuda a que su sitio se cargue más rápido desactivando ciertos CSS y JavaScript, scripts que componen la página. Y puede deshabilitar estos scripts individuales que no se utilizan en la página, lo que significa que cargará menos datos y menos datos se cargará, más rápido se cargará la página. Y cuando se trata de rendimiento, las dos cosas principales que desea enfocar son menos carga de datos y luego cargar datos de una manera que sea más rápida que otros métodos. Por lo tanto, cargando menos datos y luego cargando los datos en un método más rápido, aumentará el tiempo de rendimiento de su página. Por lo tanto, hay muchas funciones aquí y le mostraré detrás. Hay una versión gratuita y hay una versión profesional. La razón por la que nos gusta la versión Pro es que nos permite abordar complementos individuales. Nos permite cargar scripts individuales asíncronos, o posponerlos, luego podemos mover las Escrituras y explicar por qué queremos hacer esto a otra sección en la que voy directamente a cómo usar este complemento. Por lo tanto, utilizamos la versión Pro de este complemento relacionado con la descripción. También puede usar la versión gratuita, pero no podrá hacer algunas cosas que mencioné en este tutorial. El complemento principal que utilizamos para aumentar el rendimiento de los sitios web Elementor es un complemento llamado WP Rocket. Y WP Rocket le permite acelerar su sitio. Es un complemento de caché, pero también es un complemento de rendimiento completo. WP Rocket le permite mantener su página en caché. Entonces, prácticamente lo que hace el caché, genera archivos estáticos de su sitio.
Y luego los visitantes cargan archivos estáticos en lugar de cargar archivos en vivo. Y al hacer esto, se cargará más rápido, porque no tiene que conectarse a un servidor. También puede precargar el caché, puede comprimir sus archivos individuales. Y luego puedes concentrarte en las imágenes. Y pasaré por alto todas estas características. Pero todas estas características harán que nuestro sitio se cargue más rápido. Este complemento cuesta $ 49 por año. Y si gasta dinero en uno de los complementos de los que hablé aquí, debe ser este. Esto es lo que hace que su sitio se cargue más rápido. Esto hará que su sitio también se cargue más rápido. Pero esta es la columna vertebral de la optimización de nuestro rendimiento que hacemos en nuestra agencia. Entonces esto es solo otra cosa que usamos para que las páginas se carguen más rápido. Luego, otro complemento que usaremos en este tutorial se llama perfmatters. Perfmatters es un complemento muy simple, muy fácil, creo que tiene 50 kb de código. Y nos permite activar y deshabilitar ciertos elementos de nuestro sitio web, como los activos de limpieza. Y nos da algunas herramientas específicas que pasaré. Y estas herramientas específicas que usaremos para que todo el sitio se cargue más rápido. Entonces, este complemento es un sitio web completo, administrador de scripts. Esta es una herramienta de optimización completa para todo en el sitio. Y luego esta herramienta nos permitirá ingresar estas páginas específicas y continuar optimizándolas para cargar más rápido.
Por lo tanto, usaremos esto en la página inicial para que la página de inicio se cargue lo antes posible. De acuerdo, estos son los tres complementos que recomendamos usar y esto es lo que nuestro tutorial usará. Así que ahora le expondré cómo instalamos y usamos cada complemento individual en el sitio web de WordPress. Y este será el resto de este tutorial. Y luego, a partir de ese tutorial, debería poder acelerar su propio sitio web de Elementor. Entonces, lo que tenemos ahora es el sitio elemental construido en el elemento introducido al comienzo de este video, los complementos actuales son elementales y elementales. Pro, PageSpeed ​​y recargaremos esta velocidad de página, nuestro puntaje de rendimiento es de 64 a 68. Nuestro índice de velocidad es de alrededor de 2.8 a 3.1. Y el puntaje en el móvil que tendremos que lanzar es 22 de 100. Y tarda 11 segundos en cargarse en el móvil. Y nuevamente, nos mostrará todas las oportunidades que abordaremos en este video. Y luego el escritorio también es 71 El índice de velocidad es 2.2. Necesitamos transmitir imágenes en formatos de próxima generación. Y como puede ver, esta es una buena actuación. Ya porque estamos en Cloudways. Por lo tanto, debe verificar las modalidades de la nube. Muestra gratuita, sin tarjeta de crédito 30% de descuento con “Isotrop” es un enlace en la descripción. De acuerdo, lo primero que haremos es instalar todos estos tres complementos. Y luego, una vez que se instalen estos complementos, iremos a configurar cada uno. Y luego casi olvido que realmente usaremos un cuarto complemento llamado Ewww Image Optimizer.
Y esta herramienta abordará directamente esta oportunidad de rendimiento, que se ofrece imágenes en los siguientes formatos de generación. Y esta herramienta es realmente gratuita. Y quería presentarlo muy rápido porque hay algunas ideas sobre esta herramienta. Por lo tanto, esta herramienta utiliza los recursos en su servidor para hacerse cargo de sus imágenes, cambiarlas a dimensiones más pequeñas, comprimirlos y luego convertir cualquier formato en el que se encuentren, que generalmente es JPEG o PNG y toma ese formato y lo convierte en Web P. Web P está en el formato de la próxima generación y carga un millón de veces más rápido, “no en realidad”. Pero se cargan mucho más rápido que JPG o PNG o algo así. Este complemento tiene una pequeña controversia a su alrededor, porque algunos proveedores de alojamiento bloquearán este complemento porque usa sus recursos en su servidor, de modo que RAM y CPU en su servidor cambian las imágenes. Y cuando cambia las imágenes, son recursos extremadamente consumidores. Si estás en las nubes, tienes el poder de hacer esto. Conduce su propio servidor. Es divertido, puede usar este complemento muy fácil, muy simple, es un complemento gratuito. Si no está en Cloudways, es posible que no desee usar este complemento, es posible que desee usar algo como el complemento de imagen.
Otros complementos optimizarán las imágenes, pero harán su propio servidor y descargarán todo el rendimiento del procesamiento o cualquier otra cosa. Lo que harán es enviar la imagen en su plataforma, su plataforma optimizará esa imagen y luego enviará la imagen a su sitio web, que está permitida en cada host, pero debe pagar porque usa a alguien. los recursos de otra persona. Entonces, esta es la única solución gratuita que funciona. Otras soluciones para las que deberá pagar. Si está en Cloudways, esta es la herramienta perfecta para usted. Si está a cargo de otra cosa, esta podría ser la herramienta perfecta para usted. Puede que no. Bien, aquí están todos nuestros complementos. Como puede ver, WordPress Rocket, PERF Matters, EWWW, ACIT Cleanup Pro no se activan porque solo tengo una licencia para un sitio web. Pero puedo cargar esto en cualquier otro sitio que quiera. Muy bien, por lo que prácticamente, iremos directamente a nuestra optimización del sitio web. Por lo tanto, la primera herramienta que optimizaremos es WP Rocket, y WP Rocket aumentará la velocidad de nuestro sitio. Y como puede ver, todo está instalado. Y automáticamente precarga la memoria de caché. Entonces, al instalar este complemento, la memoria de caché se optimiza y se activa automáticamente. Hay algunas cosas más que veremos. Así que configuré un caché móvil. No hay otra configuración de caché que hagamos. Y si desea leer más sobre el almacenamiento en caché y por qué lo desea, hay muchos artículos en línea en la descripción a continuación. Pero el caché hace que su sitio sea más rápido, en los términos más simples.
Lo siguiente que haremos es optimizar los archivos. Por lo tanto, reduciremos HTML, y esto elimina todos los espacios blancos y comentarios para disminuir el tamaño del archivo. Y nuevamente, el tamaño del archivo más pequeño, los datos menos cargados, el sitio web de carga más rápido. Reduciremos los archivos CSS y es una advertencia, y la advertencia dice que rompe el sitio, pero tomaremos este riesgo si rompe un sitio, todo lo que podemos hacer simplemente hacer clic y diagnosticar los problemas y luego excluir. Archivos CSS que causaron la ruptura del sitio web. También optimizaremos la entrega de CSS, luego eliminaremos la migración jQuery, reduciremos los archivos JavaScript, combinaremos los archivos JavaScript. Entonces la fusión y la minería es lo que se llama. Y la fusión y la minimización eliminarán los recursos que bloquean el rendimiento lo más posible. La combinación y la minimización significa, prácticamente, que tomamos todo el código CSS, lo optimizamos, eliminamos el código completo que no se usa y luego lo minimizamos combinándolo o combinando todo en un archivo.
Entonces, transmitimos solo dos archivos individuales, uno para CSS y otro para JavaScript. Si regresamos aquí en este momento, podemos ver que cargamos un millón de archivos CSS. Por lo tanto, esta herramienta se hará cargo de todos estos archivos CSS individuales y los presionará y podrá ver que cuando restauremos nuestro informe de información de PageSpeed, es ahora, por lo que hemos hecho todo esto. Y también cargaremos JavaScript pospuesto. Y eso cambia la forma en que el código realmente se carga cuando el navegador planea la página. Si desea leer más al respecto, puede en la descripción a continuación, pero posponiéndolo o cargándolo asíncrono, hacemos que el sitio se cargue más rápido. También perezcaremos las imágenes, los marcos y los videos de Iframe perezosamente. Y lo que hace es cargar tus fotos mientras el navegador corre hacia ellas. Entonces, si no carga perezoso, todas las imágenes en la página se cargan cuando se carga la página. Y eso carga datos innecesarios, porque si su usuario no se ejecuta, cargue una imagen desde la ventana de vista que nadie verá sin motivo. Por lo tanto, lo cargará a medida que el usuario se ejecute en la imagen. Deshabilitar el emoji reduce la cantidad de solicitudes HTTP, por lo que si no usa emoji en su sitio web y probablemente no debería, esto reducirá la necesidad de que WordPress llame al archivo de imagen. Desactivaremos la incorporación de WordPress. Y luego también vamos a configurar el almacenamiento en caché de palabras. Y vamos a configurar el almacenamiento en caché de WP, porque vamos a usar el Optimizador de imágenes EWW en el siguiente paso para optimizar nuestros Iaes. Así que no tenemos esto. Nosotros ‘

Hemos optimizado nuestros archivos, hemos hecho medios, hemos configurado nuestro caché. Ahora vamos a precargar las cosas. Así que vamos a activar la carga previa, que es Alreaden. Y luego vamos a precargar los bonos. Y si su informe PageSpeed ​​le dice que precarga las fuentes, entonces puede hacerlo. No creo eso en ninguna parte de esto. Nos dirá, sí, lo hará. Muy bien, aquí hay una fuente, y aquí hay otra fuente. Básicamente, lo que voy a hacer, voy a copiar la ubicación del enlace y luego ir a precargar porque PageSpeed ​​Insights nos dice que quieren precargar nuestras fuentes. Y luego voy a tomar esas fuentes y precargar el cohete WP. Básicamente, solo pegamos las fuentes aquí. Y luego guarde el cambio. Entonces eso aumenta el rendimiento al tener un poco las fuentes. Entonces, como puede ver, estos son los parches de dónde se almacenan las fuentes en WordPress. Y obtuvimos esos caminos de ir a precargar los requisitos clave y luego ir las fuentes y decimos las fuentes, las colocamos aquí. Muy bien, así que vamos a guardar esos cambios nuevamente. Y hemos precargado todas nuestras fuentes. Podemos probar reglas avanzadas, pero generalmente hay cosas en las que entras aquí. Además, con la base de datos, podemos limpiar nuestra base de datos y limpiar la base de datos lo convierte en una carga un poco de fater y se amplía un poco. Pero no tenemos realidad que hacer. Si tenemos un CDN, podemos habilitarlo. Y Cloudflare tiene Cloudways. Ofertas de Cloudways de CDN y Ofertas de CloudFlare de CDN. En todos nuestros sitios web que han alojado en Cloud Way, usaremos su CDN y su CDN es una ruta de pila CDN. Y lo básico que hace un CDN si tú ‘
No está familiarizado, y tenemos un enlace en la descripción Descripción CDNS finaliza, si no está familiarizado con los CDN, lo que es lo que se hace por los archivos que cargan la cara de la fecha del centro, esto está más cerca de su geografía específica . Entonces, si estoy en Nueva York, lo cargará desde un servidor en Nueva York. Muy bien, así que después de integrar su CDN y este es un paso opcional, tiene mucho que estar con WP Rocket. Así que vamos a ejecutar esto a través de PageSpeed ​​y ver si hicimos una diferente. Y compramos que debido a las matemáticas simples, hicimos que nuestros archivos sean más pequeños al optimizarlos. Ahora los estamos cargándolos más cerca de donde se llame al sitio web. Hemos eliminado la carga innecesaria de medios. Entonces, si hay un imago que no se va a ver, no se va a cargar, entonces hemos configurado un caché. Así que esto es solo con la optimización de cohetes WP. Así que pasamos de 22 a 47 en dispositivos móviles, redujimos nuestro tiempo de carga de 11 segundos a 4.7 segundos, primer contenido pintura a 1.7 segundos. Ahora estamos en el informe de escritorio. Y somos de alrededor de 66 años, creo a 85. Simplemente optimizando con esas cosas individuales. Dejamos caer nuestro índice de velocidad a 1.4 segundos. Y esa es la combinación de WP Rocket y Cloudways. Y realmente resolvimos todo lo que nos lleva a hacer aparte de las imágenes. Así que eso es lo que WP Rocket hará por ti. Como puedes ver en tiempo real. Hago clic en un montón de botones, hago clic en el botón Guardar y luego ejecuté este informe nuevamente e instantáneamente vi que nuestro índice de velocidad saltó a 1.4 segundos. Muy bien, entonces hemos terminado con WP Rocket. WP Rocket, por cierto, lo hará automáticamente para cada archivo que agregue al sitio web. Así que nosotros ‘
Al agregar nuevas páginas a nuestro sitio web de Food Truck, seguirá adelante y tomará esas páginas y las agregará al caché y se extenderá y minificará todos los archivos. Como puede ver, con WP Rocket, es el mismo sitio web. Es solo una carga más rápida, el mismo sitio web que antes, solo la carga más rápida. Muy bien, así que a continuación, vamos a optimizar nuestras imágenes. Y esto es algo muy divertido, simple y fácil de hacer. Lo que vamos a hacer es agregar un par de cosas. Básicamente, lo que es esto es hacer, “tomará sus archivos JPEG,” tomará los archivos PNG, “también los cambiará”. En un tamaño adecuado, por lo que si su imagen tiene como 4000 píxeles de ancho, la cambiará a 1000 píxeles o algo así, que funciona bien con el sitio web. Y al reesiciarlo menos fecha se carga. Y debido a que se carga menos fecha, el sitio web se carga más rápido. También comprimirá los archivos para que comprimirá la fecha en ellos y hará que se cargue más rápido. Lo último que vamos a hacer es convertir JPG a PNG. Y vamos a hacer eso revisando JPG a PNG. Y luego también vamos a ver a JS para reescribir PNG. Y luego también vamos a forzar a Web P. y Web P nuevamente es un tipo de archivo que es un archivo de imagen y tendrá imágenes mucho que JPEG o PNG. Y funciona en el navegador Chrome, el navegador Firefox y el soporte para las imágenes de la web P en Safari se encuentra actualmente en el puerto web beta, si la imagen no es compatible, por lo que actualmente en la versión general de Safari, no es compatible. Simplemente recurrirá esto volverá automáticamente a los archivos JPG o PNG. Entonces, como puedes ver aquí, nosotros ‘
RE Bulk Optimizando todas las imágenes en nuestra biblioteca de medios. Así que te mostraré eso aquí. Tenemos un montón de imágenes en la biblioteca de medios. Son grandes imágenes, imágenes de alta resolución de comida y lo que esto está haciendo. Está corriendo y está avanzando, puedes ver que es a las 36. Tenemos seis minutos recordando la optimización. Se está ejecutando, está tomando cada imagen y luego las optimiza automáticamente. Para que pueda ver aquí, se reduce el tamaño del archivo en un 49%. Y puede ver como un 50% 40%, por lo que está ahorrando la mitad de sus archivos. Estás reducido, significa que la imagen que está alojando es la mitad de grande que la original. Las matemáticas simples muestran que una imagen más pequeña se va a cargarse más rápido. Y debido a que esas imágenes se cargan más rápido, todo su sitio web se cargará más rápido, luego convierte el imicaje de reducción en Web P. y la W Web reduce aún más el tamaño del archivo. Y depende del tipo de logotipo, pero puede estar a través de este ejemplo, que 50.7% 58%. Aquí, quiero decir, Web P reducirá el tamaño del archivo y luego también se cargará en el navegador. Entonces, una vez que esto se esté ejecutando, servirá automáticamente las imágenes en la Web P y le mostraré que verifica eso. Mientras tanto, voy a ver el complemento PERF Matess y optimizar aún más con los asuntos. Entonces, Thre se superpone entre las materias infl y el cohete WP. Por lo tanto, necesita más que NEP MEESTS, pero este es un pequeño complemento realmente ordenado que optimizará su sitio web de un par de maneras. Entonces, lo que vamos a hacer, este es un sitio web comercial. Así que vamos a eliminar elementos específicos de nuestro sitio web. Y nosotros ‘
Va a deshabilitar los elementos de pareja. Los emojis ya se han deshabilitado, pero lo haremos nuevamente aquí. No necesitamos nuestra API REST. No tenemos Google Maps, tenemos Foogle Fonts. La carga de lazada ya está optimizada a través de VP Rocket y WoCommerce no está instalado en este sitio web. Pero voy a encender Ether Way porque duele. Por lo tanto, es un complemento muy simple que le permite activar y desactivar las cosas. Podemos instalar Google Analytics aquí y esto es importante porque Google Analytics es tradicionalmente un script de JavaScript de fiesta, y la carga de JavaScript del tercero puede ralentizar su sitio web. Entonces, si ejecuta un informe de PageSpeed, y dice: “Evite que JavaScript se cargue” en la fiesta Thir, entonces puede hacerlo fácilmente usando esta herramienta, puedo volver a esta herramienta, ingresar la ID de seguimiento y luego habilitar local Analytics, lo que significa que el script estará almacenado desde su sitio web, el script de JavaScript de análisis se almacenará en su sitio web. Y lo único que seremos es presionar información de su sitio a Google Analytics, tradicionalmente, extrae el script de Google Analytics, se ejecuta en el sitio web y luego presiona la fecha. Así que eso es una carga de sitio un poco rápida. Y finalmente, podemos saltar para extraer y no creo que haya nada que vamos a hacer aquí. Pero como puede ver, obtienes un par de características adicionales en los parámetros. Muy bien, así que volvamos a revisar nuestra optimización masiva. Y tenemos bajo optimización a granel y en realidad parece que lo detuve. Así que vamos a comenzar. Y eso ‘
Se ejecutará y hará esto y optimizará las imágenes. Muy bien, así que mientras esto se optimiza, no voy a cerrar la pestaña como lo hice la última vez. Intead, voy a ir y mostrarte activos de limpieza Pro. Y la limpieza de activos Pro se utiliza principalmente en nuestra agencia para la optimización específica de páginas específicas. Te voy a mostrar aquí. Este es un sitio web bastante simple. Por lo tanto, es posible que no usemos esto para la expansión que lo usamos en los sitios web de OTER. Pero aquí obtienes un tono de configuración. Entonces, si tenemos muchos complementos, podemos ejecutar para arar en el administrador y deshabilitar el enchufe en el sitio web. Entonces, un ejemplo que me gusta con esto es si usa el formulario de gravedad en la página de contacto, que necesitaba en la página de contacto. Si usa el formulario de gravedad, está alojando sus scripts CSS y JavaScript en todo el sitio web, incluso si solo lo usa. Entonces, supongamos que esta es la forma de gravedad, hacemos toda la forma de gravedad. Pero si tenemos formularios de gravedad instalados, cubrimos descargarlo en el sitio web en todas partes, hacer una excepción y luego cargarlo solo en nuestra página de contacto. Entonces, lo que hace esta regla es solo cargar este complemento individual en la página de contacto. Y luego también puede especificar regex. Entonces, si desea cargar un enchufe en todas sus publicaciones, puede usar expresiones Regex para hacerlo. Por lo tanto, esta es una herramienta muy fácil, simple y potente donde puede tomar que usa en cada página y solo puede cargarlas en las páginas que se han cargado. Entonces, si está utilizando un WooCommerce WooCommerce se cargará en la página de inicio. Y WooCommerce es una colección masiva y masiva de guiones. Y si no estás usando WooCommerce, y estás cargando sus scripts, tú ‘
Re diezando la velocidad de su página de inicio porque está cargando un montón de scripts que no se usan que tienen scripts muy pesados. Entonces, al usar esta herramienta, puede desactivar WooCommerce en todas partes, excepto donde se usa, lo que significa que no alojará los guiones con WooCommerce en ningún lado, pero dónde necesitan. Y luego también puede correr a la configuración tradicional y luego le mostrará esta la miniificación y todo ya está tomado por WP Rocket. Y Asset Cleanup Pro Satas aquí y hemos usado mucho antes de Togete. Funciona bien con WP Rocket. Muy bien, las cosas principales para las que vamos a usar esta configuración general es funcionar para intercambiar la pantalla de fuentes, lo que se casará nuestras fuentes para cargar un poco. Vamos a encontrarnos con Google Fonts. Y también vamos a aplicar intercambio aquí. Y luego, si recuerdas, ya hemos cargado las fuentes en WP Rocket, pero si quieres precargar las fuentes, en la limpieza de activos, puedes hacerlo aquí. Pero solo debe precargar las fuentes en un complemento, compra en múltiples complementos. Muy bien, esta es la configuración principal que vamos a usar en este sitio web. En los otros sitios web, este es un complemento realmente poderoso. Por lo tanto, podríamos usar más las herramientas si tenemos un montón de complementos y cosas así. Pero en este sitio web, si recuerda, solo tenemos dos complementos frontales, que tienen los complementos Elementer. Así que hay verdadero no sirve de nada aquí. Lo principal para la que usamos esta herramienta es la optimización de páginas individuales. Así que te mostraré eso ahora mismo. Si pasamos a la página Editar. Y nosotros ‘
No edita con Elementor cuando el editor de Gutenberg y nos desplazamos hacia abajo, aquí es donde funciona el enchufe es mágico, correcto. Puede administrar el CSS y JavaScript de los complementos individuales. Entonces, ¿qué haces? Entonces, si no está cargando archivos específicos desde su sitio web, y están alojando en la página, incluso si no los está utilizando para crear la página actual, puede apagarlo. Entonces, en este ejemplo, yo y creo que hay algo que podamos, alemular. Déjame revisar la parte delantera. Podríamos apagar los íconos. Entonces, voy a desactivar los íconos solo para mostrarte lo que haces. Pero puedes desactivar las cosas individuales. Así que vamos a apagar nuestros íconos de elementor, vamos a desactivar la fuente, los íconos increíbles. Y manténgalos así. Funcionalidad adicional Si necesita cargar algo, pero desea que Lad inicialmente, puede continuar y deferencia la elogia del guión o loaded asincrónicamente. Como puede ver, con JavaScript, si desea cargar asincrónicamente, puede hacerlo específico al decir, cosas así. Por lo general, usaremos esto para remVE complementos, scripts y archivos que no usamos en esta página específica. Y al eliminarlos de la carga de la página, la página simplemente se cargará porque no se carga innecesaria. Así que solo te voy a mostrar y nosotros ‘
Tendrá que volver a habilitar esto porque realmente se usan en la página. Pero como puede ver, todos estos íconos de bonos están funcionando ahora, en la parte trasera, apagamos todos los íconos divertidos. Entonces, si reubicamos la página, ya no se mostrará. Y eso es porque no es lógico para el archivo detrás de los iconos. Entonces, si desea que su sitio web se cargue más rápido, puede remve todo el elemento tradicional y toda la fuente tradicional impresionante de todas sus páginas. Y luego puede usar esta herramienta y seguir adelante y deshabilitar cualquier complemento y cualquier archivo, debe deshabilitar. Así que vamos a habilitar eso porque la página realmente se aloja con esos complementos. Pero esto fue solo para mostrarle, puede identificar los scrips específicos que usa en la página. Entonces, digamos que no teníamos los íconos que viven. Podemos tomar esos íconos y simplemente podemos deshabilitar con esta herramienta. Así que para eso es para lo que realmente usamos esta herramienta. Revisaremos cada página individual en un sitio web y deshabilitaremos los scripts que no se usan en ese sitio. Y luego, si los scripts se usan en ese sitio, podemos hacer que se muevan, podemos diferir, podemos alojarlos de manera asincrónica. Como puede ver, podemos hacer mucho aquí. Por lo tanto, este es un complemento de optimización específico de página muy potente aquí. Así que voy a subirlo, estoy actualizado, y al elevarlo, vamos a alaborar esos archivos de script y esos archivos CSS nuevamente. Y podrás ver que nuestros íconos muestran. Muy bien, así que volveremos a la optimización de la imagen. Así que nosotros ‘
He terminado nuestra optimización de imágenes, y quiero volver y solo discutir lo que realmente hemos guardado aquí. Como puede ver, esta es la optimización general. Este es el receso y la compresión de los archivos PNG y JPEG. No estamos cambiando la composición real del archivo con solo cambiar el tamaño de ellos, redujimos este archivo en un 55%, con Web P, lo reducimos en otro 21%. Y esto sucede en todo el sitio web con múltiples tipos diferentes de imágenes y tamaño de imágenes y algo así. Y puedes ver que al final del día, estamos reduciendo probablemente en promedio, estamos reduciendo un 20% a 30%. Y estos no tienen archivos masivos. Entonces, 241 kilobytes, pero al final del día, si estamos reduciendo todas las agujas, se suman a los megabytes y luego estos megabytes. A la larga, si escala el sitio, se suman a los gigabytes, por lo que ‘guardar no solo el ancho de banda en su extremo, sino que también guarda mucho, dado que esto se carga sin sentido al cargar el sitio web, lo que hace que las cosas funcionen más rápido . Así que ahora vamos a echar un vistazo en el frente del sitio web y ver si nuestros archivos ahora se han cargado en la Web P porque se han optimizado y se han convertido en formato P. Así que vamos a buscar una imagen. Aquí hay una imagen aquí. Y lo que vamos a hacer, vamos a inspeccionar el artículo y yo ‘
M en el desarrollador de Firefox.Pero también puedes hacer esto a través de Chrome.Puede hacer esto a través de Edge cualquier navegador que use.Realmente me gusta el desarrollador de Firefox, porque te ofrece muchas herramientas adicionales.Pero aquí tenemos una inspección un imic.Y sabemos que esta es la imagen porque la clase de imagen y podemos ejecutar la imagen, y nos mostrará la imagen aquí.Para identificar que nosotros ‘
Reestructurarlo en formato P Web. Vea el documento web P aquí. Así es como sabemos que lo servimos como una imagen web p. Por lo tanto, esta es una característica muy grande que el complemento realiza automáticamente y cargará automáticamente su imagen como una web P, y le mostraré la carga real de la imagen, veremos si funciona, quién sabe. Pero como puede ver, se carga como un P. Web y puede ver que el tiempo de carga es casi instantáneo, porque es una web p, y luego podemos volver a JPEG. Por lo tanto, le cargará un archivo JPEG en lugar de Web P. Si Web P no funciona, como puede ver, este es un archivo JPEG, que se carga como JPEG. Y luego agregue solo el DOT web P porque el complemento de optimización EWW lo convirtió en un JP, estos son niños de ambos. Puede ver la carga como una página web. De acuerdo, una herramienta muy simple para la optimización de imágenes. Como puede ver, lo enrollé en segundo plano mientras optimizamos todo. De acuerdo, esta es prácticamente la optimización que rodé en el sitio. Así que permítanme volver muy rápido a través de todo lo que hice en el sitio web, luego ejecutaré PageSpeed ​​por última vez y luego te daré las figuras reales de lo que hice cuando optimicé el derecho, correcto. De acuerdo, entonces, primero, pasaremos por todos los complementos que hemos instalado, hemos instalado cuatro complementos principales de optimización de imagen y rendimiento. Por lo tanto, instalamos Asset Cleanup Pro y este es un complemento de optimización específico en la página. Este es un gran complemento. Tenemos muchos tutoriales empatados en la descripción a continuación.
Si necesita eliminar el CSS JavaScript no utilizado, este es el complemento para usted. Si no carga un script, bueno, si no usa un script en una página, pero aún así lo cargue, por lo que debe apagarlo. Este complemento le permite hacer esto fácilmente. El siguiente es un optimizador de imagen EWW. Este es un complemento gratuito y le permite reducir las dimensiones de las imágenes existentes y luego también puede convertirlo y luego servirlo en formato web, fácilmente. Tenga en cuenta que si está en Cloudways, que es el proveedor que utilizamos para todos nuestros proyectos de alojamiento, si está en la nube, EWWW es la herramienta perfecta para usted. Si tiene una sombra de sombra u otro host, puede ser una buena idea buscar otro complemento de optimización de imágenes, pero le recomendamos que esté en las nubes. Y luego recomendamos usar este complemento. Funciona muy bien. Y quiero decir, hice todo aquí en tiempo real. Así que podría ver que realmente había unos pocos clics y está listo para irse. Entonces tenemos problemas de perfume. PERF Matters nos permite regular los scripts que no queremos cargar y también tiene algunas configuraciones adicionales. Y de todos los complementos, diría que este es el menos necesario, pero este es realmente un buen complemento de optimización de rendimiento. Realmente nos gusta. Pondré un enlace con un video de revisión al respecto, ya que lo usamos específicamente en todos nuestros sitios web. Cubrí esto muy rápido. Luego, el complemento final es WP Rocket y este es el complemento esencial detrás del sitio de WordPress.
Como puede ver, este es el cohete WP. Todavía no he hecho la ronda final, pero pasó de 68 a 85. y cayó de 3.5 o algo así a 1.4. Así que es una locura, solo con WP Rocket. Y puedes ver que el cohete WP es muy fácil de usar. Son solo muchos clics. Como si solo tuvieras que hacer clic en las cosas. De acuerdo, en el orden del arrendamiento más necesario, diría que WP Rocket, EWW Asset Cleanup Pro es importante. Instale todos estos complementos y su sitio elemental se cargará más rápido, tan simple. Entonces, lo que hice con cada uno de estos complementos de cohetes WP, volveré a pasar por todo. Por lo tanto, puede hacer una lista de verificación o recordarle lo que he hecho. Optimizamos el caché y el caché instalados automáticamente al instalar este complemento, optimizamos todos nuestros archivos fusionando, HTML, CSS, JavaScript, configuramos la carga perezosa de nuestras imágenes de medios, precargamos todo. Y luego tratamos de integrar un CDN que no funcionó. Y creo que el sitio se cargará lo suficientemente rápido sin CDN. Pero si necesita el CDN, le mostré aquí, Cloudway CDN, configúrelo y luego instálelo con WP Rocket o Perf Matters, ambas tienen las mismas características. Nuevamente, hay algunas superposiciones de características entre estos complementos. Entonces, use solo uno de estos complementos para hacer una determinada función. No intente precargar las piezas con ambos complementos. Probablemente se romperá. Precedí las fuentes elementales básicas aquí con WP Rocket y lo hice agregando la URL especificada en el informe PageSpeed.
Entonces él dijo: “Oye, ¿tal vez quieras continuar y precargar tus fotos?” Entonces los encontré. Quiero decir, precarga la fuente. Así que encontramos las fuentes que queríamos precargar. Copié y me atasqué aquí, muy simple, muy fácil. De acuerdo, esto es prácticamente esto con el cohete WP, luego fuimos a EWW y nos instalamos. En primer lugar, configuré y no hice mucho aquí, no. No he cambiado nada aquí, puedes cambiar muchas cosas. Y este es un complemento muy poderoso, pero prácticamente omito aquí, fuimos a la Web P y verificamos estas dos casillas. JPEG, PNG en Web P, Reescribe JavaScript Web P. Y esto funcionará si solo usa el elemento básico del sitio. Y luego forzé la web P. Luego fui a los medios, la optimización en el bloque. Escaneamos las imágenes no optimizadas. Y luego continuamos y ejecutamos la optimización y ejecutamos la optimización, por lo que no la volveremos a ejecutar. También observamos los problemas de prueba. Por lo tanto, la cuenta de PERF es ese complemento que le permite activar y deshabilitar las cosas individuales. Y deshabilité muchas cosas que sabía que no usábamos en el sitio. También puede incorporar su CDN aquí, si realmente lo desea, puede incorporar Google Analytics, cosas así. Y esto reducirá el tiempo de carga de varios cientos de milisegundos en su sitio, si lo hace correctamente. Entonces este es un complemento valioso. Pero a medida que avanzan los complementos, probablemente esté en la parte inferior de la lista. Finalmente, nos reunimos con Asset Cleanup Pro, pasamos por la configuración de back-end, si tiene complementos que no necesita en todas partes, pero solo lo necesita, puede hacerlo aquí.
Luego, debajo de la configuración, puede pasar y ver si puede optimizar un poco más aquí. En nuestro caso, todo lo que tenemos que hacer es cambiar la visualización de ciertas fuentes. Y luego, quiero decir, hay muchas cosas adicionales que podrías hacer aquí, pero no necesitábamos hacer nada más en la configuración básica. Luego, lo que hice fui página por página e hice una sola página. Pero podríamos revisar cada página en cada página, fuimos a editar la página de back-end de WordPress, no ese editor primario, el editor de Back-end WordPress, revisamos todos los scripts que no necesitaba y los apagamos. Simple, se detiene, se inicia. De hecho, no dejamos ninguna de estas configuraciones en esta página, porque usamos todo aquí. Pero si no usa algo, esto es especialmente cierto si usa muchos complementos diferentes, por lo que dice que usa un elemento o complemento adicional y no usa ningún suplemento en esta página específica, puede deshabilitar los scripts detrás del complemento para La página, que significa que la página se cargará más rápido, porque carga menos datos. Así que hice todo esto. Y ahora aquí estamos. Entonces, todo está completamente optimizado en Elementor, nuestro sitio web, y primero le mostraré el sitio elemental. Luego ejecutaremos la velocidad de nuestra página. Entonces, aquí está nuestro sitio, y luego quería mencionar, nuevamente, alojamos esto en ondas de nubes en Cloudways. Gastamos $ 10 por mes, recibimos 1 GB de RAM, especialmente para esta instalación. Nos está yendo muy bien aquí con nuestro alojamiento y cosas así son muy simples y fáciles de instalar.
Entonces, si necesita verificar la forma gratuita a los modos de la nube, puede tomar su sitio, hacer una copia de seguridad con migrar WP, importar el sitio en un campo de prueba, como lo hice aquí, está en un área de prueba, puede Importe el sitio web, optimice en el campo de prueba. Y luego, si realmente le gusta, mueva su dominio del antiguo anfitrión al nuevo anfitrión. Y debido a que es una copia exacta del sitio, todo se migrará. Entonces puedes probar nuestras nubes aquí. Puede acceder a su sitio web de Clouds.com, hay un enlace en la descripción a continuación. Si usa ese enlace y usa nuestro código, “Isotrop”, ahorrará un 30% de descuento en el primer mes de alojamiento, lo que en realidad puede agregar $ 10 por este dólar. Pero si tiene un plan más grande, si usa muchos sitios web que realmente se pueden agregar, y puede ayudarnos al apoyar las vías de las nubes con las que colaboramos. Bien, entonces estamos en las carreteras de la nube, todo está bien. Hemos optimizado todo el sitio web. Y finalmente, analizaré el informe de PageSpeed ​​nuevamente y espero que nos mejoremos de nuestro puntaje de rendimiento de 22 100 en dispositivos móviles, inicialmente y 64 de 100 en escritorio, creo. De acuerdo, ejecutaré el informe de Google PageSpeed ​​Insights por última vez, luego iré y discutiré todo lo que ha sucedido. Entonces 85 nuestro índice de velocidad es 1.4. Y ofrecemos nuestras imágenes en formatos de próxima generación. Hay algunas cosas a tener en cuenta aquí. Probamos nuestras fotos.
Por lo tanto, sabemos que esto sirve como una web p, el problema aquí, a veces depende, es que si Elementary usa una imagen de fondo, la inserta a través de CSS y las imágenes insertadas CSS no pueden transformarse en una web p a través de cualquier solución. en este momento. Y ese es un gran problema. Y escribí sobre eso en nuestro blog. Pero no puede cambiar las imágenes de fondo en la Web P, que son el tipo de carga de imagen más rápido. Entonces, como puede ver, realmente aceleramos nuestro sitio aquí, nuestros sitios web locos rápidamente ahora se cargan en 1.4 segundos, la primera pintura de contenido es de 0.5 segundos, el tiempo interactivo es de 1.2 segundos. Sin embargo, nuestra única oportunidad a la que no pudimos acercarnos fue para convertir todo en la web P. y la razón por la que no pudimos convertirlo en EPI es que son imágenes de fondo insertadas por el elemento. CSS, y no configuraron P . Soporte web y escribí sobre esto en nuestro blog y te enviaré al problema de GitHub si quieres leer más al respecto. Pero todo incluido, corrigimos todas nuestras oportunidades, seguimos adelante e hicimos nuestro puntaje de rendimiento 85, que se realizó en 30 minutos y aumentó el índice de velocidad a 1.4 segundos. Y si piensas en el comienzo del video, queremos que sea menos de dos segundos. Esta es la optimización que generalmente ejecutamos en todos nuestros sitios de WordPress, sitios web de agencias, sitios web de clientes y esto también es algo similar a lo que haremos en el servicio de aceleración. Entonces, para concluir este tutorial.
Muy bien, este tutorial debería haberle mostrado las herramientas que usamos para limpiar nuestro sitio y hacerlo más rápido. Usamos misiles WP, usamos la limpieza de activos, usamos EWWW y usamos problemas de rendimiento. Todo esto está vinculado en la descripción a continuación. Estamos alojados en Cloudways. Al principio te mostré por qué quieres usar un anfitrión de renombre, un buen anfitrión. Entonces, Cloudways versus Bluehost desde el principio, en un sitio web básico, hubo una gran diferencia horaria. En un sitio más grande, la diferencia de tiempo sería aún más visible. Y toda esta optimización tuvo lugar en vivo en el video. En este video, hasta donde veo, probablemente tomará aproximadamente una hora. Así que corrí esto en aproximadamente una hora, haga clic en un montón de garrapatas, haga clic en muchos botones de rescate. Me detuve y comencé algunos guiones y eso es todo lo que hice. Esperamos que este video le haya demostrado que mejorar la velocidad de un sitio web de WordPress o un sitio web elemental construido con WordPress. No tiene que ser complicado, no es una locura y es solo una cuestión de usar las herramientas correctas y hacer clic en los botones correctos. Y si puede hacer esto, puede convertir su sitio de un sitio lento en un sitio rápido en muy poco tiempo. Y como puede ver, este no es cien puntaje perfecto. Y el móvil debe desear porque nuestra página web no se aplica al móvil. Y lo que hacemos es continuar e identificar qué causa estos problemas y optimizarlo aún más.