Cómo acercarse a Google PageSpeed ​​Insights y mejorar su puntaje de PageSpeed

Las recomendaciones de PageSpeed ​​Insights son un aspecto dulce de optimización del rendimiento web. Hay sugerencias realmente maravillosas para ayudar a mejorar el rendimiento de su sitio, sin embargo, un informe de PageSpeed ​​puede contener una serie de recomendaciones que pueden causar confusión y hacerle sentir preguntas como: ¿Qué significa recomendaciones de PageSpeed? ¿Cómo puedo arreglar las advertencias de PageSpeed? Después de probar el rendimiento de su sitio de WordPress, recibirá un informe de PageSpeed ​​Tsights que incluye una serie de recomendaciones y advertencias, divididas en dos categorías principales:
oportuno
Diagnóstico
La sección Oportunidades se centra en los valores de rendimiento que podrían mejorar el tiempo de carga de la página. La sección de diagnóstico, por otro lado, se centra más en las mejores prácticas para el desarrollo web que deben implementarse en la página analizada. En esta guía, presentaremos las recomendaciones más comunes de la comprensión de la velocidad de las páginas: las explicaremos en inglés simple y luego veremos cómo remediarlas. Tenga en cuenta que el instrumento aborda las recomendaciones para mejorar los valores, como la pintura de contenido más grande, el cambio de apariencia acumulativo y el primer retraso de entrada.
¡Vamos a empezar! PageSpeed ​​Insights Recomendaciones: Oportunidades Oportunidades, PageSpeed ​​Insights quiere brindarle consejos sobre valores de rendimiento que podrían ayudar a la página a cargarse más rápido. Si desea obtener un puntaje del 100% en la prueba de velocidad de página de Google, debe prestar atención a estas recomendaciones. Cada recomendación se acompaña de los ahorros de tiempo estimados que podría ganar implementando el remedio sugerido. Ejemplo de la sección de opción: la eliminación de CSS no utilizada podría hacer que esta página gane 0.45 segundos de tiempo de carga. Veamos cuáles son las recomendaciones de PSI más comunes en esta sección y cómo abordarlas.

