Cómo llegar a 100 en Google PageSpeed ​​Insights (en WordPress)

¿No sería genial si hubiera una herramienta que te ayudara a hacer tu sitio web más rápido? Bueno, ¡hay! Google PageSpeed ​​Insights es el nombre, y es un servicio gratuito que está disponible para resolver los problemas de su sitio web lento. En este artículo, veremos qué es, cómo funciona y cómo puede alcanzar la esquiva puntuación de Google PageSpeed ​​Insights 100/100 en WordPress.

¿Qué es Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights es una herramienta en línea para medir la velocidad y la experiencia del usuario de su sitio web. Mide el tiempo de carga de un sitio en computadoras de escritorio y dispositivos móviles y muestra varias métricas sobre el rendimiento de un sitio. Si se considera que las métricas son subóptimas, la herramienta brinda sugerencias sobre cómo mejorarlas.

Simplemente vaya a Google PageSpeed ​​Insights, ingrese una URL y presione Analizar. Google juzga su sitio tanto en dispositivos móviles como en computadoras de escritorio. Es posible que descubras que obtienes una mejor puntuación en uno que en el otro.

Google solía otorgar una puntuación general de 100 a una página web, pero ya no lo hace.

En cambio, Google mide tres estadísticas que llama Core Web Vitals . Estos son:

• Pintura con contenido más grande (LCP) : qué tan rápido se carga el contenido principal del sitio. Debe ser de 2,5 segundos o menos para una buena experiencia de usuario.
• First Input Delay (FID) : qué tan receptivo es el sitio a la entrada del usuario. FID debe ser de 100 milisegundos o menos.
• Cambio de diseño acumulativo (CLS) : mide la estabilidad visual de una página web. Es preferible una puntuación CLS de 0,1 o menos.

Además, Google mide lo siguiente:

• First Contentful Paint (FCP) : el tiempo que tarda la página web en comenzar a mostrarse en la pantalla. Una buena puntuación de FCP es de 1,8 segundos o menos.
• Interacción a la siguiente pintura (INP) : mide qué tan receptiva es la página a las interacciones del usuario. Un sitio web realmente receptivo tiene un INP de 200 milisegundos o menos.
• Tiempo hasta el primer byte (TTFB) : el tiempo que tarda el primer byte de datos en enviarse después de una solicitud del servidor. Un TTFB de 0,8 segundos o menos es ideal.

Debajo de eso, en la sección Diagnosticar problemas de rendimiento, Google PageSpeed ​​Insights le brinda cuatro puntajes: rendimiento, accesibilidad, mejores prácticas y SEO. 90 o más es una buena puntuación, 50 a 89 indica que se puede mejorar y cualquier valor por debajo de 50 es malo.

Debajo están las Oportunidades y los Diagnósticos de Google. Estas son formas en las que puede mejorar indirectamente su puntuación de rendimiento. La métrica de rendimiento tiene la mayor influencia en la velocidad de su sitio.

Antes de analizar cómo mejorar el rendimiento de su sitio web, echemos un vistazo a por qué es importante la velocidad del sitio web.

¿Por qué es importante la velocidad del sitio web?

La velocidad del sitio web tiene un gran impacto en el comportamiento del usuario y del consumidor.

El tiempo promedio que se tarda en cargar completamente una página de destino móvil es de 22 segundos [1] .

La probabilidad de rebote aumenta un 32 % a medida que el tiempo de carga de la página pasa de 1 segundo a 3 segundos [2] .

El 53% de las visitas se abandonan si un sitio móvil tarda más de 3 segundos en cargarse [3] .

Obviamente, si ejecuta un sitio de comercio electrónico, un sitio lento da como resultado una disminución de las conversiones, y eso es algo que querrá abordar. La tasa de conversión disminuye con el tiempo que tarda un sitio en cargarse [4] :

