Cómo obtener el 100% en la prueba de velocidad de la página de Google: WordPress Edition

¿Te preguntas cómo hacer que tus páginas web se carguen lo antes posible? Bueno, en esta publicación, le mostraré los pasos precisos que las tribus SEO han tomado para pasar de un puntaje móvil de Google PageSpeed ​​de 37% a un puntaje perfecto del 100%. Entonces, si desea clasificarse por encima de Google, brinde una excelente experiencia de uso para sus visitantes y pase a la prueba de Google PageSpeed, está en el lugar correcto. Rompiré todos los obstáculos que se han superado y en cinco puntos de referencia clave que nos hicieron obtener un puntaje de velocidad de página de Google 100% para móviles:
Asegure el código limpio.
Instale un arado para la velocidad de página.
Actualizar webhost.
Mejorar la pintura más grande llena de contenido.
Mejorar el tiempo para interactivo.
Ahora, antes de intervenir, una pequeña disminución de responsabilidad. Comenzando con la publicación de esta publicación, la página de inicio de la tribu SEO obtiene un puntaje 100% de Google PageSpeed ​​Mobil en aproximadamente la mitad del tiempo. Esto es bastante típico porque a menudo verá algunas variaciones al ejecutar las pruebas de velocidad de página. Bien, así que saltemos. Etapa #1: Haga que su código limpio sea o no, sus páginas web están formadas por una serie de scripts que afectan la velocidad de su sitio.
Para los sitios de WordPress más simples, los scripts PHP y MySQL se ejecutan cuando un usuario requiere una página web desde el servidor.

Sin embargo, un sitio típico de WordPress usará un tema, muchos complementos y, a veces, un generador de páginas. Esto da como resultado el procesamiento de muchos scripts, tanto en el servidor, como PHP y MySQL como en el lado del navegador, como JavaScript y CSS. Pero aquí está la cosa. Muchos de estos scripts adicionales no son necesarios para cómo se ve y trabajar. Si observamos las instalaciones predeterminadas para tres constructores de páginas populares, podemos ver que el tamaño combinado de archivos JavaScript y CSS para Brizy Pro, Div Builder y Elementor Pro es 1624 KB, 1243 KB y 966 KB respectivamente. Entonces, de los tres, Elementor Pro tiene el tamaño de archivo más pequeño, por lo que el código más débil.
Pero de ninguna manera es el más débil de todas las páginas generadores, porque WP Bakery, Beaver Builder y Oxygen Builder tienen archivos más pequeños de 494 kb, 59 kb y 34 kb respectivamente.

Es claro ver que Oxygen Builder tiene el código CSS y JavaScript más simple. Es alrededor del 4% del tamaño total en comparación con Elementor Pro y el 2% en comparación con Brizy Pro. Esto se debe a que Oxygen Builder se basa en la premisa para cargar solo lo que se necesita y cuando sea necesario. Oxygen Builder también crea un código HTML muy limpio. Otros constructores crean una gran cantidad de divs vestidos para elementos de contenido simples, como los títulos H1, que se agregan a la hinchazón del código.
En cambio, el oxígeno no genera divs innecesarios. Además, Oxygen Builder actúa como un tema y como generador de páginas, de modo que elimina un código muy débil y puede describirse con mayor precisión como un constructor de sitios. Debido al código débil y a la comunidad de Facebook, Tribe SEO a. Oxygen Builder elegido para ayudar a desarrollar nuestro nuevo sitio. También tuvimos cuidado al elegir complementos de hinchazón. Por ejemplo, WP Fluent Forms tiene el tamaño del archivo muy pequeño. Etapa #2: Instale un arado para la velocidad de página Después de probar varios complementos para la velocidad de la página de WordPress, decidí WP Rocket porque no solo generé los puntajes de velocidad de la mejor página, sino que fue fácil de usar y ha tenido una excelente compatibilidad con la configuración nuestro sitio.

