Core Web Vitals: nuevas métricas de Google para medir el rendimiento de tu web

Las Core Web Vitals, las nuevas métricas de experiencia del usuario de Google, se componen de tres métricas que los webmasters y los especialistas en posicionamiento orgánico tendrán que tener en cuenta en el futuro: carga, interactividad y estabilidad visual. 

En el siguiente artículo, te contamos todo lo que necesitas saber sobre las Core Web Vitals, incluyendo algunos consejos de optimización.

Core Web Vitals basado en un conjunto de tres métricas fundamentales

A principios de mayo de 2020, Google anunció el próximo lanzamiento de sus nuevas Core Web Vitals, indicadores clave que utilizará para clasificar la experiencia del usuario en los sitios web. Cuando las Core Web Vitals de Google se lancen en mayo de 2021, incluirán tres métricas que en combinación con otras variables, conformarán un nuevo factor de clasificación de la experiencia de usuario estable y segura en los sitios web. 

Las Core Web Vitals se miden con datos de campo que Google ha proporcionado en múltiples informes y herramientas, como Lighthouse, Pagespeed Insights y Google Developer Tools. Se componen de tres métricas que incluyen:

• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

Con el tiempo, Core Web Vitals se adaptará a los últimos avances técnicos y a los cambios en el comportamiento de los usuarios. En este sentido, Google reevaluará las «Core Web Vitals» cada año. 

El hecho de centrarse en tres métricas básicas, claras y coherentes aporta una serie de ventajas. Google puede analizar los sitios web sobre la base de KPIs claramente comunicados. Esto les da a los webmasters, desarrolladores web y SEO una base sólida a la hora de argumentar su posicionamiento en buscadores SEO en relación con trabajos y presupuestos específicos con los clientes. o su administración, a quienes se les puede mostrar evidencia de los resultados positivos inequívocos de los elementos básicos de la red optimizados.

¿Dónde puedo acceder al informe Core Web Vitals?

Las Core Web Vitals de Google ya se han integrado en todas las herramientas de análisis SEO de Google. Por ejemplo, se puede acceder a las Core Web Vitals a través de PageSpeed Insights. Los resultados de Core Web Vitals se muestran, por un lado, en forma de datos de campo y datos de laboratorio. 

También, se puede acceder a los resultados de Core Web Vitals en Google Search Console en forma de una visión general directa de las métricas para el dominio en cuestión, que muestra cuántas y qué URLs se consideran buenas, cuáles necesitan mejorar o cuáles son malas.

Los datos de Search Console se basan en el informe de experiencia del usuario en Chrome y reflejan los datos reales de los usuarios de todo el mundo para el sitio web correspondiente.

Google califica las Core Web Vitals por separado, para escritorio y móvil

Mientras tanto, el analista de tendencias para webmasters de Google, John Mueller, hizo algunas adiciones a las Core Web Vitals, las Google Core Web Vitals se determinarían por separado para móviles y para ordenadores. 

Entonces, Google evalúa esto por separado. Para la página no hay efectos negativos en las clasificaciones en los resultados de búsqueda de escritorio. No obstante, es posible que para las clasificaciones en móviles, sí.

Largest Contentful Paint (LCP): ¿Qué tan rápido se carga mi página?

Largest Contentful Paint (LCP) mide el tiempo que pasa hasta que se carga el contenido más grande de una página. Pueden ser imágenes, bloques de texto o elementos con una imagen de fondo. Para el LCP, los tiempos de carga de hasta 2,5 segundos son buenos, 4 segundos necesita ser mejorada y cualquier cosa inferior a 4 segundos es pobre.

Google ha hecho todo lo posible para que la documentación sobre cada uno de las Core Web Vitals sea lo más detallada y clara posible.

Optimización para Largest Contentful Paint

• El servidor responde muy lentamente: Cuanto más tiempo necesite el navegador para recibir el contenido del servidor, más tardará la página en cargarse para el usuario. Por ello, Google recomienda utilizar un framework como React en lugar de un archivo HTML.

• Bloqueo de la renderización de JavaScript y CSS: Antes de que el navegador pueda realmente renderizar los elementos de contenido, es decir, visualizarlos para el usuario, el marcado HTML tiene que ser analizado en lo que se denomina Modelo de Objetos del Documento (DOM). El problema aquí, es que el analizador de HTML se detiene cada vez que hay que cargar hojas de estilo CSS o recursos JavaScript. Para eliminar este problema, Google recomienda minificar los archivos CSS o JavaScript.

• Recursos que se cargan con demasiada lentitud: las imágenes, los vídeos o los bloques de contenido suelen provocar que los recursos se carguen con demasiada lentitud. En este caso, Google recomienda reducir las imágenes al tamaño necesario.

• Client-Side Rendering: Client-Side Rendering, en el que las páginas web se renderizan en el navegador directamente con la ayuda de frameworks de JavaScript como React o Angular, es un medio eficaz para asegurar que el LCP cargue más rápido para el usuario.

