Core Web Vitals: cómo medirlas y optimizarlas

En mayo de 2020, Google anunció un cambio en su algoritmo de clasificación.

El objetivo de esta actualización es:

Añadir más señales de clasificación orgánica para la experiencia del usuario.

Por eso, en mayo de 2021, los Core Web Vitals formarán un nuevo factor de clasificación.

Estos Core Web Vitals son tres métricas que representan el tiempo de carga, la interactividad y la estabilidad visual de una página.

Imagen de las Core Web Vitals:

  • La pintura de contenido más grande o Largest Contentful Paint (LCP) registra cuándo aparece el elemento de contenido más grande;
  • Cumulative Layout Shift (CLS) muestra en qué medida los cambios de diseño inesperados (anuncios, ventanas emergentes, etc.) afectan a la estabilidad visual de una página;
  • First Input Delay (FID) mide el retraso entre la primera interacción del usuario y la respuesta del navegador.

Es esencial optimizar estas nuevas métricas para la experiencia del usuario y la optimización orgánica de tu web

¡Vamos a medir el rendimiento actual de tu sitio!

Medición de las Core Web Vitals de tu sitio web

Recientemente, Google ha creado nuevas pruebas, informes y extensiones para ayudar a analizar el rendimiento de las Core Web Vitals.

Las más importantes son:

  • La evaluación de datos de campo actualizada en PageSpeed Insights.
  • El nuevo informe en Google Search Console.
  • La extensión para Chrome de Core Web Vitals.
  • DevTools de Chrome también tiene algunas funcionalidades interesantes para analizar LCP, CLS y FID. Ya hablaremos de ellas más adelante.

Empezaremos con PageSpeed Insights.

Evaluación de Core Web Vitals en PageSpeed Insights

PageSpeed Insights (PSI) de Google te ofrece una evaluación de Core Web Vitals rápida de cualquier página. Veamos cual son los dos factores a valorar:

puntuacion core web vitals

Evaluación de datos de campo en PageSpeed Insights

Esta evaluación forma parte del informe Datos de campo. Los datos de campo son proporcionados por el Informe de experiencia de usuario de Chrome (CrUX).

Esta información se recoge de usuarios reales y se basa en lo que experimentan en su sitio web. Cuando se trata de clasificaciones de búsqueda, Google utilizará estos resultados de campo, no los datos de laboratorio.

PSI también proporciona Oportunidades y Diagnósticos para mejorar el rendimiento general de su web.

Oportunidades en PageSpeed Insights

La prueba de laboratorio de Google genera estas sugerencias, por lo que no cubren toda la gama de problemas que los usuarios reales pueden encontrar.

No obstante, estas sugerencias le ofrecen una orientación general sobre por dónde empezar a mejorar la velocidad del sitio.

Informe Core Web Vitals en Google Search Console

Google Search Console (GSC) cuenta con dos nuevos informes Core Web Vitals: uno para móviles y otro para ordenadores de sobremesa. Cada informe ofrece información sobre los grupos de URLs y sus Core Web Vitals.

  • Informe de las condiciones vitales de la web principal de Google Search Console.
  • URLs de Google Search Console

Estos informes son excelentes para encontrar problemas comunes en diferentes URL. De este modo, obtendrá información sobre todo su sitio web en lugar de sobre una sola página.

Por ejemplo, si tienes muchas páginas de productos idénticas en las que el elemento más grande es una imagen del producto, la métrica LCP será similar para todas ellas. En ese caso, GSC encuentra problemas de LCP en todas estas páginas de productos.

Además, después de solucionar cualquier problema de Core Web Vitals, puedes alertar a Google haciendo clic en «Validar corrección«.

metricas web principales
reporte search console

En resumen, estos nuevos informes de GSC son la mejor manera de realizar un seguimiento del rendimiento de Core Web Vitals para todo su sitio.

Otros modos de obtener una primera impresión del estado de nuestras Core Web Vitals: 

Extensión de Chrome de Core Web Vitals

Para una rápida comprobación de Core Web Vitals, puede utilizar esta extensión de Chrome.

La extensión le ofrece automáticamente una breve auditoría de LCP, CLS y FID.

Extensión de Core Web Vitals

No es muy detallado, pero es la forma más rápida de comprobar el Core Web Vitals de una página.

Sólo asegúrese de validar los números en PSI o GSC ya que la extensión puede producir resultados extraños de vez en cuando.

Cómo optimizar el Core Web Vitals