Eliminar los recursos que bloquean la representación
Eliminar CSS no utilizado
Reducir el tiempo de respuesta del servidor
Minimiza CSS y JavaScript
Redireccionamientos de múltiples páginas
Activar la compresión de texto
Preconate a ti mismo en los orígenes requeridos
Solicitudes de precarga de clave
Posponer las imágenes fuera de la pantalla
El tamaño correcto de las imágenes
Codificar las imágenes de manera efectiva y optimizar las imágenes
Servir imágenes en el formato de próxima generación
Elimine los recursos que bloquean la representación con esta recomendación, Google quiere proporcionar archivos críticos en línea o posponer archivos JS y CSS que interfieren con el contenido anterior de sus páginas web.
Por encima del contenido del pliegue están el contenido que sus usuarios ven tan pronto como abren la página, antes de comenzar el desplazamiento. Para comprender lo que PageSpeed ​​significa cuando requiere que elimine los recursos que bloquean la representación (ya sea un script o una hoja de estilo), necesitamos entender qué es un recurso que bloquea la representación. Desde la documentación del cohete WP: antes de que el navegador pueda mostrar una página web, debe recuperar HTML. Durante este proceso, cada vez que el navegador cumple con un elemento que se refiere a un script o una hoja de estilo, debe detenerse, solicitar el archivo, esperar para descargar desde el servidor y ejecutarlo antes de que pueda continuar el análisis HTML. Con la mayoría de los temas y complementos de WordPress que cobran no solo uno, sino también más archivos CSS y/o JavaScript, este proceso puede retrasar significativamente el tiempo para la primera representación de la página. Mientras que algunos recursos CSS y JS deben descargarse y procesarse Antes de mostrar algo en la página (son los llamados recursos críticos), otros pueden posponerse y cargarse la segunda vez sin ningún problema o pérdida de experiencia del usuario. Retrasar la carga de recursos no críticos y hacerlos cargarse después de que el navegador haya hecho que la página sea una buena práctica para ahorrar unos pocos (molinos) segundos durante el tiempo de carga. Entonces, ¿cómo posponer la carga JS/CSS que bloquea el rendimiento? El enfoque manual de este cambio podría ser un poco difícil, ya que implica cavar y editar el código. Si prefiere continuar programáticamente, aquí hay un ejemplo de cómo eliminar a JavaScript que bloquea la representación y uno sobre la eliminación del CSS que bloquea la representación.
¡La solución más simple es usar un complemento como WP Rocket! Nuestro complemento incluye dos opciones que lo ayudarán a arreglar la recomendación de PSI: optimizar la entrega de CSS
Cargando JavaScript pospuesto
Vale la pena señalar que a veces puede ser muy difícil (si no imposible) eliminar por completo todos los CS y JS que bloquean el rendimiento. La posibilidad de obtener este resultado dependerá en gran medida de cómo se usan el tema y los complementos en su sitio de WordPress. Si no ha codificado su sitio desde cero y confía en un tema y en los complementos que otros desarrolladores han escrito, simplemente acepta que no puede tener control del 100% sobre ellos.
Está bien no posponer todo su bloqueo de resurrección CSS y JS, porque a veces este proceso puede conducir a una página rota (¡y esto es mucho peor que una “puntuación roja” de Google PageSpeed ​​Insight!). Elimine CSS no utilizado que elimine las reglas no utilizadas de las hojas de estilo Reduzca la carga innecesaria del sitio. Esto es lo que llamamos CSS no utilizado. Por ejemplo, piense en las hojas de estilo que se pueden necesitar después de cargar la página, es decir, el CSS de una ventana modal que aparece solo después de hacer clic en un botón en particular. Otro caso típico de CSS no utilizado es cuando se usa temas y complementos de WordPress pre-construidos: generalmente contienen más código del necesario para cada página, porque el autor no puede predecir cómo el usuario construirá su sitio.
Entonces, ¿cómo eliminar CSS no utilizado? Es muy difícil automatizar esta tarea con precisión y aún más para eliminar el CSS no utilizado. Chris Coyer, autor del libro CSS Tricks, explica todas las razones para ello. Con WP Rocket, puede usar la opción Optimizar la opción de entrega de CSS, que pospuso la carga de CSS, pero nuestro complemento no puede eliminar las partes no utilizadas. Además, desde WP Rocket 3.9 puede eliminar directamente el CSS sin usar: eliminar el cohete CSS-WP no utilizado. Reduzca el tiempo de respuesta del servidor (TTFB) Si su servidor responde lentamente a las solicitudes de los usuarios, la experiencia general de su usuario se verá afectada.
Como ya hemos mencionado en nuestra guía sobre la optimización de la velocidad de la página SpeedPress, un servidor rápido es un elemento fundamental del rendimiento del sitio. Cuando Google PageSpeed ​​le pide que reduzca el tiempo de respuesta del servidor, prácticamente se refiere al indicador conocido como Time to First Byte. Ya hemos abordado este tema con nuestra guía: ¡Cómo reducir el tiempo a los primeros tiempos de respuesta de byte y servidor! Minimizar CSS y JavaScript Estas dos recomendaciones están relacionadas con una de las técnicas de optimización de código más populares: la minificación. La miniificación es la técnica que hace que las páginas HTML, los guiones CSS y JS sean menos legibles (por supuesto para las personas), ¡pero más rápido de cargar!
Este método elimina todos los personajes, merkuctions, espacios y comentarios innecesarios que los desarrolladores tienden a agregar a las páginas web y los archivos de script. De hecho, los desarrolladores pueden necesitar comentarios, marcas y espacios para hacer que las páginas y los guiones sean más legibles durante su proceso de desarrollo. Pero cuando su obra maestra finaliza y el sitio web está en línea, todos estos elementos adicionales se vuelven redundantes: aumentan el tráfico de la red y cargan el ancho de banda de las solicitudes de red. Luego, la miniificación es útil: debilita el código, por lo que el usuario final lo recibirá más rápido y el tiempo de carga general mejorará. Entonces, ¿cómo puede reducir los archivos CSS y JS? Hay dos formas de reducir CSS y JavaScript: Manual
Automáticamente con un complemento

