Core Web Vitals: qué son y cómo mejorarlas

Qué son las Core Web Vitals

Las Core Web Vitals, que Google traduce como métricas web esenciales, son indicadores que miden qué tan rápida y estable es la experiencia de una persona en tu página. Funcionan como un termómetro de la salud de tu sitio: si aprueban, la mayoría de tus visitas ve el contenido rápido, puede usarlo sin esperas y no se encuentra con elementos que saltan de lugar.

Lo importante es que se miden con visitas reales. Google toma los datos de navegación de usuarios de Chrome en tu sitio y los resume por página, por separado para celular y para escritorio. Por eso no basta con que tu sitio cargue bien en tu computador: lo que cuenta es lo que vive tu cliente con su teléfono y su conexión.

Por qué importan

• Posicionamiento. Google usa la experiencia de página como una de sus señales. Unas buenas métricas no reemplazan a un contenido que responde bien la búsqueda, pero entre dos páginas parecidas pueden inclinar la balanza.
• Ventas y contactos. Cuando un sitio carga lento, una parte de las personas se va antes de ver el producto o el formulario. No es solo un tema técnico: es una oportunidad de venta perdida.
• Confianza. Un sitio rápido y estable se siente profesional, reduce la frustración y hace más probable que la persona vuelva a comprar.

Las tres métricas y sus metas

Una página aprueba cuando al menos el 75 % de las visitas está en el rango «bueno» en las tres métricas.

LCP: el contenido principal

El LCP (Largest Contentful Paint) mide cuánto tarda en verse el elemento más grande y visible de la página: la foto principal de un producto, el banner de la portada, un video o un bloque de texto grande. Imagina a un cliente que entra a la ficha de un producto: el LCP es lo que espera hasta ver la imagen que necesita para decidir si le interesa.

INP: la respuesta a cada interacción

El INP (Interaction to Next Paint) mide cuánto se demora tu sitio en reaccionar cuando la persona hace algo: agrega un producto al carro, elige una talla, aplica un filtro o abre el menú. Con menos de 200 milisegundos, la respuesta se siente instantánea. Una respuesta lenta genera frustración justo en el momento decisivo de la compra.

El INP reemplazó al FID (First Input Delay) en marzo de 2024. Si encuentras una guía o una herramienta que todavía habla de FID, está desactualizada.

CLS: la estabilidad visual

El CLS (Cumulative Layout Shift) mide cuánto se desplazan los botones, imágenes y textos mientras la página termina de cargar. El ejemplo típico: vas a tocar «Comprar», justo aparece un banner arriba, todo baja y terminas tocando el anuncio. La meta es un valor de hasta 0,1.

Los problemas que más afectan a estas métricas

• Imágenes pesadas. Fotos en alta resolución sin optimizar, sobre todo en celulares con conexión lenta. Es la causa más común de un LCP alto.
• Exceso de plugins y scripts. El chat, los píxeles de medición, las ventanas emergentes y los botones de redes sociales suman código que el navegador tiene que procesar. Afectan al LCP y, en especial, al INP.
• Un hosting inadecuado. En WordPress tú eliges el servidor, y un hosting compartido de baja calidad hace más lento todo el sitio. En plataformas como Shopify el servidor viene incluido, así que rara vez es el problema.
• Ventanas emergentes y elementos que se superponen. Los popups que aparecen de inmediato o el botón de chat encima del botón «Agregar al carro» empeoran el CLS y la experiencia.
• Tipografías externas. Cuando una fuente llega tarde, el texto cambia de tamaño y mueve todo lo que está alrededor.

Cómo mejorar cada métrica

Para mejorar el LCP

1. Convierte las imágenes a WebP o AVIF y súbelas al tamaño en que se muestran, no al de la foto original.
2. Usa carga diferida (loading="lazy") para las imágenes que están más abajo en la página, de modo que se carguen recién cuando la persona hace scroll.
3. Prioriza el contenido principal. La imagen principal no debe llevar carga diferida: al contrario, conviene indicarle al navegador que la cargue primero (por ejemplo, con fetchpriority="high").
4. Mejora el servidor: un plan de mayor capacidad o un CDN, que guarda copias de tu sitio en servidores de distintas partes del mundo para entregarlo desde el más cercano a cada visita.