Una vez que haya medido las Core Web Vitals de su sitio, es el momento de optimizarlas.

Pero una rápida advertencia antes de empezar: cada sitio web es diferente y no podemos cubrir en un sólo artículo todos los problemas potenciales.

A continuación encontrarás técnicas probadas para mejorar el rendimiento web. Sin embargo, tu sitio también puede verse afectado por factores que no hemos tratado aquí.

#Analiza siempre sus problemas específicos antes de implementar cualquier optimización.

Mejorar el tiempo de pintura de mayor contenido

La pintura de contenido más grande (LCP) mide el tiempo que tarda en cargarse el elemento de contenido más grande.

Ese elemento puede ser una imagen, un vídeo o un bloque de texto.

Todo lo que esté por debajo de 2,5s se considera una buena puntuación LCP. Si sus elementos más grandes por encima del pliegue se cargan más rápido, eso está bien.

Para comprobar qué elemento activa la métrica LCP, abra la página que desea analizar en Chrome, haga clic con el botón derecho y seleccione «Inspeccionar».

inspeccionar codigo web

Desde ahí, ve a «Rendimiento» > Haz clic en el botón «Recargar» y espera a que Chrome analice la página.

Una vez que el informe esté listo, encontrarás un pequeño icono LCP en la sección «Tiempos». Al pasar el ratón sobre él, pintará de azul el elemento más grande de la página.

También puedes utilizar un gráfico de cascada para ver cuántos recursos se cargaron antes del LCP. Para ello puedes usar la herramienta WebPageTest.org.

A partir de aquí, puedes encontrar los recursos que causan problemas y averiguar cómo mejorar su tiempo de carga.

Algunas maneras de reducir su LCP:

  • Conseguir un mejor plan de alojamiento. El tiempo de respuesta del servidor (TTFB) es esencial para la velocidad del sitio. Si está en un servidor de alojamiento compartido lento, considere la posibilidad de cambiar a un plan dedicado;
  • Implementar el CSS crítico. El CSS crítico significa encontrar el CSS necesario para cargar el contenido por encima del pliegue y alinearlo en la etiqueta head. Esta técnica mejora el rendimiento real y percibido;
  • Minificar y comprimir los archivos de código. La minificación elimina las partes innecesarias del código, como los espacios en blanco y los saltos de línea. La compresión también modifica los archivos de código, reduciendo su tamaño. Algunos proveedores de alojamiento y CDN implementan estas técnicas por defecto;
  • Optimizar las imágenes. A menudo la mayor razón de la lentitud de los sitios web, las imágenes deben ser comprimidas, redimensionadas y convertidas al formato adecuado.

Fijar las puntuaciones de los desplazamientos de diseño acumulativos

CLS mide el efecto de los cambios de diseño inesperados en una página.

Los cambios de diseño inesperados se producen cuando el contenido de la página se desplaza sin que el usuario lo haya hecho.

Una puntuación CLS inferior a 0,1 significa que la página es visualmente estable.

Para calcular la puntuación CLS, Google responde a dos preguntas:

  • ¿A qué parte de la ventana gráfica ha afectado el desplazamiento?
  • ¿A qué distancia se movieron los elementos durante el desplazamiento en comparación con la ventana gráfica?

La puntuación global de CLS es la suma total de todas las puntuaciones individuales de los cambios de diseño inesperados.

De nuevo, sólo los desplazamientos inesperados afectan a esta métrica.

Si un desplazamiento se produce después de que el usuario haga clic en un botón, su puntuación CLS sigue siendo la misma.

Así que sólo tiene que preocuparse por los cambios que se producen sin que el usuario haya intervenido previamente. Por ejemplo, los anuncios, las ventanas emergentes y los banners promocionales.

DevTools de Chrome ayuda a detectar cambios de diseño inesperados.

De nuevo, haz clic con el botón derecho en una página que quieras analizar y selecciona «Inspeccionar». Ve a «Más herramientas» y selecciona «Renderización».

En la parte inferior, verás una opción de «Regiones de desplazamiento del diseño» con una casilla de verificación al lado. Selecciónela > Botón «Layout Shift Regions».

performance web inspeccionar
rendering web

Ahora, cada vez que se produzca un desplazamiento del diseño, se resaltará el área desplazada.

Este generador de CLS también es ideal para encontrar cambios de diseño. Calcula su puntuación global de CLS y muestra las áreas de desplazamiento.

