Qué miden LCP, INP y CLS, los umbrales de bueno y malo, datos de campo frente a datos de laboratorio, un medidor en vivo para esta página y 25 recetas de solución con código agrupadas por causa, además de notas por plataforma.
Las Core Web Vitals son tres mediciones de visitas reales: Largest Contentful Paint (carga, buena con 2.5 segundos o menos), Interaction to Next Paint (capacidad de respuesta, buena con 200 milisegundos o menos) y Cumulative Layout Shift (estabilidad, buena con 0.1 o menos). Una página aprueba cuando al menos el 75% de las visitas cumplen las tres.
Puntuaciones buenas
El medidor de abajo mide esta página en tu propio navegador mientras la usas. Luego busca la métrica que suspendes y sigue sus recetas; cada una indica la causa que corrige e incluye el código.
Interaction to Next Paint sustituyó a First Input Delay como Core Web Vital en marzo de 2024. INP tiene en cuenta todas las interacciones de una página, no solo la primera, e incluye el tiempo hasta pintar el resultado.
Lighthouse es una única prueba en un único dispositivo simulado. Las Core Web Vitals usan visitantes reales durante 28 días, con teléfonos y redes más lentos, e incluyen INP, que Lighthouse no puede medir.
Forman parte de las señales de experiencia en la página de Google. Google describe la relevancia y la calidad del contenido como mucho más importantes, así que unas buenas métricas ayudan sobre todo cuando las páginas son por lo demás similares.
Los datos de campo cubren los 28 días anteriores, así que las mejoras aparecen de forma gradual durante unas cuatro semanas después de publicar.
Umbrales (evaluados en el percentil 75 de las visitas reales)
Datos de campo frente a datos de laboratorio
fetchpriority="high" le dice al navegador que esta imagen es la más importante. Nunca apliques carga diferida a la imagen del LCP.
Las imágenes de fondo se descubren tarde, después de cargar el CSS. Un preload en el head inicia la descarga de inmediato.
srcset y sizes permiten que un teléfono descargue un archivo pequeño en lugar del de escritorio.
AVIF y WebP suelen pesar mucho menos que JPEG con la misma calidad. picture permite que los navegadores antiguos usen una alternativa.
font-display: swap muestra al instante el texto con la fuente alternativa, así que un título que es el elemento del LCP no espera a que se descargue una fuente.
preconnect hace por adelantado el DNS, el TCP y el handshake TLS con un origen de terceros que vas a necesitar.
Los scripts del head sin defer ni async bloquean el renderizado. defer mantiene el orden, pero espera a que se analice el HTML.
Si el elemento del LCP lo crea JavaScript, no se puede pintar nada hasta que el bundle se descarga y se ejecuta. El renderizado en servidor o el prerenderizado lo incluyen en la primera respuesta. Consulta las opciones en nuestra guía de SEO para aplicaciones de una sola página.
Una respuesta lenta del servidor lo retrasa todo. Guarda en caché las páginas estáticas en una CDN y define un Cache-Control razonable.
Una tarea de más de 50 ms bloquea la entrada. Cede el hilo principal entre fragmentos para que un clic se pueda atender entre medias. scheduler.yield es más reciente; la alternativa con setTimeout funciona en todas partes.
Actualiza el botón enseguida y haz el trabajo pesado después de que el navegador haya podido pintar.
Filtrar una lista larga con cada pulsación hace que escribir vaya con retraso. Espera a una breve pausa.
startTransition permite a React mantener el campo de entrada ágil y renderizar el resultado costoso cuando pueda.
Los widgets de chat y los gestores de etiquetas suelen ejecutar código pesado al cargar. Cárgalos cuando la página esté inactiva o en la primera interacción.
Las páginas enormes hacen más lenta cada actualización de estilos y de layout. content-visibility omite el renderizado de las secciones fuera de pantalla hasta que están cerca.
Leer offsetHeight después de cada cambio de estilo fuerza un layout cada vez. Lee todo primero y luego escribe.
Analizar un archivo grande u ordenar miles de filas puede hacerse en un worker sin bloquear los clics.
width y height permiten al navegador reservar el espacio antes de que llegue el archivo. CSS puede seguir haciéndolos adaptables.
Los mapas, vídeos e iframes suelen cargar tarde. aspect-ratio mantiene su caja abierta.
El contenido insertado encima de lo que se está leyendo lo empuja hacia abajo. Dale al hueco una altura mínima de antemano.
Cuando entra la fuente web, el texto puede volver a partirse en líneas distintas. size-adjust en una fuente alternativa local acerca el ancho de las dos.
Mover cosas con transform no desplaza otros elementos, así que no cuenta como cambio de diseño.
Una barra fija en la parte inferior de la pantalla no mueve la página; una insertada arriba sí.
Un marcador de carga debe ocupar el mismo espacio que lo que lo sustituye.
Las páginas restauradas desde la caché de atrás/adelante aparecen al instante sin nuevos desplazamientos. Un manejador unload lo impide; usa pagehide en su lugar.
Notas por plataforma
Las imágenes suelen ser las culpables del LCP; redúcelas con el
Medidor en vivo de esta página
Mide el LCP, el CLS y el INP de esta página en tu navegador, donde haya soporte.
Bueno
Necesita mejorar
Malo
No compatible con este navegador
INP (el más lento hasta ahora)
Esperando el mayor pintado
Haz clic o escribe en cualquier sitio para medir
Empieza gratis · Sin tarjeta de crédito