Cómo aumentar el puntaje de Google PageSpeed ​​Insights para WordPress

La velocidad de carga de un sitio web puede hacer o deshacer su éxito. Si compara dos páginas idénticas, la página más rápida recibe un trato preferencial por parte de motores de búsqueda como Google. Afortunadamente, existe una manera de probar la velocidad de su sitio web y obtener consejos para mejorarla. Se llama Google PageSpeed ​​Insights. Esto es lo que es y cómo puede utilizarlo.

¿Qué es Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights (PSI) es una herramienta online gratuita desarrollada por Google que analiza la velocidad y diversos elementos de la experiencia del usuario de las páginas web en dispositivos móviles y de escritorio. Analiza la página y brinda puntuaciones y recomendaciones para ayudar a los propietarios de sitios web a mejorar el rendimiento de su sitio. Cualquiera puede generar un informe en cualquier página web; es una excelente manera de ver qué tan bien se están ejecutando sus sitios y los de la competencia.

Aquí hay una demostración en vivo de un sitio web creado con nuestro tema Divi WordPress donde hace clic en un botón para ejecutar un informe rápido de PageSpeed ​​si aún no lo ha hecho.

El equipo de Chrome de Google presentó Core Web Vitals (CWV) en 2020 para estandarizar las métricas para determinar la buena velocidad del sitio y la experiencia del usuario. PageSpeed ​​Insights es simplemente la herramienta que analiza e informa sobre esas métricas. Por eso es crucial que los propietarios de sitios comprendan las métricas de CWV y cómo afectan la velocidad de SEO de su página.

Core Web Vitals: ¿Qué significan y miden esas siglas?

Su puntuación de PageSpeed ​​se mide a través de cinco métricas principales (aunque sólo tres se consideran realmente "principales", y las otras dos se consideran "notables").

A continuación se ofrece una explicación rápida de las siglas LCP, INP, CLS, FCP y TTFB:

• LCP (Largest Contentful Paint) mide cuánto tiempo tarda el elemento de contenido más grande (imagen, video, bloque de texto) visible dentro de la ventana gráfica en representarse en la pantalla. Representa la rapidez con la que el contenido principal de la página es visible para el usuario. Apunte a 2,5 segundos o menos para una buena experiencia de usuario.
• INP (Interaction to Next Paint) mide la capacidad de respuesta de una página a las interacciones del usuario. Analiza la latencia de todas las interacciones de clic, toque y teclado durante la visita de un usuario a una página e informa un valor único que representa la latencia típica de la página. Un buen INP es de 200 milisegundos o menos. Esto solía llamarse retardo de entrada .
• CLS (Cumulative Layout Shift) mide la estabilidad visual de una página. Cuantifica cuánto movimiento de contenido visible se produce en la ventana gráfica. Los cambios inesperados en el diseño pueden frustrar a los usuarios (por ejemplo, si un botón se mueve cuando intentan hacer clic en él). Apunte a una puntuación CLS de 0,1 o menos.
• FCP (First Contentful Paint) mide el tiempo desde que la página comienza a cargarse hasta que cualquier contenido (texto, imagen, etc.) se pinta por primera vez en la pantalla. Indica la rapidez con la que el usuario recibe información visual de que la página se está cargando. Apunta a 1,8 segundos o menos.
• TTFB (Time to First Byte) mide el tiempo que tarda el navegador en recibir el primer byte de datos del servidor después de solicitar una página. Es una métrica clave para la capacidad de respuesta del servidor. Apunta a 800 milisegundos o menos.

¿Por qué priorizar la velocidad de la página móvil?

Con la llegada de los teléfonos inteligentes y el hecho de que la mayoría de las búsquedas ahora se realizan desde dispositivos móviles, Google y otros motores de búsqueda han comenzado a priorizar la experiencia móvil de los sitios web y las páginas web. Entonces, cuando ejecutes una evaluación de PageSpeed ​​Insight, verás que te otorga una puntuación tanto para escritorio como para dispositivos móviles.

En mi experiencia, hoy en día obtener una puntuación de 95 o más en una computadora de escritorio es muy fácil, pero mucho más difícil con una versión móvil. Esto se debe a varias razones:

