# Core Web Vitals

> Qué miden LCP, INP, CLS, FCP y TTFB, los umbrales de bueno y malo, cómo funcionan el percentil 75 y la evaluación, y los diagnósticos.

La monitorización de usuarios reales mide cinco métricas en los navegadores de tus visitantes con las API de rendimiento estándar de los navegadores. **LCP**, **INP** y **CLS** son las Core Web Vitals (Métricas web principales) que Google usa en el posicionamiento; **FCP** y **TTFB** ayudan a explicarlas.

## Métricas y umbrales

| Métrica | Mide | Buena | Mala |
|---|---|---|---|
| **LCP** — Largest Contentful Paint | Carga: cuándo aparece el contenido principal. | ≤ 2500 ms | > 4000 ms |
| **INP** — Interaction to Next Paint | Capacidad de respuesta: desde un toque, clic o pulsación de tecla hasta el siguiente fotograma. | ≤ 200 ms | > 500 ms |
| **CLS** — Cumulative Layout Shift | Estabilidad visual: cuánto salta el diseño. | ≤ 0,1 | > 0,25 |
| **FCP** — First Contentful Paint | Cuándo se pinta el primer texto o imagen. | ≤ 1800 ms | > 3000 ms |
| **TTFB** — Time to First Byte | Tiempo de respuesta del servidor y de la red. | ≤ 800 ms | > 1800 ms |

Los valores entre los dos umbrales son **mejorables**. Un valor justo en el umbral de bueno es bueno (un CLS de exactamente `0.1` es bueno).

## Vistas de página

- La unidad es la **vista de página**: una carga de una página en una pestaña del navegador. Una vista sin ninguna interacción no tiene INP.
- LCP, FCP y TTFB salen del primer envío de la vista; INP y CLS, del último, porque el navegador los va actualizando mientras la página sigue abierta.
- Una vista se atribuye a su **página de aterrizaje**. Las navegaciones en el cliente de las aplicaciones de una sola página (`history.pushState`) no inician una vista nueva, así que el INP, la peor interacción de toda la vista, se atribuye a la página donde empezó la visita. Es como miden los datos de campo de Chrome (CrUX) y PageSpeed Insights.
- No se mide el tráfico de laboratorio ni de automatización: navegadores sin interfaz, Lighthouse y PageSpeed Insights, WebPageTest, GTmetrix, Pingdom, Puppeteer, Playwright, Selenium y Cypress.

## Percentiles y valoraciones

- El valor principal de cada métrica es su **percentil 75 (p75)** sobre las vistas del periodo: el 75 % de las vistas fue al menos así de rápido. El informe también incluye p50 y p90.
- Cada métrica muestra cuántas vistas fueron buenas, mejorables o malas.
- **Visitas** estima las vistas reales a partir de las medidas: con un muestreo de `0.5`, cada vista medida cuenta como dos.
- Cada valor se compara con el **periodo anterior** de la misma duración.

## Evaluación de las Core Web Vitals

La evaluación queda **Superada** cuando el p75 de LCP, INP y CLS es bueno en los tres, y **No superada** en caso contrario. Sin datos de INP, deciden LCP y CLS. Sin datos de LCP o de CLS no hay evaluación.

## Diagnósticos

### Desglose del LCP

El LCP se divide en cuatro fases que suman aproximadamente el LCP:

| Fase | Qué es | Qué ayuda |
|---|---|---|
| Tiempo hasta el primer byte | Esperar al servidor. | Cachear el HTML en el borde, acelerar el origen. |
| Retraso de carga del recurso | Tiempo hasta que el navegador empieza a cargar el recurso LCP. | Que aparezca en el HTML, precargarlo con `fetchpriority="high"`, no ponerle lazy-loading, usar [Early Hints](https://developers.openwaf.dev/es/cache/early-hints/). |
| Duración de carga del recurso | Descargar el recurso. | Comprimir la imagen (AVIF, WebP), ajustarla a la pantalla, cachearla en el borde. |
| Retraso de renderizado del elemento | Desde que se carga hasta que se pinta. | Aplazar los scripts no críticos, incrustar el CSS crítico. |

El desglose compara las **vistas lentas** (LCP igual o superior al p75) con **todas las vistas**, para que veas qué hace lentas a las páginas lentas.

### Peores elementos

Para cada tipo, los elementos ordenados por las vistas malas que causaron, con sus vistas, su p75 y la página más frecuente:

| Tipo | Qué |
|---|---|
| Elementos LCP | El elemento que se pinta como LCP (un selector CSS como `main>section>img.hero`) y la URL del recurso LCP. |
| Interacciones (INP) | Los elementos cuyos toques, clics o pulsaciones obtuvieron las respuestas más lentas. |
| Scripts (LoAF) | Los scripts que se ejecutaron en los fotogramas de animación largos de las interacciones lentas. |
| Saltos de diseño (CLS) | Los elementos que más se movieron. |

### Desgloses

Cada métrica se puede dividir por página, país, dispositivo (`mobile`, `tablet`, `desktop`), tipo de conexión (`4g`, `3g`, `2g`, `slow-2g`, que solo informan los navegadores Chromium), tipo de navegación, host, tamaño de ventana y el nodo del borde que sirvió la visita, y mostrarse como p75 en el tiempo.