Al salir de la caja, ofrece excelentes funciones, como la memoria de página y el navegador, así como la compresión de GZIP, por nombrar algunas. Sin embargo, las características de la “optimización de archivos” del cohete WP tuvieron el impacto más significativo. Pero primero, veamos cómo se operaba la tribu SEO de WP Rocket. Su puntaje de velocidad de la página de Google para dispositivos móviles se subestimó del 37%. Google ha destacado “triángulos rojos” para la pintura de contenido más grande, tiempo hasta el tiempo de bloqueo interactivo y total. Entonces, sabía que estas áreas deberían mejorarse.
El puntaje móvil PageSpeed ​​Insight también necesita mejoras, Google ha reportado tres oportunidades con triángulos rojos, lo que indicó que eran la más alta prioridad para la remediación. Ellos incluyeron:
Posponer las imágenes fuera de la pantalla

Elimine sus recursos de bloqueo (que manejaría WP Rocket) elimine JavaScript no utilizado.
La lista de oportunidades: PageSpeed ​​interesante, la solución para posponer las imágenes fuera de la pantalla y la eliminación de JavaScript no utilizada fue la misma. Cuando hice clic para leer más sobre la eliminación de JavaScript no utilizado, Google destacó tres archivos JavaScript para prestar atención.
Eliminar JavaScript no utilizado PageSpeed ​​Insights primero fue para Chatra, nuestro widget de chat en vivo. El segundo para ConvertBox, que usamos para capturar correos electrónicos. Y el tercero fue para Spotlight, que usamos como reproductor de video. Spotlight se ha utilizado para nueve videos que contienen todas las imágenes fuera de la pantalla como miniaturas. Entonces, ¿cuál fue la solución? El remedio fue el aplazamiento del JavaScript de los tres archivos. Esto es fácil de hacer en WP Rocket, pero requiere un poco de esfuerzo de mi parte. Entonces, esto es lo que hice: en WP Rocket, navegué en la pestaña “Optimización de archivos” y luego obtuve la sección JavaScript. Activé “la carga de JavaScript pospuesto”, pero la verdadera magia ocurre al activar el “retraso en la ejecución de JavaScript”.
WP Rocket agrega algunos archivos JavaScript predeterminados y también le permite agregar sus propios scripts personalizados. Puedes ver que agregué Chatra, ConvertBox y Spotlight, entre otros, en la lista.

La función de retraso de la ejecución de JavaScript – WP Rocket, pero ¿cuánto ayudó WP Rocket?Bueno, hizo mucho más que el aplazamiento de JavaScript.Aumentó la página de inicio de la tribu SEO de una puntuación de 37% de Google PageSpeed ​​PageSpeed.Lo mejor es que la configuración del cohete WP duró solo unos cinco minutos. WP Rocket: resultados antes y después de que quiera enfatizar cuán importante fue el retraso de JavaScript en nuestro caso.Si deshabilito la función JavaScript, nuestro puntaje de velocidad de la página de Google ha caído al 50%.

Etapa #3: Actualizar webhost En diciembre de 2020, lanzamos nuestro nuevo sitio web construido a partir de oxígeno en un servidor web de Kinsta. Kinsta es conocida porque es una de las soluciones dedicadas de alojamiento de WordPress y, en general, encontré que el apoyo y la experiencia muy bueno. Sin embargo, unos meses más tarde, Cloudways, otra compañía de alojamiento web muy respetada, se me acercó para organizar un seminario web en la experiencia de la página. Acordé el seminario web y también acordé que probaré el rendimiento de la velocidad de nuestro sitio en sus servidores. Al principio, parecía que el rendimiento era más bajo que el que experimenté con Kinsta. Nuestro puntaje de Google PageSpeed ​​Mobil disminuyó del 97% al 94%. Pero algo no parecía estar bien. La pintura más grande llena de contenido y tiempo de interacción ha mejorado, pero el cambio de apariencia acumulativo ha aumentado de 0 a 0.781. Esto fue extraño porque ninguno de los CSS o HTML había cambiado. Entonces, después de algunos movimientos, volví a la sección “Optimización de archivos” del cohete WP y experimenté desactivando la “optimización de entrega de CSS”. Una eliminación rápida de caché más tarde, se solucionó el problema del CLS, y nuestro puntaje de la página de Google aumentó del 97% con Kinsta al 99% con Cloudways. Me sorprendió ver que el cambio del host web también mejoró, nuestra puntuación el más alto contenido de pintura De 2.4 a 2.1 segundos.
Si se pregunta qué paquete elegí con las nubes, fue una alta frecuencia de RAM de alta frecuencia que costó $ 26/mes, que era un poco más barato de lo que pagamos con Kinsta. Ahora, para comprender cómo mejorar de un puntaje móvil del 99% al 100%, me dirigí a la página de la computadora de puntaje del faro y jugué con sus puntajes. Estaba claro que los valores más altos de tiempo para pintar interactivos eran los enlaces débiles, Entonces me centraría en el impulso final. Etapa #4: Mejorar la pintura de contenido más grande La pintura de contenido más grande (LCP) es un valor de la página de Google que mide cuánto tiempo lleva hasta que el elemento de contenido más grande de una página web se cargue por completo. Ahora, ya hemos visto un buen progreso de LCP retrasando JavaScript y actualizando nuestro host web, pero ¿qué más podríamos hacer? Bueno, el elemento LCP para nuestra página inicial es una imagen. Es una imagen SVG para “Nuestro SEO de montaña”. Si su elemento LCP es una imagen, aquí hay algunas cosas que han funcionado para nosotros: 1. Prelabar la imagen de los recursos de precarga de LCP le permite cargar fuentes, imágenes, JavaScript y CSS arriba en el código fuente de una página web para que ellos para que ellos Verrará inmediatamente y con un retraso mínimo. WP Rocket ofrece funcionalidad para las fuentes de precarga, pero por lo que pude ver, no para imágenes. Ya había instalado el complemento de fragmentos de código gratuito en nuestro sitio, y esto me permitió crear una regla personalizada para que la página inicial precarga la imagen de SEO Mountain, utilizando el atributo ‘Link R = “Preload”:

Esto tuvo un impacto notable en mejorar la puntuación de la pintura de contenido más alta, pero se sintió como un poco de hack y no era escalable para cada página en su sitio 2. Haga compresión en el lado del servidor para la página de inicio de la tribu SEO, el formato de imagen de nuestro elemento LCP ya es bueno, porque los SVG generalmente tienen dimensiones muy pequeñas de los archivos para gráficos vectoriales.El tamaño de su archivo es de 13 kb.Cuando corrí nuestra página inicial a través de Gtmetrix y miré en el diagrama de cascada, me complació ver que la imagen de SEO Mountain era el primer archivo cargado.Esto sugiere que la precarga de la imagen funciona correctamente.

Sin embargo, el diagrama de la cascada GTMetrix, el tamaño del archivo de imagen que se descargó desde el servidor todavía era de 13 kb, lo que indica que el servidor web no lo comprimió. Esto era extraño, porque la compresión del servidor de WP Rocket estaba funcionando para las imágenes y el texto habituales en nuestro sitio. Envié un boleto de asistencia para el host web a Cloudways, quien confirmó que la compresión de SVG no está activada por sus servidores, sino que han estado activos. El resultado final fue que el archivo de 13 kb se redujo a solo 3.9 kb. Esto también ayudó a comprimir todas las otras imágenes SVG en nuestro sitio. Por ejemplo, nuestra imagen rápida Learn SEO tiene 205 kb sin compresión en el servidor y 42.7 kb con ella. 3. Desactivar la carga perezosa para la carga perezosa del elemento LCP es definitivamente algo bueno de activar en el cohete WP, ya que ayuda con muchas páginas valores de velocidad. ¿Pero la carga perezosa disminuye el puntaje de pintura de contenido más alto? No puedo decir con certeza, pero hay suficiente teoría sobre este tema para sugerir que podría. Entonces, en buena medida, deshabilité el SVG SVG SEO para ser perezoso en WP Rocket.
Lazyload Feature-WP Rocket nuevamente, no estoy seguro de desactivar la carga perezosa para su imagen. LCP es práctico para cada página de su sitio. Esta es una característica que WP Rocket podría considerar en el futuro.Entonces, precarga nuestra imagen LCP, asegurando la compresión en el lado del servidor y desactivando la carga perezosa para la imagen LCP ayudó a mejorar nuestra puntuación de la pintura de contenido más grande.¡Sí lo hizo!Hemos mejorado LCP de 2.1 segundos a 1.8 segundos.Y después de la prueba, parecía que precargar nuestra imagen LCP tuvo el mayor impacto en nuestra puntuación del mayor contenido de pintura.Esto no fue suficiente para aumentar nuestro puntaje de velocidad de la página de Google para dispositivos móviles hasta el 100%, pero estaba seguro de que me estaba acercando a lo que necesitaba.