1. Muchos diseñadores web todavía diseñan sus sitios web principalmente desde la experiencia de escritorio. El diseño móvil es una ocurrencia de último momento.
2. La prueba de velocidad móvil asume velocidades de Internet utilizando datos móviles, mientras que las computadoras de escritorio tienden a usar conexiones de Internet domésticas o comerciales estables y de alta velocidad. Debido a esta disparidad, las experiencias móviles tienden a ser más lentas.
3. Según el punto 1 anterior, los diseñadores web también optimizan sus sitios web teniendo en cuenta las computadoras de escritorio, lo que significa que muchas de las mejores optimizaciones no están adaptadas a la experiencia móvil.

Teniendo esto en cuenta, asegúrese de que su experiencia móvil sea al menos tan buena como la de su escritorio. Pero de cualquier manera, tanto las experiencias de escritorio como las de dispositivos móviles se juzgan según los mismos criterios y usted debe conocer bien esas métricas.

Cómo mejorar Core Web Vitals para obtener mejores puntuaciones de PageSpeed

Bien, hay muchas cosas que puedes hacer , pero ayuda a reducirlas. He recopilado sugerencias priorizadas y prácticas para que los propietarios de sitios mejoren cada uno de los Core Web Vitals. Encontrarás mis recomendaciones según los problemas a los que te enfrentes.

LCP (pintura con contenido más grande)

Para LCP, querrá centrarse en el "elemento más grande" como se describe en el informe. Con una mala puntuación en esto, los usuarios ven el contenido de la página menos importante antes de ver el contenido principal.

Concéntrate en estas tres cosas:

1. Optimice el elemento LCP: identifique el elemento más grande dentro de la ventana gráfica inicial (a menudo una imagen o texto destacado). Optimice este elemento primero:
   • Imágenes: comprima imágenes utilizando formatos modernos como WebP. Utilice el tamaño adecuado (no publique imágenes más grandes de lo necesario). Utilice los atributos srcset y size para imágenes responsivas. Considere utilizar una CDN para la entrega de imágenes.
   • Bloques de texto: asegúrese de que las fuentes web se carguen de manera eficiente (usando font-display: el intercambio es bueno). Evite grandes bloques de JavaScript o CSS que bloqueen la representación y que retrasen la representación del texto.
2. Optimice el contenido de la mitad superior de la página: priorice la carga rápida de contenido en la mitad superior de la página (la parte de la página visible sin desplazamiento). Aplazar la carga de recursos no críticos en la mitad inferior de la página.
3. Mejorar los tiempos de respuesta del servidor (TTFB): un TTFB más rápido impacta directamente en LCP. Vea las sugerencias de TTFB a continuación.

INP (Interacción con la siguiente pintura)

INP se centra en cómo responde su página a la interacción del usuario (por ejemplo, clics en botones). Es una de las métricas más centradas en los desarrolladores y puede ser mucho más difícil de resolver para quienes no son desarrolladores.

Pero debes concentrarte en estas tareas si crees que estás preparado para ello:

1. Minimizar tareas largas : identifique y desglose las tareas de JavaScript de larga duración (cualquier cosa que bloquee el hilo principal durante 50 ms o más). Utilice la división de código y posponga JavaScript no crítico.
2. Optimice los controladores de eventos : asegúrese de que los controladores de eventos (como los eventos de clic o toque) sean eficientes y no causen grandes retrasos. Evite cálculos complejos o manipulaciones DOM dentro de los controladores de eventos.
3. Evite la alteración del diseño : evite forzar diseños sincrónicos (donde JavaScript obliga al navegador a recalcular el diseño varias veces en un período corto). Esto ocurre a menudo al leer y luego inmediatamente al escribir estilos.

CLS (cambio de diseño acumulativo)

Para mejorar CLS, trabaje duro para evitar cambios inesperados en el diseño. Cuando esto sucede, los elementos y estilos importantes se cargan en momentos inesperados, lo que hace que las cosas salten en la pantalla.

Intente concentrarse en estas cosas:

