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. |
| 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.