Etapa #5: Mejorar el tiempo interactivo (TTI) no es una importancia vital básica para la web, pero contribuye a la puntuación general de la página de Google. Mide cuánto tiempo lleva una página para volverse completamente interactiva. No debe confundirse con el primer retraso de entrada (FID), que es un núcleo web vital. FID también mide la interactividad, pero se centra en la primera interacción de un usuario con una página, mientras se centra en el momento en que toda la página web se vuelve completamente interactiva. Ahora, hice un pequeño trabajo de detective usando la computadora de puntaje del faro y me di cuenta de que tenía que mejorar TTI de 2.5 segundos a menos de 2 segundos para tener la oportunidad de obtener una puntuación de velocidad al 100% de la página móvil. Pero, ¿cómo podría hacerlo? Bueno, hubo muchos intentos y errores de mi parte. La prueba clave que trajo dividendos fue la desactivación temporal de nuestro encabezado y sótano en nuestro sitio.

¡Calificación móvil de 100% de PageSpeed ​​Insights esto condujo a la puntuación evasiva de la velocidad de página de Google 100% para dispositivos móviles! Ha mejorado de 2.5 a 1.7 segundos. ¿Pero fue el encabezado o el sótano que causó el problema? Reinstalé el encabezado y el puntaje del 100% permaneció. Cuando volví a mirar el sótano, hay una considerable imagen SVG de una cadena de montaña y, curiosamente, era la única imagen de fondo en la página de inicio de SEO. Entonces, reinstalé el sótano, pero sin imagen, y la página mantuvo el puntaje de velocidad de página del 100% de Google para dispositivos móviles. Después de algunas investigaciones en la documentación de asistencia de cohetes WP, descubrí que las imágenes de fondo tenían que estar en un formato específico para ser perezoso. No soy un desarrollador web e intenté obtener el formato de imagen de fondo correcto. Entonces, para facilitar la vida, simplemente la agregué como una imagen estándar y, bueno, el cohete WP podría hacer que su carga de carga perezosa, y se mantuvo el puntaje de velocidad de la página móvil del 100% de SEO. Si tiene curiosidad, aquí está el video que muestra todos los pasos mencionados anteriormente: Actualice WP Rocket versión 3.9 desde la última vez que escribí esta publicación de blog, Google pasó de Lighthouse V7 a V8 para calcular sus puntajes de Google PageSpeed ​​Insights. Google apretó los pesos, lo que hace que sea más difícil obtener un puntaje del 100%. De hecho, si agrego manualmente mis puntajes anteriores a la computadora de puntaje del faro actual, mi resultado del 100% habría sido relegado al 99%.

Lighthouse V8 Pero no tenga miedo, sin hacer ningún cambio, simplemente cambiar a WP Rocket V 3.9 restauró mi 100% móvil perfecto y sin ninguna acción. Las mejoras fueron bastante increíbles. Desde el gráfico a continuación, puede ver que LCP mejoró con 22% y TTI con un cohete .WP de 29% v3.8 vs. V3.9: Las mejoras sorprendentes en el rendimiento no pueden poner su dedo mucho en lo que ha marcado la diferencia. Ya sea que activo la nueva función de eliminación de CSS no utilizada o no, todavía obtengo los mismos puntajes, por lo que debe haber otra magia detrás de escena. La conclusión es muy agradecida por cómo el constructor de oxígeno, el cohete WP y las nubes de nubes han ayudado a Tribi SEO a obtener un puntaje de velocidad de página del 100%. Pero para concluir las cosas, aquí están mis dos consejos más grandes sobre la velocidad de la página: 1) Preste especial atención a la optimización de los scripts tanto en el servidor como en el lado del navegador. WP Rocket es un excelente caché de WordPress para la optimización de JavaScript. 2) Manténgase curioso y la experiencia con muchas pruebas diferentes para ver qué ajustes tienen el mayor impacto en la mejora de los puntajes de velocidad de la página. Y debido a que todos los sitios web son diferentes, tengo curiosidad por saberlo. ¿Cuál es el mayor consejo para la velocidad de la página? Por favor, dígame en los comentarios a continuación.