Core Web Vitals traduce parte de la experiencia real en tres señales: carga principal, respuesta a la interacción y estabilidad visual. El objetivo no es decorar un reporte, sino retirar fricción de una tarea concreta.
Diagnostica con datos de campo en el percentil 75, identifica la plantilla que concentra el problema y corrige primero la causa dominante. LCP, INP y CLS se optimizan de forma distinta.
Ver índice del artículo
1. Lee cada señal como una experiencia distinta
Los umbrales “buenos” recomendados por Google, evaluados en el percentil 75, son LCP hasta 2,5 s, INP hasta 200 ms y CLS hasta 0,1. Son referencias de experiencia, no garantías de posicionamiento ni conversión.
| Señal | Qué representa | Causa frecuente |
|---|---|---|
| LCP | Cuándo aparece el elemento principal visible | Hero pesado, respuesta lenta, CSS bloqueante o prioridad incorrecta |
| INP | Qué tan pronto responde la página a una interacción | JavaScript largo, listeners costosos o trabajo excesivo en el hilo principal |
| CLS | Cuánto se mueve el contenido sin que la persona lo espere | Medios sin dimensiones, fuentes tardías o componentes insertados arriba |
2. Separa datos de campo de pruebas de laboratorio
CrUX y Search Console resumen experiencias reales cuando existe muestra suficiente. Lighthouse reproduce una prueba controlada útil para depurar. Si discrepan, no elijas el resultado más cómodo: pregunta qué población, dispositivo, red y periodo representa cada fuente.
Revisa percentil 75, móvil/escritorio y grupo de URL.
Inspecciona waterfall, long tasks, fuentes y layout shifts.
Cruza severidad con tráfico, intención y función comercial.
3. Para LCP, prioriza el recurso correcto
Identifica primero el elemento LCP. Si es la imagen hero, entrégala en dimensiones cercanas al viewport, usa un formato eficiente, declara width y height, evita lazy-load y permite que el navegador la descubra temprano.
Imagen herosrcset y sizes correctos; fetchpriority="high" solo cuando realmente sea el LCP.Respuesta inicialReduce TTFB con caché, CDN o trabajo de servidor cuando corresponda.CSS críticoEvita cadenas bloqueantes y estilos duplicados.FuentesPrecarga solo familias/pesos necesarios y configura fallback compatible.
4. Para INP y CLS, corrige comportamiento
INP suele exigir dividir tareas largas, reducir JavaScript y posponer trabajo no crítico. CLS requiere reservar espacio y controlar inserciones. Ninguno se resuelve comprimiendo la misma imagen una vez más si la causa está en otro lugar.
- Perfila la interacción lenta y localiza la tarea que bloquea.
- Carga terceros después de consentimiento o necesidad real.
- Reserva proporción para imágenes, video, embeds y anuncios.
- Evita insertar banners sobre contenido ya visible.
Perfila la interacción lenta y localiza la tarea que bloquea.5. Convierte la mejora en un presupuesto de rendimiento
Define límites por plantilla: peso de hero, JavaScript inicial, número de fuentes y terceros permitidos. Ejecuta la verificación en cada cambio relevante y vuelve a mirar datos de campo tras el periodo de agregación.
