Google Core Web Vitals ¿qué son y cómo puedes usarlas para optimizar tu WordPress?

• 27
  Ene

• Etiquetas: internet, navegación, optimización, posicionamiento, programación, seo, soporte

Tanto si usas WordPress como si no, te vas a tropezar en algún momento con algo llamado Google Core Web Vitals, o Métricas Web Principales.

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 este artículo vamos a ver qué son eso de las Google Core Web Vitals y por qué son importantes para los usuarios de WordPress.

¿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, 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

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

Podríamos 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 pasos sin sentido, 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 objetivo que nos pone a todos delante: el posicionamiento en las búsquedas.

¿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.

“¡Listo!, ya sé medir las Core Web Vitals, ahora, ¿cómo mejoro los resultados con WordPress?”

Ante todo 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 enfrentarte con las Core Web Vitals, siguen siendo la optimización base de WordPress.

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 nuestro artículo.

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 un CDN como 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.

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.

Entérate también sobre estos temas relacionados:

Códigos que puedes agregar al archivo .htaccess para acelerar, optimizar y asegurar tu WordPress Cómo optimizar tu WordPress para búsquedas por voz Cómo optimizar WordPress para pagar menos hosting ¿Cómo optimizar tu sitio wordpress este 2021? Una forma adicional de contar historias: Google Web Stories, ¿qué son, cómo se hacen y para qué sirven?