Core Web Vitals: LCP FID CLS
Comprenda qué miden Largest Contentful Paint, First Input Delay y Cumulative Layout Shift, y por qué Google los utiliza como señales de clasificación.
Core Web Vitals: LCP FID CLS es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Por qué importa el rendimiento
Las páginas lentas hacen que los usuarios se vayan. Google convirtió el rendimiento en una señal de clasificación: los sitios con puntuaciones deficientes en Core Web Vitals aparecen más abajo en los resultados de búsqueda. Más allá del SEO, cada retraso de 100 ms reduce de forma medible la conversión y la interacción.
Las tres métricas principales de Core Web Vitals
Google mide tres métricas de experiencia del usuario: LCP (velocidad de carga), FID (interactividad) y CLS (estabilidad visual). Cada una tiene los umbrales «Bueno», «Necesita mejoras» y «Deficiente».
Largest Contentful Paint (LCP)
LCP mide cuándo termina de renderizarse el elemento de contenido visible más grande (imagen, póster de vídeo o bloque de texto). Bueno: menos de 2,5 s. Deficiente: más de 4 s. Optimícelo precargando las imágenes principales, reduciendo los recursos que bloquean el renderizado y utilizando una CDN rápida.
First Input Delay (FID) e INP
FID mide el retraso entre la primera interacción del usuario (clic o toque) y la respuesta del navegador. Bueno: menos de 100 ms. En 2024, FID fue reemplazado por Interaction to Next Paint (INP), que mide todas las interacciones, no solo la primera.
Cambio de diseño acumulado (CLS)
CLS mide los cambios inesperados en el diseño durante la carga de la página. Bueno: menos de 0,1. Deficiente: más de 0,25. Puede deberse a imágenes sin dimensiones, fuentes que se cargan tarde y anuncios insertados después del primer renderizado.
Medición de las CWV en el navegador
Utilice el paquete npm web-vitals para recopilar métricas de usuarios reales y enviarlas a su endpoint de analítica.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Cómo corregir el LCP: precargar la imagen principal
Indique al navegador que descargue la imagen principal cuanto antes, antes de analizar el resto del HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Cómo corregir el CLS: reservar espacio
Establezca siempre width y height en las imágenes y los elementos embed para que el navegador reserve espacio antes de que llegue el recurso. Utilice CSS aspect-ratio para los contenedores adaptables.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Cómo corregir el INP: dividir las tareas largas
Las tareas largas de JavaScript bloquean el hilo principal y retrasan la respuesta a los clics. Divida el trabajo en bloques con scheduler.yield() o setTimeout para que el navegador pueda renderizar y responder a las entradas.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Datos de laboratorio frente a datos de campo
Los datos de laboratorio (Lighthouse) son una prueba sintética realizada en un entorno controlado. Los datos de campo (CrUX, RUM) se recopilan de usuarios reales en dispositivos reales. Los datos de campo son la referencia definitiva para el posicionamiento SEO.
Presupuestos de rendimiento
Establezca límites explícitos: por ejemplo, LCP inferior a 2 s y bundle de JavaScript inferior a 200 KB. Haga que se cumplan en CI con Lighthouse CI o @bundle-analyzer para que las compilaciones que empeoren el rendimiento fallen.
Comprobación rápida
¿Qué Core Web Vital mide los saltos visuales inesperados durante la carga de una página?
Resumen: Core Web Vitals
LCP: velocidad de carga del elemento más grande; objetivo: menos de 2,5 s. INP (antes FID): capacidad de respuesta; objetivo: menos de 200 ms. CLS: estabilidad visual; objetivo: menos de 0,1. Mida estos valores con el paquete web-vitals en producción y utilice Lighthouse en CI. El SEO se basa en los datos de campo, no en los de laboratorio.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Core Web Vitals: LCP FID CLS» es gratis?
Sí — el texto completo de «Core Web Vitals: LCP FID CLS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Core Web Vitals: LCP FID CLS»?
Comprenda qué miden Largest Contentful Paint, First Input Delay y Cumulative Layout Shift, y por qué Google los utiliza como señales de clasificación. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Core Web Vitals: LCP FID CLS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Core Web Vitals: LCP FID CLS
- Auditorías y puntuación de Lighthouse
- Optimización de imágenes: carga diferida y formato WebP
- División de código y rutas diferidas