1. Establezca ancho y alto explícitos en imágenes y videos : incluya siempre atributos de ancho y alto (o use la relación de aspecto CSS) para imágenes y videos para reservarles espacio durante la carga. Esto evita que el contenido salte.
2. Reserve espacio para anuncios y contenido incrustado : si utiliza anuncios o elementos incrustados que pueden cambiar de tamaño, reserve suficiente espacio para ellos mediante marcadores de posición o cargadores de esqueleto.
3. Evite insertar contenido encima del contenido existente : no inyecte contenido dinámicamente encima del contenido existente a menos que sea en respuesta a la interacción del usuario.

FCP (Primera pintura con contenido)

Las malas puntuaciones de FCP ocurren cuando el contenido no es visible muy rápidamente. Esto da la impresión de que es posible que la página no se esté cargando.

Concéntrese en estos elementos para abordar los problemas del FCP:

1. Elimine los recursos que bloquean el procesamiento : minimice o elimine CSS y JavaScript que bloquean el procesamiento. Minimiza y comprime archivos CSS y JavaScript. CSS crítico en línea (el CSS necesario para representar contenido en la mitad superior de la página) y aplazar CSS no crítico. Aplazar JavaScript no crítico utilizando los atributos aplazar o asíncrono.
2. Optimice el tiempo de respuesta del servidor : un TTFB más rápido mejora directamente el FCP. Vea las sugerencias de TTFB a continuación.
3. Optimice el orden de carga de recursos : priorice la carga temprana de recursos críticos (como CSS y fuentes necesarias para el contenido de la mitad superior de la página).

TTFB (tiempo hasta el primer byte)

De manera similar a lo anterior, los usuarios están esperando a que se cargue una página. Sin embargo, TTFB tiene más que ver con la configuración de su servidor que con qué tan bien se carga una página individual. TTFB mostraría la capacidad de respuesta de su servidor mostrando cualquier página de su sitio.

Profundice realmente en estos elementos para abordar los tiempos de respuesta del servidor:

1. Optimice el rendimiento del servidor : este suele ser el factor más impactante.
   1. Actualizar su plan de hosting a un servidor más potente (o actualizar a un proveedor de hosting más potente).
   2. Usar una red de entrega de contenido (CDN) para almacenar en caché los activos estáticos más cerca de los usuarios.
   3. Optimización del código del lado del servidor y consultas de bases de datos.
2. Utilice el almacenamiento en caché : implemente mecanismos de almacenamiento en caché adecuados (GZIP, almacenamiento en caché del navegador, almacenamiento en caché del lado del servidor, almacenamiento en caché de objetos) para reducir la carga en su servidor.
3. Utilice un proveedor de DNS con tiempos de búsqueda rápidos : un proveedor de DNS rápido puede reducir el tiempo que lleva resolver su nombre de dominio en una dirección IP.

Cómo arreglar la velocidad de la página para el sitio web de WordPress

WordPress es una plataforma excelente que le permite optimizar su sitio de la forma que considere necesaria. Los creadores de sitios web como Wix y Squarespace se encargan de esto por usted, pero esos costos están incluidos en su suscripción. Usted está atrapado si deciden acelerar el rendimiento o aumentar los precios. Si eso sucede con un proveedor de alojamiento o un complemento (cuando usa WordPress), puede cambiar fácilmente de proveedor para conservar el rendimiento al precio deseado.

Estas son las plataformas, servicios y complementos básicos que le recomiendo que utilice para mejorar Core Web Vitals, como se muestra en su informe de PageSpeed ​​Insights. Los CWV se interpenetran, por lo que a veces arreglar uno mejora los demás. Notarás que algunas de nuestras recomendaciones pueden ayudar a múltiples métricas.

Cómo mejorar TTFB

TTFB mide la capacidad de respuesta de su servidor. Un TTFB más rápido significa que su sitio web comienza a cargarse antes. Para solucionar este problema, debe trabajar un poco en el lado del servidor.

Alojamiento SiteGround

Un alojamiento confiable con configuraciones de servidor optimizadas es crucial para un TTFB rápido. SiteGround ofrece un rendimiento excelente y funciones optimizadas para WordPress.

Obtenga SiteGround

CDN de nube

