El rendimiento y la velocidad de un sitio web tienen un impacto directo en cómo los usuarios experimentan nuestra página, desde qué tan rápido aparece el contenido hasta qué tan fluida es la interacción. Lo que conocemos como Core Web Vitals nos ayuda a medir estos aspectos tan importantes de nuestro sitio web, para así poder identificar qué áreas debemos mejorar.
¿Qué es Core Web Vitals?
Core Web Vitals es el nombre que reciben tres métricas o valores muy importantes que Google utiliza para evaluar cómo los usuarios experimentan una página web. En lugar de mirar solo la velocidad técnica, el enfoque se encuentra en tres aspectos: qué tan rápido el contenido más grande se vuelve visible, qué tan bien responde la página al interactuar con ella, y qué tan estable permanece visualmente luego de cargar.
Los tres Core Web Vitals que existen actualmente son: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). Cada una evalúa una parte diferente de la experiencia de usuario y tiene sus propios valores recomendados.
Estas mediciones están basadas en datos de uso real, es decir, pueden ser una indicación de cómo nuestros visitantes experimentan nuestro sitio web. Esto hace que sean especialmente útiles para identificar problemas de rendimiento que pueden pasar desapercibidos.
Por supuesto que las métricas de Core Web Vitals no son las únicas que se deben tener en cuenta a la hora de evaluar un sitio web, pero, como decíamos, nos ayudan a entender si nuestra web se siente rápida, si responde bien y si es estable.
Mejorar estos aspectos suele involucrar distintas áreas de trabajo, como por ejemplo el tiempo de respuesta del servidor, la optimización de imágenes, la ejecución del JavaScript, la caché y la estructura de la página.
Su importancia para el SEO y la experiencia de usuario
Los Core Web Vitals son muy importantes porque el rendimiento de un sitio afecta cómo los usuarios interactúan con él, así como también su posicionamiento en los resultados de los motores de búsqueda. Si un sitio tiene un contenido excelente pero es muy lento, las interacciones demoran y hay cambios inesperados en el diseño, su uso se puede volver frustrante.
Desde la perspectiva de la experiencia de usuario, un mal rendimiento puede interrumpir acciones básicas. Un usuario podría tener que esperar demasiado para que un elemento cargue, hacer clic en un botón podría dar una respuesta lenta o podría seleccionar un elemento equivocado porque se desplazó mientras la página terminaba de cargar. Todos estos problemas pueden hacer que usar una web se vuelva frustrante y que el visitante opte por abandonarla.
En lo que se refiere a SEO, Core Web Vitals también tiene importancia. Por supuesto, no es un reemplazo para el contenido de calidad ni para otros aspectos del SEO, pero no deja de ser un conjunto de métricas fuertes que Google tiene en cuenta a la hora de evaluar un sitio web.
Dicho de otra forma, mejorar estos aspectos de nuestro sitio web nos ayudará no solamente a mejorar la experiencia de usuario, sino también a mejorar nuestro SEO y así tener más chances de posicionar mejor en los resultados de búsqueda y atraer más tráfico orgánico.
Los tres Core Web Vitals explicados
Como decíamos, estos valores se enfocan en tres cosas distintas de nuestra web, y a continuación vamos a explicar con más detalle cada caso.
- Largest Contentful Paint (LCP): mide cuánto tiempo demora en hacerse visible el contenido más grande. Este suele ser una imagen, un banner o el encabezado principal de una página. Un LCP alto puede hacer que una página se sienta incompleta incluso si otros elementos más pequeños ya han cargado.
- Interaction to Next Paint (INP): se encarga de medir qué tan rápido una página responde visualmente cuando una persona interactúa con ella. Estas interacciones pueden incluir clics, toques en la pantalla o uso del teclado. Si la ejecución de JavaScript u otros procesos bloquea el navegador durante demasiado tiempo, la página se puede sentir lenta.
- Cumulative Layout Shift (CLS): mide el movimiento inesperado de elementos visibles mientras la página está cargando. Por ejemplo, un botón podría repentinamente moverse de lugar debido a la carga de otro elemento. Un puntaje alto de CLS suele ser indicador de que nuestra página podría ser frustrante de utilizar.
En conjunto, estos tres elementos nos dan una vista mucho más amplia de la performance de nuestro sitio, más allá de la típica velocidad de carga, permitiendo que podamos apreciar qué tan rápido, responsivo y visualmente estable es nuestro sitio web.
Cómo realizar una medición y explicación de los puntajes
La forma principal de medir los Core Web Vitals de nuestro sitio web o de una página en específico es mediante la herramienta PageSpeed Insights de Google. También es posible obtener un reporte generado en Google Search Console que incluya estas métricas. Lo ideal es usar ambas, ya que el reporte de Search Console está basado en información de uso real de usuarios reales.
Los desarrolladores también pueden utilizar otras herramientas como Chrome DevTools y Lighthouse, las cuales son especialmente útiles cuando queremos hacer una revisión de una página que aún no ha sido publicada o aún está en desarrollo.
Respecto a los valores que se pueden obtener en una medición, las recomendaciones de Google son las siguientes:
- LCP: se recomienda un valor de 2,5 segundos o menos. Valores de 2,5 a 4 indican que se debe mejorar, y valores superiores a 4 segundos se consideran directamente malos.
- INP: un valor menor a 200 milisegundos es el óptimo, mientras que de 200 a 500 milisegundos es síntoma de que hay que realizar mejoras. Un resultado por encima de 500 ms se considera malo.
- CLS: y para este caso debemos tratar de obtener un puntaje de 0.1 o menos. De 0.1 a 0.25 nos indica que debemos mejorar, y por encima de 0.25 es una mala puntuación.
Es importante dejar en claro que las pruebas no se deben ejecutar una sola vez; lo adecuado es ejecutarlas muchas veces y en distintos dispositivos y conexiones, de ser posible. No olvidemos además que el reporte de Search Console incluye datos de usuarios reales, lo cual lo vuelve muy valioso.
Cómo mejorar los Core Web Vitals
Como siempre decimos, este tipo de guías no se pueden aplicar directamente a cada sitio web, porque cada sitio es distinto y puede tener distintos aspectos para mejorar. Esto es simplemente una guía general que recomendamos adaptar a cada situación.
Para mejorar los Core Web Vitals debemos aplicar varios ajustes al sitio web; no hay un solo ajuste que permita llevar los tres parámetros a valores óptimos.
Para mejorar el LCP, debemos comenzar por reducir el tiempo que tarda en cargar el principal contenido visible. Puntualmente para las imágenes lo ideal es que estén optimizadas, tengan un formato moderno y sean distribuidas por una CDN. En general, se debe mejorar el tiempo de respuesta del servidor, usar caché y evitar la demora en la carga de recursos importantes. El contenido más crítico debe cargarse con mayor prioridad.
En el caso de INP, el objetivo es reducir la demora entre una acción del usuario y la respuesta visual del navegador. Las tareas de JavaScript suelen ser una causa común de una mala performance en este aspecto. Se recomienda quitar scripts innecesarios, dividir procesos largos, reducir el código de terceros y limitar las tareas pesadas que debe realizar el navegador.
Y finalmente tenemos a CLS, que para mejorarlo debemos reservar espacio para los elementos que demoran más en cargar. Imágenes, videos, anuncios y contenido incrustado deberían tener dimensiones o una relación de aspecto definida. Hay que evitar insertar contenido por encima de elementos ya visibles una vez que la página comenzó a renderizarse.
Problemas comunes
A la hora de lidiar con los Core Web Vitals existen algunos problemas que suelen darse en muchos casos.
- Imágenes grandes y no optimizadas: suelen ser uno de los principales responsables de tener un puntaje malo de LCP, especialmente cuando una imagen principal o un banner es más grande de lo necesario.
- Tiempo de respuesta lento: si el servidor responde lentamente, puede haber varios factores en juego, como recursos de hosting limitados, código ineficiente en la aplicación, consultas lentas en las bases de datos o falta de caché.
- JavaScript: el JS suele ser otro punto problemático. Paquetes grandes, demasiados scripts de terceros, herramientas de rastreo y frameworks complejos pueden mantener al navegador ocupado e incrementar el INP.
- Elementos sin dimensiones: en CLS a menudo surgen problemas cuando el navegador no sabe qué dimensiones tiene un recurso. Imágenes, anuncios, widgets incrustados, banners y contenidos insertados dinámicamente son ejemplos comunes de este problema.
Dadas las muchas áreas distintas que involucran a Core Web Vitals, es necesario atacar el problema desde distintos ángulos para poder obtener mejores puntuaciones.
Conclusión
Mejorar los Core Web Vitals no solo ayuda a que nuestro sitio sea más rápido y estable, sino también a ofrecer una mejor experiencia de usuario. Medirlos de forma periódica, detectar problemas concretos y aplicar mejoras nos permitirá mantener una web más optimizada y con más chances de posicionarse mejor en los buscadores.