Para mejorar el INP

1. Instala solo los plugins y funcionalidades que de verdad uses. Cada efecto o integración agrega código.
2. Ordena los scripts de terceros, en especial los de medición. Cuando se crea una etiqueta distinta para cada botón, el código se multiplica. Es mejor una estructura que mida varios elementos con la misma etiqueta.
3. Prioriza los elementos interactivos importantes, como el carro, los filtros y el menú, y reduce el trabajo que el navegador tiene que hacer antes de responder.

Para mejorar el CLS

1. Define el ancho y el alto de cada imagen y video, para que el navegador reserve su espacio antes de que carguen.
2. Reserva el espacio de banners y anuncios, en vez de insertarlos encima del contenido.
3. Evita el contenido que aparece de forma dinámica, como ventanas emergentes inmediatas o barras que empujan la página hacia abajo.
4. Optimiza las tipografías: usa pocas fuentes y precárgalas. En este mismo sitio precargamos las dos tipografías para que el texto no cambie de tamaño al cargar.

Cómo medir las Core Web Vitals

Google ofrece dos herramientas gratuitas para hacer el seguimiento.

1. PageSpeed Insights

En pagespeed.web.dev pegas la dirección de una página y obtienes sus resultados en celular y en escritorio, con recomendaciones para cada métrica.

Aquí está la confusión más común. Con clientes me ha pasado muchas veces: PageSpeed Insights muestra dos evaluaciones distintas.

• Arriba, las métricas esenciales: son datos de campo, es decir, de visitas reales a tu página. Esta es la evaluación que importa para saber si apruebas.
• Abajo, el rendimiento (el puntaje en un círculo): es una prueba de laboratorio, una simulación con una velocidad de conexión y un dispositivo fijos. Sirve para encontrar problemas, pero no refleja necesariamente lo que viven tus usuarios.

Si tu página tiene pocas visitas, es posible que no aparezcan datos de campo. En ese caso, usa la prueba de laboratorio como guía.

2. Google Search Console

En la sección Experiencia, el informe de métricas web principales agrupa las páginas parecidas de tu sitio y te muestra cuáles están bien, cuáles necesitan mejorar y cuáles tienen problemas, con datos de usuarios reales. Es la forma de ver el sitio completo y no página por página.

Qué revisar en tu sitio

• En PageSpeed Insights, versión para celular, tu página de inicio y tus dos o tres páginas más visitadas aprueban las métricas esenciales (datos de campo).
• En Search Console, el informe de métricas web principales no muestra URLs con problemas, ni en celular ni en escritorio.
• La imagen principal de cada plantilla (portada, producto, artículo) está en WebP o AVIF, pesa poco y no lleva carga diferida.
• Todas las imágenes y videos tienen ancho y alto definidos.
• No hay ventanas emergentes que aparezcan apenas carga la página ni botones flotantes encima de los botones de compra.
• Los plugins y scripts instalados son solo los que usas, y las etiquetas de medición están ordenadas.
• Las tipografías son pocas y se precargan.

Errores comunes

• Obsesionarse con el puntaje de laboratorio. Llegar a 100 en el círculo de rendimiento no es el objetivo; aprobar los datos de campo, sí.
• Poner carga diferida en la imagen principal. Hace que el LCP empeore en vez de mejorar.
• Revisar solo el escritorio. La mayoría de las visitas suele llegar desde el celular, y ahí las métricas casi siempre son peores.
• Optimizar una sola vez. Un banner nuevo más pesado o un plugin recién instalado pueden hacer que una página que aprobaba deje de hacerlo.

Un proceso continuo

Las Core Web Vitals afectan tanto tu posicionamiento como tus conversiones, así que son un tema de negocio y no solo técnico. Y no se resuelven una vez: cada producto nuevo, cada cambio de imagen de portada y cada integración puede moverlas. Lo práctico es revisar el informe de Search Console cada mes y pasar por PageSpeed Insights cada vez que cambies algo importante en el sitio.

Tu próximo paso: abre PageSpeed Insights, analiza tu página más visitada en la versión para celular y anota cuál de las tres métricas está más lejos de la meta. Ahí está tu primera tarea.