Para saber cómo reducir manualmente sus archivos, eche un vistazo a nuestra guía: las mejores herramientas de minimización CSS y JS. Para cuidar automáticamente la minería y olvidarse de los ajustes manuales, puede usar un complemento de WordPress. Hay muchos complementos mineros efectivos en el mercado, pero nuevamente WP Rocket podría ser la solución perfecta para usted. ? Nuestro complemento incluye tanto CSS como JS Mini -y -JS Mini -CSS y JS: Reducir y combinar archivos CSS
Reducir y combinar archivos js
Como ya se mencionó para la nota sobre la eliminación de los recursos que bloquean la representación, la minimización y la combinación son características avanzadas que a veces pueden destruir la apariencia de sus páginas. Siempre depende del código del tema y otros complementos que use: algunos archivos JS o CSS Sea incompatible con el minimento, por lo que debe mantener los ojos abiertos cuando implementa esta técnica. Consulte nuestra documentación para comprender cómo remediar los posibles problemas de minimización/combinación. Redirecciones de varias páginas 301 redireccionamientos son realmente esenciales para notificar a su navegador que una solicitud HTTP proviene de una ubicación de origen diferente y evitando 404 errores; Pero cuando se reúnen las redireccionamientos, tienden a frenar sus páginas. Las ideas de PageSpeed ​​consideran las redireccionamientos como un problema cuando una página contiene más de dos de ellas. La solución ideal, por supuesto, sería actualizar las conexiones originales con los recursos redirigidos. Active la compresión de texto con esta recomendación, PageSpeed ​​Insights le pide que active la compresión de GZIP. Como explica Google: la compresión de texto minimiza la dimensión de las respuestas de red que incluyen contenido de texto. Descarga de menos bytes significa una carga de página más rápida. La compresión de GZIP es un método muy popular y efectivo para acelerar su sitio de WordPress, ya que reduce las páginas totales y mejora el tiempo para la primera pintura. ¡Todo lo que necesita saber sobre la implementación de la compresión de GZIP en su sitio de WordPress está incluido en nuestra guía!
Preconte en las orignas requeridas Esta advertencia de la velocidad de la página aparece cada vez que tiene contenido de terceros en su sitio (por ejemplo, fuentes cargadas de Google o un video en YouTube) y no tome sus resoluciones DNS apropiadas. ¿Qué es la precarga de DNS? Aquí hay una definición de nuestra guía sobre las diferencias entre precarga, precarga y preinterreno: con la adquisición, puede decirle al navegador que se haga cargo de los recursos que cree que el usuario puede necesitar más tarde, como parte de una futura navegación o interacciones, si El usuario toma la acción sobre quién lo está esperando. Estos recursos se tomarán con la prioridad más baja en el navegador, cuando la página actual termina para cargarse y hay un ancho de cinta disponible. En particular, con la precarga de DNS, puede decirle al navegador que realice búsquedas de DNS en una página mientras los usuarios la navegan: cuando se solicitan recursos externos, la resolución DNS ya se habría procesado, reduciendo la latencia. Las solicitudes de DNS precargables pueden darle un tiempo de impulso menor y puede aplicarlo fácilmente (y hacer que PageSpeed ​​sea feliz) con WP Rocket:
Solicitudes de precarga de clave Esta advertencia se refiere a la estrategia de optimización de la ruta de representación crítica (PCR). El CRP es útil para priorizar algunos recursos antes que otros y decidir su orden de carga. De esta manera, el navegador puede cargar una página más rápida. Para remediar esta recomendación de PSI, debe declarar enlaces de precarga en HTML, para que el navegador sepa que debe descargar recursos críticos lo antes posible. WP Rocket le permite ocuparse de esta advertencia solo para archivos CSS: activar la opción Optimizar la opción de entrega de CSS, WP Rocket agrega el atributo rl = “precarga” a CSS. Más información sobre cómo WP Rocket gestiona CSS Critic, aquí. Las imágenes posponidas fuera de la pantalla son las imágenes de pantalla fuera de la pantalla que no aparecen cuando el usuario abre una página. Son las llamadas imágenes a continuación. Debido a que los usuarios no pueden verlos al cargar una página, no tiene sentido descargarlos como parte del proceso de carga. Con esta recomendación, PageSpeed ​​le pide que posponga las imágenes fuera de pantalla en una etapa posterior, a saber, cuando el usuario ejecuta la página y solicita el contenido debajo del pliegue. Para posponer las imágenes fuera de la pantalla, puede cargarlas LazyLoad. Lazyload es una técnica que le permite posponer imágenes de carga (para obtener más información sobre LazyLoad en WordPress y cómo aplicarla a sus imágenes, lea nuestra guía). Puede cargar manualmente archivos de imagen o usar un complemento. Si opta por esta segunda opción, tiene dos excelentes alternativas:
Nuestro complemento autónomo lazyload gratis:

WP Rocket, que incluye la opción de imágenes perezosas perezosamente: la elección de una de las dos, se satisfarán las ideas de PageSpeed ​​y debería reparar la advertencia sobre las imágenes sin pantalla no necesarias. Tenga en cuenta que, en términos de Lazylad del cohete WP, no todas las imágenes pueden ser perezosas en este momento, por ejemplo, las imágenes de fondo que se cargan desde las hojas de estilo. Para averiguar dónde se aplican estas excepciones, eche un vistazo a nuestra documentación. La dimensión correcta de las imágenes El control del arte de la optimización de la imagen es algo que puede aprender fácilmente. ¡Le permitirá obtener una gran mejora de la velocidad de página, y Google PageSpeed ​​definitivamente notará que lo está recompensando por ello! Para disminuir y optimizar las imágenes correctamente, debe seguir algunos pasos que hemos descrito en nuestra guía sobre cómo comprimir sus imágenes y reducir el tamaño del archivo. Imágenes codificadas de manera eficiente y optimizar la codificación de imágenes de imágenes es el proceso de rescate de imágenes en un formato más eficiente y comprimido. La optimización de la imagen es el conjunto de medidas necesarias para que las imágenes se carguen más rápido, como:

Elija el formato de imagen correcto
Reduce el tamaño de su archivo
Comprimirlos cuidadosamente


Para cuidar su estrategia de optimización de imágenes con una herramienta única y eficiente, puede usar nuestra herramienta gratuita de Imagify. Le ayudará a trabajar en sus archivos y a corregir la mayoría de las advertencias de PageSpeed ​​en las imágenes. Servir imágenes en formato de próxima generación con esta recomendación, PageSpeed ​​le pide que use formatos de imagen más modernos, como JPEG 2000, JPEG XR y WebP. Estos formatos de imagen son superiores a sus hermanos “mayores”, JPEG y imágenes PNG, en términos de calidad y características de compresión: pueden cargar más rápido y consumir datos menos móviles. Nuestro complemento de optimización de imágenes Imagify puede convertir imágenes en formatos webp, ¡así que no dude en aprovecharlo! WP Rocket también proporcionará soporte WebP muy pronto (se agregará a una de las siguientes versiones principales). Como puede ver, WP Rocket es la forma más sencilla de abordar las ideas más importantes de la energía de las páginas en unos pocos clics. ¡Pasemos a la siguiente parte! Recomendaciones PageSpeed ​​Insights: Diagnóstico Todas las recomendaciones incluidas en la sección de diagnóstico se centran en el rendimiento y las mejores prácticas que pueden ayudar a mejorarlo.

Veamos cuáles son las recomendaciones de PSI más comunes en esta sección y qué puede hacer para remediarlas.
Asegúrese de que el texto permanezca visible durante la carga de fuente web

Minimizar la actividad principal y reducir el tiempo de ejecución de JavaScript

Servir activos estáticos con una política de caché efectiva
Evite enormes cargas de red
Evite el exceso de tamaño DOM
Minimice la profundidad de las solicitudes críticas, así como el texto, permanece visible durante la carga de la fuente web Esta advertencia de PSI se refiere a la carga de fuentes web, que a menudo son archivos grandes que ralentizan las páginas. Algunos navegadores, mientras esperan la carga de la fuente, ocultan el texto en la página, produciendo el efecto conocido como “Flash invisible de texto”. Pero esta solución no facilita la experiencia del usuario: la solución ideal, en este caso, se le permitiría ver el texto inmediatamente utilizando una fuente del sistema. Esto producirá el llamado efecto de “flash sin estilo”: pero de forma predeterminada en una fuente del sistema hará que el navegador ahorre un tiempo de carga importante, ya que usará una fuente que ya tiene en el sistema. Una vez que la fuente web que haya elegido inicialmente se descargará por completo, será visible para el usuario; Nadie tendrá que esperar para mirar un texto invisible en la página, si opta por una solución de “flash sin estilo”. WP Rocket 3.3.5 ha introducido soporte para Google Fonts utilizando la pantalla de fuentes “Cambiar”: esto significa que si usa Google Fonts, WP Rocket lo ayudará a cuidar el efecto “Flash sin estilo”.
La combinación de Google Fonts en realidad se activa en la activación. Para obtener más información sobre cómo optimizar las fuentes web, puede leer nuestra guía. Minimice la actividad principal y reduzca el tiempo de ejecución de JavaScript Estas recomendaciones tienen que ver con el uso de scripts JS y su impacto en el rendimiento de carga de sus páginas. “Leer” y “Significado” por el navegador (Parsat y Compilado) y luego está ejecutado en el navegador. Cuanto más js en su página, más el navegador necesitará más tiempo para analizar, compilar y ejecutar. Según la nota sobre “minimizar los trabajos en el hilo principal”, esto lo define a la página de la página: considere la reducción del tiempo dedicado a la compilación y la ejecución de los JS. Puede encontrar que proporcionar cargas útiles más bajas lo ayuda a este respecto. Para reducir el tiempo de ejecución de JS y minimizar el trabajo con el hilo principal, debe hacer esto eliminar a JavaScript sin usar. Puede usar ciertos complementos que pueden ayudarlo a eliminar JS no deseado de sus páginas como: organizador de complementos
Activos de limpieza