• Las páginas que se cargaron en 2,4 segundos tuvieron una tasa de conversión del 1,9%
• A los 3,3 segundos, la tasa de conversión fue del 1,5%
• A los 4,2 segundos, la tasa de conversión fue inferior al 1%
• Con más de 5,7 segundos, la tasa de conversión fue del 0,6 %

Puntuación alta de PageSpeed ​​Insights frente a la velocidad real de la página

Google calcula la puntuación de PageSpeed ​​Insights a partir de datos de laboratorio (recopilados en condiciones controladas) y datos de campo (recopilados de usuarios reales en la naturaleza).

Para probar la velocidad real de su página, puede usar herramientas en línea como GTmetrix o la prueba de velocidad de Pingdom.

Con estas herramientas, puede probar su sitio en diferentes ubicaciones.

Puede ver en GTmetrix que el tiempo de carga de la página para un servidor de prueba en San Antonio, Texas, es de 666 ms, una puntuación muy buena.

En Hong Kong, el tiempo de carga de la página es un poco más largo: 1,4 s.

Pingdom también muestra un tiempo de carga rápido de 850 ms para una prueba en Washington DC, pero un tiempo de carga más lento de 1,06 s en Tokio, Japón.

La herramienta Uptrends le permite realizar pruebas en dispositivos móviles y de escritorio. Aquí está el resultado del sitio WP Shout de París, Francia en iPad Air: un tiempo de carga de 1,9 s:

Así que parece haber una correlación entre la puntuación de Google PageSpeed ​​Insights y la velocidad real de la página.

Cómo obtener la puntuación ideal de Google PageSpeed ​​Insights 100 en WordPress

Ahora que sabe por qué es importante una puntuación alta de Google PageSpeed ​​Insights, es hora de buscar formas de mejorarla.

Las formas de mejorar la puntuación de Google PageSpeed ​​Insights

1. Optimizar imágenes

Optimizar sus imágenes para la Web es una forma sencilla de mejorar su puntuación de rendimiento.

Necesitará un complemento de compresión de imágenes como Optimole.

Este complemento puede comprimir sus imágenes a un tamaño de archivo más pequeño para que se carguen más rápido. Puede usarlos para todas las cargas de imágenes nuevas, así como para las existentes. Lo bueno de Optimole es que también entregará sus imágenes a través de un CDN, lo que hace que la entrega sea aún más rápida.

También puede convertir tus imágenes al formato WebP, que tiene un tamaño más pequeño que los archivos JPG o PNG. Esto lo ayudará a pasar la recomendación Servir imágenes en formatos de próxima generación . Además, puede cambiar el tamaño de las imágenes más grandes que tenga estableciendo un ancho máximo para ellas.

Asegúrese de que sus imágenes tengan los atributos de ancho y alto especificados para satisfacer los elementos de imagen que no tienen una oportunidad explícita de ancho y alto .

El complemento Optimole también incluye carga diferida, que solo carga imágenes o videos cuando un usuario se desplaza hacia abajo. Esto ayuda con la oportunidad de Aplazar imágenes fuera de pantalla , que se muestra a continuación.

Otro método para reducir el tamaño del archivo de imagen es usar imágenes SVG. Los SVG son archivos vectoriales, por lo que se pueden volver a escalar fácilmente sin afectar el tamaño del archivo. No se admiten de forma nativa en WordPress, pero puede agregarlos a su biblioteca multimedia con un complemento como SVG Support o Safe SVG.

2. Evita un tamaño de DOM excesivo

¿Qué es el DOM? DOM significa Document Object Model y es una estructura en forma de árbol con todos los elementos HTML, atributos y texto de la página incluidos.

Un par de estrategias para disminuir el tamaño del DOM son dividir las páginas web largas en secciones más pequeñas y evitar ocultar los nodos DOM con la declaración {display:none;} en CSS.