First Input Delay (FID): ¿Cuándo puede el usuario interactuar con una página?

First Input Delay (FID) mide el tiempo que transcurre desde que un usuario interactúa por primera vez con un sitio hasta que el navegador es capaz de responder a esa interacción. A menudo, los usuarios entran en un sitio web e inmediatamente hacen clic en un texto o en un botón sin esperar a que la página se cargue completamente. 

Para evitar que los usuarios se impacienten y vuelvan a abandonar la página porque el navegador no responde a su entrada, la métrica FID mide el retraso que se produce entre la entrada del usuario y la respuesta del navegador. 

Te puede interesar: Cómo la velocidad de carga de una página web afecta el SEO.

Según Google, cualquier valor inferior a 100 milisegundos es bueno, cualquier valor entre 100 y 300 milisegundos debe mejorarse, mientras que los valores de FID superiores a 300 milisegundos se consideran deficientes.

Optimización del retraso en la primera entrada

• Dividir las tareas largas: Por lo general, los retrasos se deben a la ejecución de JavaScript, lo que significa que los usuarios no pueden interactuar con el sitio web.

• Priorizar la interactividad: En otras palabras, dar prioridad al código que es esencial para la interactividad del sitio, lo que significa que se carga primero.

• Utilizar un Web Worker: Con un Web Worker, los archivos JavaScript pesados pueden ejecutarse en un hilo separado, lo que significa que el hilo principal no se bloquea.

• Reducción de los tiempos de ejecución de JavaScript: Todos los archivos JavaScript que se ejecutan cuando se carga un sitio web, deben ser examinados con el fin de aplazar los que no son esenciales.

Cumulative Layout Shift (CLS): Estabilidad visual en un sitio web

Cumulative Layout Shift (CLS) se refiere a la estabilidad visual durante la interactividad en un sitio web. Cuando el contenido se desplaza mientras se carga una página y el usuario ya está interactuando con el sitio, esto puede tener efectos indeseados.

Como parte de Core Web Vitals, la métrica desplazamiento acumulado del diseño se calcula de la siguiente manera:

Fracción de impacto x Fracción de distancia = Puntuación de cambio de diseño

La fracción de impacto es el porcentaje de la pantalla afectada por un desplazamiento, mientras que la fracción de distancia, describe el porcentaje de la altura de la ventana gráfica. El elemento de contenido se ha desplazado hacia abajo debido al desplazamiento de la disposición.

Optimización para el desplazamiento de diseño acumulativo

• Especifica el tamaño de las imágenes y los elementos de video: Especificar el tamaño exacto de las imágenes y los videos garantizará que no haya sorpresas desagradables para los usuarios. 

• Anuncios sin datos de altura/anchura: Según Google, los anuncios son una de las razones más comunes para el cambio de diseño en los sitios web. Esto se debe a que las redes publicitarias, incluyendo Google Ads, suelen utilizar formatos de anuncios dinámicos.

• Elementos de contenido dinámico: Los elementos como los boletines de noticias o los banners de ofertas especiales colocados como bloques en el contenido principal de una página pueden dar lugar a cambios de diseño.

• Fuentes web: La descarga y la representación de las fuentes web pueden provocar cambios en el diseño, por ejemplo, cuando la fuente de reserva se sustituye por la fuente web personalizada. 

Google está haciendo su parte, los SEO también deben dar un paso adelante

Las Core Web Vitals de Google se convertirán en las principales métricas de medición para la experiencia del usuario. Se lanzarán inicialmente con tres métricas principales para la carga, la interactividad del sitio y la estabilidad visual. 

Además, Core Web Vitals se fusionará con los factores de clasificación existentes, como la compatibilidad con los dispositivos móviles o HTTPS, para ofrecer el nuevo factor de clasificación de Google: experiencia de la página.

Para lograr una mayor transparencia en Core Web Vitals, Google ha publicado una documentación exhaustiva que ofrece a los webmasters, desarrolladores y a los especialistas en SEO toda la información que necesitan para comprender plenamente cómo se establecen los criterios individuales, qué elementos son cruciales y lo que es más importante, cómo se pueden optimizar los sitios web para las nuevas Core Web Vitals.

Te recomendamos que utilices Google Search Console para ejecutar una verificación adecuada en tus propios proyectos web y ver cómo se están desempeñando en el frente de Core Web Vitals. La mayoría de los sitios web tienen margen de mejora, ¡y Google nos ha proporcionado las herramientas que necesitamos para hacerlo! 

Con la documentación detallada de Google y los consejos de optimización para Core Web Vitals junto con herramientas de análisis como Lighthouse, podrás aprovechar al máximo el tiempo mientras esperas que se lance el nuevo factor de clasificación de Page Experience.

Traducido y adaptado de Searchmetrics Blog

Contáctanos si estás interesado en posicionar orgánicamente a tu empresa en Google. En Capybara SEO podemos ayudarte con diferentes estrategias y herramientas.