RENDIMIENTO Y SEGURIDADTécnica

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

Qué son los Core Web Vitals (LCP, INP y CLS), qué valores se consideran buenos, cómo medirlos y qué cambios concretos mejoran la velocidad de tu web.

Por Pixie Estudio21 de septiembre de 20265 min de lectura

Los Core Web Vitals son tres métricas que Google usa para describir la experiencia real de quienes visitan una página: qué tan rápido se ve el contenido principal, qué tan rápido responde a la interacción y qué tan estable es el diseño mientras carga. Forman parte de las señales de experiencia de página y, más allá del buscador, correlacionan con algo que se nota: sitios rápidos y estables retienen mejor a la gente.

Esta guía técnica explica cada métrica, sus umbrales, cómo medirlas y qué acciones mejoran cada una. La documentación de referencia está en web.dev (en inglés).

Las tres métricas

Métrica	Qué mide	Valor "bueno"
LCP (Largest Contentful Paint)	Cuánto tarda en verse el elemento de contenido más grande	2,5 segundos o menos
INP (Interaction to Next Paint)	Qué tan rápido responde la página a clics, toques y teclas	200 milisegundos o menos
CLS (Cumulative Layout Shift)	Cuánto se "mueve" el diseño mientras carga	0,1 o menos

Estos umbrales se evalúan sobre el percentil 75 de las visitas reales: para que una página se considere buena, tres de cada cuatro visitas tienen que cumplirlos. Los detalles de cada una están en las guías de LCP, INP y CLS.

Datos de laboratorio y datos de campo

Datos de laboratorio: una prueba controlada (por ejemplo, Lighthouse o PageSpeed Insights). Sirven para depurar, porque son repetibles.
Datos de campo: mediciones de visitantes reales, agregadas. Son los que cuentan para evaluar la experiencia. Search Console los muestra en su informe de Core Web Vitals para tu sitio (mirá cómo conectarlo en la guía de Google Search Console).

Una página puede verse perfecta en laboratorio y tener mal campo (dispositivos más lentos, redes peores). Guiate por el campo y usá el laboratorio para encontrar el porqué.

Cómo mejorar el LCP

El LCP suele ser una imagen grande o un bloque de texto grande de la parte superior. Las causas típicas y sus arreglos:

Respuesta del servidor lenta. Reducí el tiempo de respuesta con buen hosting, caché y una red de entrega de contenido (CDN).
Imagen principal pesada. Comprimila, usá formatos modernos (WebP o AVIF) y servila en el tamaño que se muestra, no en uno mayor.
La imagen del LCP carga tarde. No la cargues de forma diferida (lazy): ese atributo es para lo que está debajo del pliegue. Podés darle prioridad de carga.
Recursos que bloquean el dibujado. Estilos y scripts pesados en el <head> retrasan todo. Dejá solo lo crítico y cargá el resto después.
Fuentes que tardan. Usá pocas variantes, precargá la principal y definí un comportamiento de sustitución mientras carga.

Cómo mejorar el INP

El INP mide la latencia de las interacciones: cuánto pasa desde que tocás algo hasta que la pantalla responde. Casi siempre el problema es JavaScript en el hilo principal:

Reducí el JavaScript que se carga y se ejecuta: quitá librerías que no usás.
Dividí las tareas largas: cualquier tarea de más de 50 ms puede volver la página torpe. Partilas para que el navegador pueda responder entre medias.
Cargá scripts de terceros con criterio (chats, pixeles, mapas): cada uno suma trabajo. Evaluá si todos hacen falta y cargalos diferidos.
Evitá cambios de diseño costosos al interactuar, como recalcular grandes partes de la página.

Cómo mejorar el CLS

El CLS penaliza que el contenido salte mientras carga y te haga tocar lo que no querías. Los arreglos más efectivos:

Poné width y height (o aspect-ratio) en todas las imágenes y videos, para que el navegador reserve el espacio antes de que carguen.
Reservá espacio para anuncios, banners y embebidos.
No insertes contenido por encima de lo que el usuario ya está leyendo (por ejemplo, avisos que empujan el texto).
Cuidá las fuentes: un cambio brusco de tipografía al cargar puede mover el texto.
Animá con transform en lugar de propiedades que cambian el tamaño o la posición en el flujo.

Un plan de trabajo razonable

Medí con PageSpeed Insights la página más importante (normalmente la de inicio) y con Search Console el conjunto del sitio.
Identificá la métrica que falla y su causa principal.
Cambiá una cosa por vez y volvé a medir.
Priorizá lo que mejora más con menos esfuerzo: en la práctica, suele ser optimizar imágenes y quitar scripts innecesarios.
Repetí periódicamente. Cada plugin, banner o herramienta que se agrega puede empeorar el resultado.

Errores frecuentes

Optimizar solo para el puntaje de laboratorio e ignorar los datos de campo.
Cargar todas las imágenes en diferido, incluida la principal.
Sumar plugins y scripts sin medir el costo de cada uno.
Subir imágenes de varios megas y dejar que el navegador las reduzca.
No probar en un celular real con conexión promedio.

Preguntas frecuentes

¿Los Core Web Vitals garantizan un mejor posicionamiento?

No. Son una señal entre muchas y no reemplazan un buen contenido. Pero una web lenta o inestable pierde visitas y consultas aunque el buscador no la penalice.

¿Con qué frecuencia cambian los datos?

Los datos de campo se acumulan sobre varias semanas, así que las mejoras tardan en reflejarse.

¿Cuánto cuesta mejorar la velocidad?

Depende del punto de partida. Muchas veces se resuelve con optimización de imágenes y una revisión de scripts; otras requieren cambios más profundos.

Cómo seguir

Si querés que midamos tu sitio y te digamos qué corregir primero, mirá nuestra puesta a punto de tu web o escribinos. Y si tu sitio es una tienda, la optimización de e-commerce suma el análisis del camino de compra.