Un factor que puede aumentar el tamaño del DOM es usar un creador de páginas. Los creadores de páginas tienden a aumentar la cantidad de elementos <div> en una página.

Si usa Elementor, desde la versión 3.0 se han eliminado algunos contenedores HTML, lo que ha disminuido el tamaño del DOM.

O podría pasar a usar Gutenberg en lugar de un creador de páginas, como lo ha hecho Chris Lema.

Puede encontrar más consejos para evitar un tamaño excesivo de DOM en esta publicación.

3. Optimiza JavaScript y CSS

Los archivos CSS y JS se pueden minimizar y comprimir para mejorar el rendimiento. La minificación elimina todos los espacios de un archivo CSS o JS, mientras que la compresión GZIP elimina los caracteres repetidos como {.

Los complementos de WordPress que le permiten minimizar CSS o JS incluyen Autoptimize (gratis) y WP Rocket (pago).

La minificación puede romper su sitio, por lo que los complementos que minimizan tienen una opción de exclusión de archivos de la minificación si tiene un problema.

WP Rocket también tiene la opción de combinar sus archivos CSS y JS en un solo archivo, lo que reduce las solicitudes. Sin embargo, no querrá hacer esto si su servidor web usa HTTP/2. Puede probar si su servidor ejecuta HTTP/2 para verificar primero.

Puede activar la compresión GZIP con la mayoría de los complementos de almacenamiento en caché. Si su servidor web es Apache o LiteSpeed, el complemento puede escribir en su archivo .htaccess directamente o proporcionar líneas para copiar y pegar en él. Si usa NGINX o IIS, Hummingbird también proporciona la configuración para habilitar la compresión en estos servidores.

Si hay algún CSS o JS en su sitio que no se usa, es hora de eliminarlo. Puede usar Chrome DevTools para encontrar CSS y JS no utilizados, que probablemente provengan de un complemento.

También puede usar CSS Saver de Rapidload para ver qué CSS puede perder de su sitio web:

4. Elimina los recursos que bloquean el renderizado

CSS y JS que bloquean el procesamiento son archivos que se marcan como bloqueadores de la primera pintura de su página web.

El complemento Autoptimize puede solucionar este problema y, como resultado, mejorar los puntajes de Primera pintura con contenido y Mayor pintura con contenido.

5. Reduzca el tiempo de respuesta inicial del servidor

El tiempo de respuesta del servidor depende de algunos factores: el tema y los complementos que usa, y el tipo de alojamiento web que tiene.

Considere eliminar cualquier exceso de complementos que no use o cambiar a un tema ligero, como Astra.

Para el alojamiento, recomendamos el alojamiento administrado de WordPress en lugar del alojamiento web compartido. Los hosts administrados de WordPress incluyen la optimización del servidor como parte del servicio.

6. Asegúrese de que el texto permanezca visible durante la carga de la fuente web. Asegúrese de que el texto permanezca visible durante la carga de la fuente web.

Si usa fuentes web, la recomendación de Google evitará que el texto de sus páginas sea invisible mientras se cargan.

La recomendación sugiere agregar font-display: swap; a su declaración @font-face en su hoja de estilo.

La siguiente captura de pantalla muestra cómo agregar esta propiedad mediante el complemento de limpieza de activos.

7. Mantenga el número de solicitudes bajo y los tamaños de transferencia pequeños

Google PageSpeed ​​Insights registra la cantidad de archivos solicitados por el servidor web y el tamaño de estos archivos.

Si tiene números grandes aquí, puede reducirlos de la siguiente manera:

• Optimización de sus imágenes y archivos multimedia. Se recomienda usar archivos de video en lugar de GIF animados.
• Optimizando tu CSS y JS
• Optimización de sus fuentes y scripts de terceros
• Reducir el tamaño del archivo HTML

8. Evita encadenar solicitudes críticas

Las solicitudes críticas son solicitudes que son esenciales para cargar la página. Por ejemplo, un logotipo podría ser una solicitud crítica.

Las cadenas largas y las cadenas que contienen grandes descargas se consideran malas para la velocidad de su sitio web. Impactan en la primera pintura con contenido y la pintura con contenido más grande.

Según Google, para evitar encadenar solicitudes críticas, debes:

• Minimiza el número de recursos críticos: elimínalos, aplaza su descarga, márcalos como asíncronos, etc.
• Optimice la cantidad de bytes críticos para reducir el tiempo de descarga (cantidad de viajes de ida y vuelta).
• Optimice el orden en que se cargan los recursos críticos restantes: descargue todos los activos críticos lo antes posible para acortar la longitud de la ruta crítica.

Puedes hacer esto por:

• Precargar solicitudes de claves, imágenes y fuentes mediante el uso de “link rel=”preload” en el HTML que hace referencia a ellas.
• Minimizando tu CSS y JavaScript.
• Elimine los recursos que bloquean el renderizado.

Puede usar un complemento como WP Rocket para realizar estas tareas por usted.

9. Evite las tareas largas del subproceso principal y minimice el trabajo del subproceso principal

Las tareas largas del subproceso principal son tareas de JavaScript (más de 50 ms) que retrasan el tiempo de interacción para el usuario.

Minimizar el trabajo del subproceso principal significa reducir el tiempo de análisis, compilación y ejecución de JS.

Puede reducir la duración y el tiempo de las tareas de JavaScript al:

• minimizando el uso de complementos inflados
• alojar sus fuentes y scripts de análisis localmente
• minificar o diferir JS y CSS
• Imágenes de lazy loading background

Consulte el siguiente artículo para obtener más consejos sobre cómo minimizar el trabajo del subproceso principal en WordPress.

10. Evite grandes cambios de diseñoEvite grandes cambios de diseño

Los cambios de diseño contribuyen a la métrica de cambio de diseño acumulativo y dan la impresión a los usuarios de que la página salta.

Puedes curar este problema al:

• Agregar dimensiones a sus medios
• Precargar sus fuentes
• Optimización de su contenido dinámico, por ejemplo, formularios de suscripción a boletines

Para obtener más información, lea esta guía sobre cómo corregir el cambio de diseño acumulativo en WordPress.

11. Reducir el impacto del código de terceros

Los scripts de terceros son aquellos alojados en otros lugares, como el seguimiento de Google Analytics o las incrustaciones de YouTube.

Siempre que sea posible, intente hospedar scripts localmente. No puede hacer esto con YouTube, pero puede alojar su código de análisis y fuentes localmente.

Puede usar el complemento Local Google Fonts para alojar Google Fonts en su propio servidor.

Google Analytics local para WordPress: el complemento de solicitudes externas de caché alojará su Google Analytics localmente.

12. Usa un CDN

Una red de entrega de contenido es una red remota de servidores que almacenan y entregan contenido web a los usuarios.

Una CDN puede mejorar la velocidad de su sitio almacenando en caché archivos estáticos (por ejemplo, HTML, CSS y JavaScript) y sirviéndolos desde una ubicación cercana a un usuario. Esto ayuda a reducir las puntuaciones de First Contentful Paint y Mayor Contentful Paint.

Usamos Cloudflare CDN en WP Shout. Puede comenzar a usarlo de forma gratuita.

Obtenga más información sobre por qué debería usar un CDN y las mejores opciones.

Conclusión sobre cómo llegar a la puntuación de Google PageSpeed ​​Insights 100

Hemos visto que hay bastantes factores en el juego que determinan la velocidad del sitio. Estos consejos te ayudarán a conseguir una puntuación perfecta.

Sin embargo, no debería obsesionarse demasiado con obtener 100 puntos: una puntuación de 90+ sigue siendo muy buena. Lea la publicación de David sobre la optimización del rendimiento del sitio para ver lo que hicimos para mejorar nuestros puntajes.