Google Core Web Vitals ¿qué son, cómo puedo usarlas para optimizar mi WordPress?

Tanto si usas WordPress como si no te vas a hartar de leer los próximos meses sobre eso llamado Google Core Web Vitals, o Métricas Web Principales.

Core Web Vitals son el penúltimo intento de Google de cambiar Internet. Las Google Core Web Vitals son un conjunto de métricas de rendimiento y experiencia de usuario que van a convertirse en un importante factor SEO durante los próximos meses y años, y no deberías ignorarlo.

La idea de las Core Web Vitals es ofrecer una serie de criterios uniformes bajo los cuales medir la experiencia de los usuarios cuando visitan una web, teniendo en cuenta la usabilidad y la velocidad de carga de todos sus elementos.

En esta guía vamos a ver qué son eso de las Google Core Web Vitals y por qué son importantes para los usuarios de WordPress. A continuación veremos cómo analizar el rendimiento de las Core Web Vitals en tu sitio WordPress y cómo mejorar las puntuaciones.

¿Qué son las Google Core Web Vitals?

Las Google Core Web Vitals son 3 métricas específicas que miden la velocidad y experiencia del usuario en tu sitio.

Las Core Web Vitals se ocupan principalmente de cómo carga tu web, más que de tus tiempos de carga globales.

Por ejemplo, mide lo siguiente:

• Cuán rápidamente pueden los visitantes ver e interactuar con tu contenido, aunque tu sitio no haya cargado del todo.
• ¿Tu sitio carga de manera fluida o hace saltos y cambios de estilos a medida que se van cargando los distintos recursos?
• ¿Hay retardos cuando los usuarios tratan de interactuar con el contenido de tu sitio?

Para ello, Core Web Vitals utiliza estas tres métricas:

• Largest Contentful Paint (LCP) o Pintado del contenido principal – mide la carga – cuánto tarda en cargar el contenido principal de tu página. No todo el contenido – solo el contenido principal que primero ve tu visitante. Tu LCP debería estar por debajo de los 2,5 segundos.
• First Input Delay (FID) o Retardo hasta la primera interacción – mide la interactividad – cuánto tarda tu página en ser interactiva. O sea, cuándo un visitante puede hacer clic en un botón u otro elemento. Tu FID debería estar por debajo de los 100 ms (este número reflejará el retardo en procesar la interacción).
• Cumulative Layout Shift (CLS) o Cambio acumulativo de diseño – mide la estabilidad visual – cuánto cambia visualmente tu contenido a medida que se carga. Por ejemplo, si tu contenido se «mueve» cuando se muestra un anuncio. Tu CSL debería estar por debajo de 0.1

Las métricas están basadas en el motor de Lighthouse.

¿Por qué me deberían importar las Google Core Web Vitals?

Podría decirte muchos motivos, pero hay dos grandes razones por las que, como usuario de WordPress, deberías ponerte al día y preocuparte por las Google Core Web Vitals:

1. Experiencia de usuario
2. SEO

La primera razón es porque, según opina Google, y cualquiera con un poco de sentido común, el principal objetivo a la hora de analizar cómo rinde tu web es el usuario.

Teniendo en cuenta las Core Web Vitals deberías ser capaz de conseguir una mejor experiencia de navegación para tus visitantes, evitando errores de usabilidad como, por ejemplo, que hagan clic en el botón equivocado por un salto de diseño (CLS), o que el botón aún no funcione (FID).

La segunda razón de importancia por la que tener en cuenta las Core Web Vitals es, cómo no, el SEO. Google no da puntada sin hilo, y cuando ha «propuesto» estas mediciones con el objetivo de facilitar que las webs sean más accesibles y con mejor experiencia de usuario, es que las tiene en cuenta para el caramelo que nos pone a todos delante: el posicionamiento en las búsquedas.

Y sí, las Core Web Vitals son un factor de posicionamiento en las búsquedas de Google, cada vez más. ¿Es justo? ¿lógico?, cada uno tendrá su opinión, yo creo que lo que uno busca son contenidos de valor, y soy capaz de soportar una web mal diseñada si el contenido merece la pena, pero igualmente ¿a que todos agradecemos un diseño orientado a la usabilidad y buena experiencia del usuario? ¿a que es más fácil consumir los contenidos en una web con buen rendimiento?

En cualquier caso, si lo prefieres, toma las Core Web Vitals como recomendaciones de rendimiento y usabilidad que, analizadas y aplicadas con sentido común, en ningún caso van a arruinar tu web, sino que la mejorarán en lo que se refiere a la experiencia de tus visitantes.

