Google siempre nos mantiene alerta ante cambios pensados para mejorar la calidad de la navegación de los usuarios.

En abril de 2020 ya comenzó a desvelarnos la aparición de nuevos indicadores que, de forma progresiva, iría utilizando para evaluar y clasificar las webs en sus resultados de búsqueda. ¿Su nombre? Las Core Web Vitals de Google.

Estas métricas, que el buscador empezará a valorar a partir de mayo de 2021, tienen un objetivo claro: analizar la experiencia de usuario (UX) ofrecida por las páginas.

anuncio-core-web-vitals

¿Y por qué son cruciales? Porque pasarán a engrosar la lista de factores SEO que Google tiene en cuenta para clasificar webs en sus resultados de búsqueda, además de elementos como la navegación segura, la adaptabilidad móvil o el uso de banners insterticiales intrusivos.

Integradas dentro del cambio de algoritmo denominado Page Experience Update que comenzará a funcionar desde mediados de junio, queremos que las Core Web Vitals de Google dejen de ser desconocidas para ti y sepas cómo optimizar el SEO y la experiencia de usuario de tu web para que esta actualización no le afecte.

¿Qué son las Core Web Vitals de Google?

En su cruzada por garantizar al usuario una experiencia de navegación de calidad que le lleve a encontrar en la Web aquello que busca, Google empezó a hablar hace más de un año de las Core Web Vitals. Pero, ¿qué hay tras este concepto?

Las Core Web Vitals de Google son un conjunto de señales que evalúan distintas facetas de la experiencia de usuario y rapidez de carga en las webs de todo el mundo.

Y, como su propio nombre indica, estos elementos resultan de “vital” importancia a ojos del gran gigante de las búsquedas en Internet.

Como ya sabrás, la apuesta por la UX en Google viene de lejos; desde la puesta de largo de herramientas como PageSpeed Insights, a Lighthouse o Mobile-Friendy Test, pasando por el formato AMP o Chrome UX Report.

Dada la enorme variedad de métricas de experiencia de usuario y velocidad de carga que los propietarios web y profesionales digitales deben controlar, las Core Web Vitals marcan 3 aspectos de análisis concretos. 

CLS (Cumulative Layout Shift)

Seguro que en más de una ocasión has comprobado cómo el contenido que compone una web va cambiando de ubicación a medida que la página se carga.

Confusión, descuido e incluso molestia son solo alguna de las sensaciones que causa en el usuario, afectando de forma negativa a su experiencia de navegación.

La métrica CLS viene a analizar la estabilidad visual de una página y, en vez de hacer el cálculo basado en el tiempo, lo realiza en función de las veces que se den esos cambios y su magnitud.

De este modo, cuanto mayor es el movimiento de ese elemento, aumentará ese valor que Google recomienda mantener en 0,1 o menos para brindar una óptima experiencia de usuario.

CLS -core-web-vitals


Este vídeo te interesa:

Aprende a detectar y monitorizar la métrica CLS en tus proyectos


4 métodos para identificar problemas de CLS en tu sitio web

1 – Desde Google Search Console

Dirígete a Métricas Web Principales y escoge entre la opción Ordenador o Móvil y abre un informe. De este modo, podrás conocer las URLs del proyecto con problemas de CLS.

Google Search Console te permite acceder a PageSpeed Insights para realizar un test que evalúe todas las deficiencias de esa página.

pagespeedinsights-cls

Es más, desde la opción Evite cambios de contenido podrás identificar dónde se han producido esos desplazamientos inesperados de elementos que afectan a esta métrica de las Core Web Vitals.

2 – Con Devtools

Desde F12 despliegas el menú correspondiente a la herramienta Devtools. Dirígete a la sección Performance y selecciona Web Vitals y Screenshots, además de verificar que te encuentras en Network Fast 3G.

devtools-core-web-vitals-cls

A continuación, la herramienta nos ofrece una visión detallada de la carga de la web donde podemos comprobar ese movimiento de los elementos que rompe con la estabilidad visual que demanda el CLS.

Así es sencillo detectar dónde esta el problema y barajar las posibles soluciones para erradicar esta incidencia que afecta al SEO de la web.

3 – WebPageTest.org

Gracias a esta herramienta, podrás realizar un test a tu página. Este recurso te marcará las métricas de las Core Web Vitals de tu web, entre las que se incluye el CLS.

webpagetest-cls

WebPageTest facilita al usuario la posibilidad de ver un vídeo que recoge la carga de la página analizada, con el objetivo de detectar dónde se da el desplazamiento de contenido en esa página.

4 – Extensión de Google Chrome CLS Checker

Solo debes instalar la extensión y a continuación analizar la página clicando en el botón Check the page.

A partir de ahí la herramienta ofrece un resumen de los principales problemas de CLS encontrados, que podrás identificar haciendo clic sobre cada uno de ellos y los visualizarás en pantalla.

CLS-checker

¿Cómo monitorizar las mejoras ante problemas de CLS?

