En junio de 2021 Google incorporó los Core Web Vitals a su conjunto de métricas para determinar el ranking de los sitios web en sus resultados de búsqueda. Esto significa que el rendimiento de tu sitio ahora impacta directamente en tu optimización para motores de búsqueda (SEO) (y en tu negocio).

Pero entonces, ¿qué son los Core Web Vitals y qué podés hacer para mejorar las puntuaciones de tu sitio?

En pocas palabras, los Core Web Vitals son un conjunto de métricas que miden parte de la experiencia del usuario. Cada uno de los tres componentes de los Core Web Vitals representa un aspecto distinto de la experiencia del usuario: carga, interactividad y estabilidad visual.

Despliegue del contenido más extenso

La métrica llamada despliegue del contenido más extenso (Largest Contentful Paint, LCP) mide el tiempo de renderización del elemento más grande visible dentro de la ventana de visualización (el tamaño de la pantalla de los usuarios). Los tipos de elementos que se consideran son:

• <img>;

• elementos <image> dentro de un elemento <svg>;

• <video>;

• un elemento con una imagen de segundo plano que se carga a través de la función

  url();

• elementos a nivel de bloque que contienen nodos de texto u otros elementos secundarios de texto con estilos integrados en el código.

El tamaño de los elementos en general es el tamaño visible para el usuario dentro de la ventana de visualización. Para los elementos de imagen a los que se les haya modificado su tamaño intrínseco (el tamaño basado en su contenido sin factores externos), el tamaño que se informa puede ser el tamaño visible o el tamaño intrínseco, el que sea menor.

Demora de la primera entrada

La métrica llamada demora de la primera entrada (First Input Delay, FID) mide el tiempo desde que el usuario interactúa por primera vez con una página, por ejemplo, al hacer clic en un enlace, hasta el momento en que el navegador puede procesar los eventos y responder a esa interacción.

Las grandes demoras de entrada ocurren cuando el subproceso principal del navegador está ocupado haciendo otras tareas y no puede responder a las interacciones del usuario. Si esto ocurre, es posible que el usuario se frustre y opte por alternativas con mejor tiempo de respuesta. De acuerdo con Google, deberías aspirar a tener una FID inferior a 100 milisegundos.

Cambio acumulativo del diseño

La métrica llamada cambio acumulativo del diseño (Cumulative Layout Shift, CLS) mide la estabilidad total del diseño de tu sitio. ¿Alguna vez has estado a punto de hacer clic en un enlace y de repente el contenido cambia y terminás haciendo clic en un cartel para nada sospechoso que dice “iPad gratis”? Bueno, no sos la única persona a la que le ha pasado esto.

El CLS es una medida de la ráfaga más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que se produce durante toda la vida útil de una página. Para evitar estos cambios de diseño inesperados, probá con lo siguiente:

• Evitá agregar modelos de objeto de documento (elementos DOM) de forma dinámica a la página.

• Evitá tener elementos como imágenes o videos de dimensiones desconocidas.

• Utilizá fuentes alternativas de un tamaño similar al de tu fuente principal.

De acuerdo con Google, deberías aspirar a tener un CLS inferior a 0,1.

Cómo medir los Core Web Vitals de tu sitio web

Google cuenta con distintas herramientas para medir el rendimiento de tu sitio:

Google Lighthouse y Page Speed Insights te ayudarán a auditar tu sitio en función de cinco áreas clave: rendimiento, mejores prácticas, accesibilidad, SEO y aplicaciones web progresivas (PWA).

El informe de experiencia de usuario de Chrome recopila datos anónimos de usuarios reales para cada Core Web Vital. Una vez al mes recibirás un informe sobre cómo es la experiencia que tus usuarios realmente están teniendo con tu sitio web.

Además, si usás Vercel para alojar y “deployar” (lanzar) tus proyectos, podés recurrir a su (increíble) panel de análisis y obtener datos de usuarios reales en tiempo real para conocer el rendimiento de tu sitio web. Un aplauso para la gente amiga de Vercel. ♥️

Cómo mejorar tus puntuaciones de los Core Web Vitals

Una vez que hayas medido e identificado las áreas para mejorar, podés empezar a trabajar en subir las puntuaciones de los Core Web Vitals. Esto te ayudará a tener una clasificación superior a la de tus competidores.

A continuación te dejo algunas recomendaciones para optimizar tu sitio en función de cada Core Web Vital:

• Renderizá todo el contenido que puedas del lado del servidor: al renderizar archivos HTML del lado del servidor en vez de hacerlo del lado del cliente, tu sitio les mostrará contenido valioso a los usuarios con rapidez, lo que tendrá un impacto positivo en tu puntuación del LCP. Además, Google podrá rastrear e indexar tus páginas con mayor velocidad y esto también mejorará tu puntuación de SEO.

• Optimizá tus imágenes: hay muchas formas de optimizar tus imágenes para mejorar las puntuaciones de tu sitio en los Core Web Vitals, como la carga diferida de imágenes mientras estas son visibles para el usuario, el uso de formatos de imágenes modernos (AVIF, WebP) y de imágenes de tamaño correcto para distintos tamaños de ventanas de visualización, y el establecimiento de placeholders “blurreados”.

• Hacé solicitudes a terceros con anticipación: si estás usando bibliotecas de terceros para mostrar contenido clave, una respuesta lenta del servidor también puede afectar tu puntuación de LCP. Usá rel="preconnect" para informarle al navegador que la página necesita descargar ese recurso lo antes posible.

• Dividí las tareas largas en tareas más pequeñas y asincrónicas cuando sea posible: las tareas largas son períodos de ejecución de JavaScript en los que los usuarios pueden no obtener respuesta de la interfaz de usuario (UI). En consecuencia, esto puede perjudicar tu puntuación de FID (además de hacer enojar a los usuarios). La división de tareas largas puede reducir la demora de entrada a tu sitio.

• Incluí dimensiones en tus imágenes y evitá inyectar contenido de forma dinámica: las imágenes sin dimensiones y el contenido agregado de forma dinámica pueden ocasionar cambios de diseño al cargar el recurso, lo que afecta tu puntuación de CLS.

En Indicius adoptamos un enfoque que prioriza el rendimiento cuando desarrollamos proyectos, y medimos constantemente nuestras puntuaciones para seguir mejorando la experiencia de nuestros usuarios. Además, trabajamos con herramientas como GatsbyJS y NextJS, que nos permiten crear sitios web ultrarrápidos. Si necesitás ayuda para optimizar tu sitio, ponete en contacto con nosotres. Estaremos más que felices de ayudarte.

Para obtener más información técnica y exhaustiva sobre los Core Web Vitals, consultá la documentación oficial de Google.