Una red de entrega de contenido (CDN) como Cloudflare almacena en caché los activos estáticos de su sitio web en servidores de todo el mundo, lo que reduce la distancia que recorren los datos y mejora el TTFB para los usuarios de todo el mundo. La versión gratuita ofrece importantes beneficios.

Obtenga Cloudflare

Cómo mejorar FCP, CLS y LCP

Estos CWV están fuertemente influenciados por la rapidez con la que se carga el contenido y la estabilidad del diseño durante la carga. El almacenamiento en caché y la optimización de imágenes son clave.

nitropack

NitroPack maximiza la eficiencia del sitio web con almacenamiento en caché inteligente, entrega optimizada de recursos y técnicas avanzadas de optimización de imágenes, como carga diferida y conversión WebP. Quiero mencionar este porque maneja el almacenamiento en caché y ofrece una CDN y cambio de tamaño de imágenes (según el plan). Eso significa que es una ventanilla única para las tres cosas principales que necesitará (almacenamiento en caché, optimización de imágenes y CDN).

Obtener NitroPack

Caché total W3

W3 Total Cache es un complemento de almacenamiento en caché de WordPress de larga data que ofrece un conjunto completo de opciones para mejorar los tiempos de carga, incluido el almacenamiento en caché de páginas, la minificación y el almacenamiento en caché del navegador.

Obtenga caché total W3

Cohete WP

WP Rocket es un complemento de almacenamiento en caché fácil de usar que simplifica la optimización con funciones como almacenamiento en caché de páginas, precarga y modificación de archivos. Tiene muchos seguidores y es bastante fácil de usar. Tiene complementos para una CDN o funciona bien con toneladas de configuraciones diferentes.

Consigue WP Rocket

Optimizador de imagen EWWW

EWWW Image Optimizer optimiza automáticamente sus imágenes, reduciendo el tamaño de los archivos sin una pérdida notable de calidad. Esto mejora los tiempos de carga y previene CLS. Ayuda con el tamaño de las imágenes y ofrece formatos de imágenes de próxima generación que se cargan mejor para la web moderna.

Obtenga el optimizador de imágenes EWWW

Cómo mejorar LCP e INP

Descifrar el código tanto para LCP como para INP significa que su sitio debe mostrar contenido rápidamente, ya sea en la primera carga de la página o en cualquier actividad posterior. Un tema de WordPress eficaz puede ayudar a que esto suceda.

Tema Divi

Divi está diseñado para minimizar la cantidad de CSS y JavaScript cargados en cada página, incluso antes de la modificación. Cuando utiliza cualquier módulo Divi, puede confiar en que está bien codificado y que no sobrecargará su servidor. Para obtener aún más rendimiento de Divi, utilice ajustes preestablecidos de diseño global para reducir aún más la cantidad de CSS necesaria para una página. Todo esto se combina para permitirle crear mejores páginas que se vean bien y en las que pueda confiar para que funcionen bien. Lea más sobre cómo optimizar Divi por completo.

Consigue DiviPro

Poniéndolo todo junto

Optimizar su sitio web para Core Web Vitals (CWV) es una inversión en su éxito en línea. Sé que es mucho, pero al centrarse en LCP, INP, CLS, FCP y TTFB, está mejorando directamente la experiencia del usuario, haciendo que su sitio web sea más agradable y atractivo. Esto se traduce en tasas de rebote más bajas, más tiempo en el sitio y, en última instancia, más conversiones.

Además, Google considera importantes estas métricas, por lo que mejorar sus Core Web Vitals puede mejorar su visibilidad en los motores de búsqueda. Aunque estas métricas no son factores de clasificación, ayudan a los tipos de cosas que son factores de clasificación. Espero que vea que estas mejoras generan aún más tráfico orgánico a su sitio.

Cree un sitio de WordPress de alta puntuación hoy

Si aún no ha creado su sitio web, esto es en lo que me centraría en este orden:

1. Obtenga alojamiento confiable (recomendamos Siteground)
2. Elija un tema como Divi, creado utilizando las mejores prácticas para ofrecer un rendimiento sorprendente.
3. Termine con un buen complemento de almacenamiento en caché y CDN.

Pruebe la página Divi (demostración en vivo)

Obtén Divi hoy

Preguntas frecuentes