Desde Google Search Console, clicando sobre Métricas Web Principales >> Ordenador/Móvil >> Última fecha de revisión de problemas de CLS podrás indicarle que revise la mejora realizada desde Validar corrección.

El problema de esta evaluación es el tiempo ya que la respuesta la obtienes en 28 días.

Para evitar tanto tiempo de rastreo de esas mejoras, siempre puedes optar por realizar un nuevo análisis desde PageSpeed Insights, fijando la atención en Datos de Laboratorio.

En este análisis, toma en consideración la opción Cambio de diseño acumulativo y compara la métrica CLS inicial de la que partías y la nueva cifra que te ofrece la herramienta. Así comprobarás si el ajuste realizado ha servido para la mejora de esta Core Web Vital en tu proyecto.

¿Te gustaría saber en qué estado se encuentra el CLS de tu web respecto al de la competencia? Conócelo mediante la extensión de Google Chrome Core SERP Vitals.

Core-serp-vitals

Gracias a ella, cuando realicemos una búsqueda en Google, marcará debajo de cada resultado las métrica LCD, FID y CLS de esas webs.

LCP (Largest Contentful Paint)

Bajo esta métrica, Google evalúa el tiempo que tarda una web en cargar el elemento de contenido principal del above the fold, ya se trate de una imagen, un texto o un vídeo.

Para garantizar una buena experiencia de usuario, el indicador LCP debe ser de igual o menor a 2,5 segundos.

Core-web-vitals-LCP


Dale play a este vídeo:

LCP: mejora la carga de tu contenido web


¿Cómo detectar problemas de LCP?

Una forma de obtener resultados de las métricas del LCP es pasar la web por la herramienta PageSpeed Insights, tomando como referencia dentro de los datos de experimentos el relativo a Largest Contentful Paint.

A continuación, dirígete a Renderizado del mayor elemento del contenido y conocerás el elemento html que está ocasionando esa deficiencia en esta Core Web Vitals.

renderizado

Una vez identificada la causa del problema, te recomendamos que utilices DevTools (selecciona las opciones Web Vitals y Screenshots).

La herramienta indica datos sobre las Core Web Vitals. Si clicas sobre LCP, ofrece un resumen de características sobre esta métrica. Entre esos aspectos, hace referencia al elemento que está influyendo en la carga.

devtool-lcp

¿Una forma de detección más sencilla? Opta por WebPageTest.org y aporta los datos solicitados. Te recomendamos que revises antes el vídeo de David dedicado al LCP incluido en este post.

Con esa información, la herramienta no solo aporta datos de esta métrica, sino que a través de capturas marca el elemento que está provocando esa carga tardía.

deficiencia-lcp-webpage

Recursos para monitorizar el LCP

Entre las herramientas que puedes utilizar destacamos:

  • Google Search Console, desde la opción Métricas Web Principales, analizando bien en el versión móvil o de ordenador las URLs afectadas por el LCP.
  • Extensión Web Vitals para Google Chrome, perfecta para una evaluación rápida de las Core Web Vitals solo clicando sobre su icono.

FID (First Input Delay)

¿Cuánto tiempo tarda tu web desde que el usuario hace clic en el botón de Comprar y aparece el contenido para iniciar la adquisición de ese producto? Aquí actuaría esta métrica.

El indicador FID mide la interactividad de una página, que siempre debe estar en 100 milisegundos o por debajo de esta cifra.

FID-core-web-vitals


Mira el último vídeo de la serie:

FID o cómo aumentar la interactividad de tu web


¿Cómo detectar un problema con el FID en tu proyecto web?

El punto de participa para identificar ese desajuste en la interactividad de un site pasa por comprobar la métrica FID mediante la extensión de Google Chrome Web Vitals.

De este modo, clicando sobre el icono de la extensión, conocerás los resultados obtenidos por las tres Core Web Vitals y, en concreto, acerca del FID una vez interactuado con la página.

fid-web-vitals-extension-chrome

La optimización de la métrica FID es fundamental para la conversión de un negocio online.

Porque de nada sirve contar con una web atractiva, si el usuario clica al botón de compra y debe esperar más de cinco segundos en continuar con el proceso.

Sin embargo, esta técnica de detección puede resultar compleja y poco productiva en proyectos con multitud de landing pages diferentes.

En este caso, te recomendamos respaldarte en la API de PageSpeed Insights y, en particular, en el dato de experimento Total Blocking Time.

Esta función permite conocer qué está produciendo retrasos por la saturación de ejecuciones que impiden una óptima respuesta del servidor ante posibles interacciones del usuario.

FID-total-blocking-time

Como puedes ver en la captura, la métrica ofrecida figura en color verde (buen síntoma); si estuviera en rojo, deberíamos analizar qué está sucediendo.

No obstante, dirígete a Evita tareas largas del hilo principal y así identificarás las acciones que más tiempo están tardando en ejecutarse.

El siguiente paso consiste en examinarlas al detalle y determinar qué solución se puede aplicar para reducir esa latencia y aumentar la rapidez en la interactividad web.