Algunas optimizaciones que pueden reducir significativamente los cambios de diseño:

  • Evite insertar anuncios y ventanas emergentes por encima de otros contenidos. Insertar contenido en la parte superior de una página hace que todo lo que hay debajo se desplace, lo que da lugar a una mala puntuación de CLS;
  • Añadir atributos de anchura y altura a las imágenes. Estos atributos ayudan al navegador a asignar por adelantado la cantidad correcta de espacio para cada imagen. Esto reduce significativamente los desplazamientos del diseño;
  • Optimizar la entrega de fuentes. El uso de link rel=»preload» y font-display: optional en combinación puede evitar los desplazamientos de diseño y los destellos de texto invisible. Consulte este artículo para obtener más información sobre cómo hacerlo.

¿Cómo solucionar los problemas de retraso de la primera entrada?

El retraso de la primera entrada (FID) es el tiempo que tarda el navegador en responder a la primera interacción del usuario.

El FID mide el retraso sólo después de acciones distintas como clics o toques. Los desplazamientos y los zooms no afectan a esta métrica.

Para estar en la zona verde, el FID de tu sitio web debe ser inferior a 100 ms.

Ahora bien, el FID registra el retraso sólo después de la primera entrada. ¿Por qué?

Bueno, la primera impresión lo es todo en la web. Los usuarios se van al instante y, en la mayoría de los casos, no vuelven si un sitio web les frustra en su primera visita.

Por eso es crucial mantener un FID bajo.

JavaScript es el principal villano cuando se trata de FID. JavaScript es un recurso muy caro, que puede atascar el hilo principal y ralentizar el FID.

Para encontrar lo que causa los retrasos de entrada, abra el panel «Performance» en DevTools (los pasos están en la sección LCP). A continuación, haga clic en main y abra el análisis «Bottom-up».

performance web

Puede encontrar las tareas largas (todas las tareas de más de 50ms) en la sección «Principal». Estas tareas están pintadas en gris con una superposición roja.

El análisis «Bottom-Up» le permite agrupar archivos por URL y encontrar exactamente lo que causa los retrasos.

El desglose de procesamiento de WebPageTest es otra gran manera de encontrar áreas problemáticas.

Esto es lo que puede hacer para mejorar su FID:

  • Retrasar o eliminar los scripts de terceros no críticos. Los scripts de terceros a veces pueden impedir que sus propios scripts se ejecuten a tiempo. Considere qué scripts proporcionan el mayor valor al usuario y priorícelos. En la mayoría de los casos, los scripts de anuncios y ventanas emergentes no son los primeros de la lista;
  • Divida las tareas largas. Las tareas largas impiden que el hilo principal responda a las interacciones del usuario a tiempo. Al dividirlas, puede mejorar significativamente el rendimiento de su sitio web;
  • Utilizar web workers. Los web workers permiten ejecutar scripts en segundo plano sin afectar al hilo principal. Mover las operaciones que no son de la UI a un hilo de fondo es generalmente una buena práctica.

¿En qué medida afectará el Core Web Vitals al SEO?

Es raro que Google nos diga directamente que algo se convertirá en un factor de clasificación.

Pero lo ha hecho en el caso de las Core Web Vitals. Por eso la gente se pregunta hasta qué punto afectará esta nueva señal a sus clasificaciones orgánicas.

Recientemente, Google dejó caer mucha información sobre el tema. En particular, publicaron un vídeo completo sobre el Core Web Vitals y el SEO.

Esta es la cita más importante del vídeo:

«En general, nosotros (Google) damos prioridad a las páginas con la mejor información en general, incluso si algunos aspectos de la experiencia de la página son inferiores. Una buena experiencia de página no anula el hecho de tener un contenido excelente y relevante».

Como era de esperar, factores como la relevancia temática y la calidad del contenido seguirán siendo mucho más importantes.

Al mismo tiempo, el Core Web Vitals aumentará sin duda la importancia de la experiencia general del usuario como factor de clasificación.

Por eso, si estás intentando clasificarte en un sector en el que la calidad de la información es en gran medida idéntica, la optimización de las Core Web Vitals puede suponer una gran diferencia.

Además, Google hará que las páginas con un nivel «pobre» de las «Core Web Vitals» no sean elegibles para el carrusel de «Top Stories». Esto es increíblemente importante para los editores y los sitios web de noticias.

En resumen:

Corregir las condiciones vitales del núcleo de su sitio web le reportará beneficios de SEO en el futuro. Especialmente si está tratando de posicionarse en el carrusel de las mejores historias.