Complemento gonzales
Úselos con cuidado y consulte a sus desarrolladores y/o documentación antes de usarlos. Servir activos estáticos con una política de caché efectiva Una política de caché es un conjunto de pasos que deben implementarse para garantizar que sus páginas se almacenen en caché y se carguen rápidamente. Como ya hemos visto en nuestra guía sobre el tiempo de carga y el almacenamiento en caché, hay varias capas de caché disponibles que debe auditar y aplicar, siempre que sea posible, a su sitio: almacenamiento en el caché de la página, el almacenamiento en el servidor, El almacenamiento de caché y el almacenamiento del navegador en caché. Cuando Google PageSpeed ​​solicita transmitir materiales estáticos con un caché eficiente, se refiere al caché del navegador. Para averiguar cómo abordar esta advertencia, puede leer nuestra guía sobre cómo corregir el caché estático en PageSpeed. Si está utilizando WP Rocket, no tiene que preocuparse por esto: nuestro complemento aplica automáticamente la sede de EXPIE en el archivo HtAccess. Si usa un servidor NGINX, no tendrá el archivo htaccess, por lo que no se aplicarán la sede mencionada anteriormente. Sin embargo, WP Rocket funciona desde la caja en los servidores NGINX:
Aquí puede encontrar más información al respecto.Evite grandes cargas de red útiles aquí, PageSpeed ​​le pide que reduzca la cantidad de solicitudes de red.Las solicitudes de red tienen un alto impacto en la velocidad de carga de la página, pero también afectan la experiencia del usuario, la tasa de rechazo y el SEO.Para remediar esta advertencia y reducir la cantidad de solicitudes HTTP en su sitio, puede seguir nuestra guía.Evite los elementos DOM DOM excesivos son todas las etiquetas en una página (como DIV, HTML, cuerpo, etc.).Según la Guía de desarrolladores web de Google, un árbol DOM óptimo incluye estas características: tiene menos de 1500 nudos en total.
Tiene una profundidad máxima de 32 nudos.
No tiene nudos de padres con más de 60 nudos para niños.
En general, para reducir una dimensión DOM excesiva, debe revisar los temas y complementos que usa: puede hacerlo dirigiendo directamente el diseño de su sitio o solicitando ayuda de un desarrollador. Minimice la profundidad de las solicitudes críticas Esta nota se refiere a las cadenas de solicitudes críticas, es decir, la lista de recursos que se cargan con una alta prioridad en una página. Esta no es una auditoría que deba “aprobar” o “fallar”, pero si lo aborda, podrá mejorar el rendimiento de la carga de la página en sus ideas de su páginas. La longitud de las cadenas, la reducción de la dimensión de Descarga de los recursos o el aplazamiento de la descarga de recursos innecesarios para mejorar la carga de la página ”. Con WP Rocket, puede mejorar el factor minimizando la demanda crítica al eliminar CSS/JS que bloquea la representación; Esto significa activar las opciones que ya hemos presentado anteriormente: optimizar la entrega de CSS
Cargando JavaScript pospuesto
Combinar archivos JavaScript

En la conclusión de este artículo, ha aprendido cómo interpretar y abordar las ideas de PageSpeed ​​recomendadas en las secciones y oportunidades de diagnóstico. Al aprender a interpretar las advertencias, podrá auditar el estado de su sitio web y comprender cómo mejorar la puntuación de su página de páginas y Web Web Vitals. Ahorre tiempo y deje que WP Rocket haga su trabajo para su cohete WP aplicará automáticamente el 80% de las mejores prácticas de rendimiento web. Ni siquiera tiene que lograr ninguna configuración. Inmediatamente verá una mejora en su velocidad y su puntaje PageSpeed: no se requiere conocimiento técnico, ¡le prometemos! Ahora es el momento de seguir adelante y aprender sobre otros aspectos de estas pruebas fundamentales de rendimiento web: ¿Por qué la puntuación de PageSpeed ​​Insights es importante y es confiable?
Gtmetrix actualiza su algoritmo para usar valores de faro de Google