FID-evitar-tareas-hilo-principal

De igual modo, como en el resto de métricas, recuerda que con WebPageTest.org también podrás monitorizar el FID (en particular, el Total Blocking Time) y comprobar si figura dentro de los intervalos de tiempo recomendados.

FID-webpagetest

Las Core Web Vitals y otros 4 indicadores que Google analizará para posicionar webs en las SERPs (a partir de mayo de 2021)

Las Core Web Vitals de Google entran en vigor el próximo mes de mayo de 2021 pasando a formar parte de los factores SEO que el buscador tiene presente para marcar las posiciones de las webs en los resultados de búsqueda.

Ellas comenzarán a actuar unidas a otros elementos que ya figuran entre sus criterios de evaluación como:

  • La optimización para dispositivos móviles (mobile friendly)
  • La navegación segura (safe browsing)
  • El protocolo HTTPS
  • La utilización de anuncios intersticiales intrusivos

metricas-experiencia-usuario-google

El análisis de todos estos 7 indicadores dará un veredicto sobre la experiencia ofrecida por las páginas.

De ahí la importancia de medir y optimizar estos parámetros para que el posicionamiento SEO de una web no se vea afectado por las Core Web Vitals y el resto de elementos de evaluación.

¿Cómo medir el estado de las Core Web Vitals de tu proyecto con Google Search Console?

Si te habías alarmado pensando que te tocaba hacer un trabajo increíble para monitorizar estas métricas «vitales», respira tranquilo porque Google Search Console sale en tu ayuda.

Solo debes loguearte en tu cuenta de esta herramienta, escoger el proyecto que deseas auditar y dirigirte a Mejoras >> Métricas Web Principales.

Google Search Console ofrece datos de la versión móvil y sus correspondientes para la opción de escritorio.

Recuerda hacer el análisis de esta información por separado, porque las métricas no coincidirán y esa realidad marcará las priorización de las tareas de optimización a realizar.

movil-core-web-vitals-search-console

Para obtener información más detallada del resultado de las Core Web Vitals de ese proyecto, clica sobre Abrir Informe.

La herramienta diferenciará por colores el estado de las URLs: en rojo las páginas lentas; en mostaza aquellas que necesitan mejorar; y en verde las rápidas.

informe-search-console-core-web-vitals

Además, desde Detalles podrás conocer el desglose del análisis de esas páginas y el problema detectado para saber en qué URLs debemos centrar las acciones de mejora.

En este caso, podemos comprobar cómo hay páginas que no cumplen la métrica del LCP al superar los 4 segundos, cuando su recomendación es de 2,5 segundos.

detalles-core-web-vitals-search-console

Además, clicando encima de cada problema, Search Console facilita una relación de los grupos de URLs afectadas.

LCP, FID y CLS en PageSpeed Insights

Las métricas que componen las Core Web Vitals de Google también vienen recogidas en los informes aportados por PageSpeed Insights, al analizar una página.

pagespeed-insights-core-web-vitals

En su desglose de resultados, hemos de diferenciar entre los datos de campo y los de experimentos.

  • Datos de campo: métricas de los usuarios analizadas por Google Chrome en los últimos 28 días, recogiendo la información de las Core Web Vitals. Estos datos se muestran en Google Search Console y son determinantes para la clasificación de una web en los resultados de búsqueda.
  • Datos de experimento: métricas obtenidas en tiempo real de ese proyecto web. El informe aporta oportunidades de mejora para aplicar en las páginas analizadas.

oportunidades-pagespeed-insights-core-web-vitals

PageSpeed Insight marca con el símbolo de una bandera azul los indicadores obtenidos para las Core Web Vitals.

La información de la métrica en verde muestra que la página cumple el canon marcado por Google, mientras que en rojo avisa de la necesidad de actuar sobre ese elemento.

icono-core-web-vitals-pagespeed-insights

Uso de Pingbox de Rankbox para una monitorización diaria de las Core Web Vitals de Google

Tal y como David recoge en el vídeo, la selección de URLs reunidas en Google Search Console que merecen ajustes para cumplir las Core Web Vitals las podemos monitorear en grupo y a diario con la ayuda de la herramienta Pingbox, incluida dentro de Rankbox.

¿Cómo conseguirlo? Crea un proyecto donde integres las URLs prioritarias que deseas analizar.

pingbox-medir-core-web-vitals-google

La herramienta facilitará la evolución de las métricas LCP, FID y CLS, con los valores concretos.

pingbox-core-web-vitals

Además, ofrece gráficos de ese progreso tanto para móvil como para ordenador.

graficas-rankbox-core-web-vitals

Toda esta información permite tener controladas las Core Web Vitals de un proyecto web y comprobar la evolución de las métricas para pulir la estrategia de optimización SEO de ese site, conforme a las buenas prácticas valoradas por Google.

[enlaces_pie_post] [related_post posts_ids=’22799,22032,16606′]