¿Cómo mido las Google Core Web Vitals?

Hay 3 maneras fundamentales de medir las Core Web Vitals de Google:

1. PageSpeed Insights
2. Google Search Console
3. Lighthouse en tu navegador

PageSpeed Insights

Un modo rápido de hacer un análisis de tu web mediante las Core Web Vitals es usar la herramienta de Google PageSpeed Insights.

Una vez pongas la URL de la página que quieres analizar verás las métricas:

• Largest Contentful Paint (LCP)
• First Input Delay (FID) – Solo en los datos de campo
• Cumulative Layout Shift (CLS)

Google marca las métricas de las Core Web Vitals con una banderita azul

Solo podrás ver la métrica de First Input Delay (FID) si tu sitio tiene suficientes datos como para ofrecer datos de campo.

Si tu sitio aún no tiene mucho tráfico solo se verán los datos de experimentos, sin la métrica de First Input Delay (FID), que es la que está basada en la interacción de los usuarios y, en consecuencia, dependiente de que tu página tenga suficiente tráfico como para tener un dato estadístico relevante.

Google Search Console

Otro modo de que comprendamos el rendimiento de nuestro sitio es el informe de Métricas Web Principales que se ha incluido en la Search Console.

Es un informe muy útil porque, en vez de simplemente probar una URL como hacemos en PageSpeed Insights, muestra problemas en toda tu web.

Si haces clic en cualquiera de los informes para móviles o escritorio podrás ver una lista de URLs específicas susceptibles de mejora en las Core Web Vitals (métricas web principales).

Lighthouse en tu navegador

Para finalizar, debes saber que no necesitas acudir a webs o recursos externos, en la misma consola para desarrolladores de tu navegador dispones del motor de Lighthouse, que es el que utiliza Google para determinar las Core Web Vitals.

Solo tienes que hacer un clic derecho en cualquier parte de una página y hacer clic en «Inspeccionar» para abrir la consola para desarrolladores.

Una vez ahí ve a la pestaña llamada «Lighthouse» y lanza  un informe.

Puedes configurar qué parámetros quieres medir (para las Core Web Vitals obligatorio el de «Performance») y si quieres medir para escritorio (desktop) o móviles (mobile).

El informe generado es completísimo, igual que en PageSpeed Insights, con todos los detalles, y puedes analizar los 3 Core Web Vitals.

Vale, ya sé medir las Core Web Vitals, pero ¿cómo mejoro sus resultados con WordPress?

Bueno, creo que ya tendrás claro que para mejorar tus Core Web Vitals, o métricas web principales tienes que enfocarte en mejorar el rendimiento y usabilidad de tu web ¿no?

¡Ah, que no! ¿vuelve arriba y empieza a leer de nuevo 🙂

En serio, tienes que comprender que Google en realidad no está tan preocupado en cuánto tiempo tarda tu web en cargar del todo, que es lo que hasta ahora estábamos acostumbrados a medir en las herramientas de velocidad, sino que está más enfocado en cuánto tardan tus visitantes en tener una buena experiencia de navegación y usabilidad de tus páginas, y para eso no siempre hace falta esperar a que tu página cargue del todo.

Así que, aunque las técnicas de optimización de tiempos de carga es probable que mejoren algunas de las Core Web Vitals, tienes que empezar a centrarte más en cómo carga tu sitio, y no solo en cuánto tiempo tarda en cargar.

El modo correcto de afrontar el análisis de tus páginas de cara a analizar las Core Web Vitals sería como en estos ejemplos:

• ¿Está tu contenido «principal» optimizado para cargar lo más rápidamente posible?
• ¿En qué orden cargan tus scripts y CSS?
• ¿Tienes scripts que bloqueen la visualización de tu contenido principal?
• ¿Puedes incrustar el CSS crítico para evitar saltos de contenido sin estilos?
• ¿Estas sirviendo anuncios u otros recursos desde servidores externos que puedan provocar saltos en el diseño.

¿Te das cuenta del cambio de enfoque?

Desafortunadamente, como habrás podido comprobar por los ejemplos, la cosa cada vez se está poniendo más técnica, y no siempre vas a simplemente instalar un plugin y ya, aunque los plugins pueden ayudar, y mucho, al menos en parte.

De todos modos, tus primeros pasos, antes de liarte con las Core Web Vitals, siguen siendo la optimización base de WordPress, para lo que te recomiendo repasar las siguientes guías:

• Cómo hacer que tu WordPress cargue más lento (guía rápida y 100% efectiva)
• Guías y tutoriales WPO (Web Performance Optimization)
• Cómo optimizar WordPress para pagar menos hosting

Cuando tengas aplicados los principios base de optimización para WordPress, ya toca empezar a meterse con ajustes específicos para mejorar las métricas de las Core Web Vitals, que es lo siguiente que vamos a ver en esta guía.

Cómo optimizar el Largest Contentful Paint (LCP)

Como vimos antes, LCP mide cuánto tarda en cargar el contenido más importante y principal de la página. Ya sea una imagen o vídeo de portada, o lo que tengas en el primer scroll de la página. Puede ser donde está tu logo o imagen, el título de la web y lo primero que verá un visitante al llegar a ella.

Lo mejor que puedes hacer para optimizar esto es servir las páginas como HTML estático en vez de generar dinámicamente las páginas en cada visita. Esto lo conseguirás utilizando plugins de caché o con la caché de página de CloudFlare.

También es de vital importancia que tu web esté en un hosting optimizado para ofrecer el mejor rendimiento posible a sitios creados con WordPress.

Pero eso no es todo, hay otras estrategias que puedes aplicar para mejorar tus tiempos de LCP:

• Usar una CDN
• Eliminar el CSS y JavaScript que bloquee la visualización.
• Incrustar el CSS crítico y aplazar la carga del CSS no crítico.
• Optimiza las imágenes.
• Comprimir los contenidos mediante Gzip o Brotli.

Optimizar el First Input Delay (FID)

Como hemos visto, el FID mide la adaptabilidad e interactividad de tu sitio. Mide el tiempo a partir del cual un usuario puede interactuar con tu contenido y genera una respuesta.

Para optimizar esta métrica nos toca aplicar técnicas de optimización de carga, principalmente de JavaScript.

Algunas técnicas que pueden ayudar son:

• Aplazar la carga de JavaScript.
• Comprimir el JavaScript mediante Gzip o Brotli.
• Minimizar el JavaScript.

Optimizar el Cumulative Layout Shift (CLS)

Recuerda, el CLS mide cuánto «salta» tu contenido mientras carga.

Los principales problemas con el CLS suelen tener que ver con:

• Imágenes sin dimensiones especificadas.
• Anuncios o incrustados sin dimensiones especificadas.
• Fuentes web.

En lo relativo a las imágenes, WordPress ajusta correctamente las dimensiones de las mismas desde el editor.

También, en anuncios e incrustados (vídeos, etc.) puedes especificar las dimensiones, para evitar «saltos» de diseño en tus páginas.

Y, para evitar problemas con textos descolocados o con mala visualización, suele ayudar la precarga de las fuentes, propias o de recursos externos.

En esta métrica muchas veces la mayor diferencia la marca la elección del tema, que muestre los contenidos y cargue los recursos de manera uniforme y consistente.

Ya sabes que yo recomiendo estos temas siempre, simplemente son los mejores:

• Astra
• Divi
• GeneratePress

Resumiendo: Cómo optimizar las Core Web Vitals en solo 10 pasos

Por hacerte una lista rápida, estas serían las 10 principales estrategias que tendrías que tener en cuenta para optimizar al máximo las Core Web Vitals y, en consecuencia, el rendimiento y experiencia de usuario de tu web:

1. Un buen hosting, fundamental.
2. Un tema bien diseñado, consistente y optimizado.
3. Solo los plugins imprescindibles.
4. Comprimir todo el contenido posible.
5. Entregar HTML estático mediante sistemas de caché y una CDN.
6. Aplazar la carga de CSS y JavaScript.
7. Minimizar y optimizar todos los códigos.
8. Optimizar todas las imágenes y entregar formatos de nueva generación.
9. Simplificar el diseño del sitio para facilitar la navegación uniforme y consistente.
10. Precargar todos los recursos posibles y eliminar los no necesarios.

Si has llegado hasta aquí ¡muchas gracias!. No hay nada más triste que tirarse un montón de tiempo preparando contenido y que luego nadie lo lea 🙂

Espero haberte ayudado al menos a…

• Comprender qué son las Core Web Vitals.
• Cómo ha cambiado el modo de medir el rendimiento de nuestras webs.
• Cómo optimizar nuestros sitios WordPress para obtener buenos resultados en las Core Web Vitals, o métricas web principales, definidas por Google.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!