Medir las Core Web Vitals en aplicaciones React
Utilice Lighthouse, WebPageTest y la biblioteca web-vitals para recopilar las puntuaciones de LCP, INP y CLS.
Medir las Core Web Vitals en aplicaciones React es una lección gratuita de React 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son métricas de experiencia de usuario de Google que afectan al posicionamiento SEO: LCP (Largest Contentful Paint, carga), INP (Interaction to Next Paint, capacidad de respuesta) y CLS (Cumulative Layout Shift, estabilidad visual).
Umbrales adecuados
Valores objetivo: LCP ≤ 2.5s, INP ≤ 200ms y CLS ≤ 0.1. Los valores que superan el umbral de rendimiento deficiente (LCP > 4s, INP > 500ms y CLS > 0.25) perjudican considerablemente la experiencia de usuario y el SEO.
Biblioteca web-vitals
El paquete npm web-vitals mide las CWV en navegadores reales mediante una API sencilla.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Envío de métricas a analíticas
Envíe las métricas a su endpoint de analíticas para realizar un monitoreo de usuarios reales (RUM); Lighthouse mide el rendimiento en laboratorio, pero el RUM muestra la experiencia de los usuarios reales.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Métricas integradas de Next.js
Next.js instrumenta automáticamente las Core Web Vitals. Exporte una función reportWebVitals desde _app.js (Pages) o utilice la compatibilidad integrada del App Router.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse en Chrome DevTools
Ejecute una auditoría de Lighthouse en Chrome DevTools (pestaña Lighthouse) para obtener mediciones de CWV en laboratorio. Utilice el modo Incognito para evitar interferencias de las extensiones y aplique una limitación de red para simular un dispositivo móvil.
WebPageTest
WebPageTest.org proporciona gráficos de cascada detallados, captura de vídeo y mediciones de CWV desde dispositivos reales en distintas ubicaciones geográficas; es más realista que ejecutar Lighthouse localmente.
Chrome User Experience Report (CrUX)
El conjunto de datos CrUX de Google agrega datos de CWV de usuarios reales para millones de sitios web. Puede acceder a él mediante Google Search Console, PageSpeed Insights o la API de CrUX.
PerformanceObserver para LCP
Utilice la API nativa PerformanceObserver para observar las entradas de LCP y comprender qué elemento corresponde al Largest Contentful Paint.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Depuración de CLS
Utilice Layout Shift Regions de Chrome DevTools (en el panel Rendering) para resaltar con superposiciones rojas los elementos que provocan cambios de diseño.
Datos de atribución
La biblioteca web-vitals proporciona datos de atribución que identifican qué causó la métrica deficiente: el elemento de LCP, la interacción de INP o el elemento que provoca el CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Comprobación rápida
¿Qué Core Web Vital mide la capacidad de respuesta, específicamente la rapidez con la que la página responde a las interacciones del usuario?
Repaso
Mida las CWV con la biblioteca web-vitals o Lighthouse. Envíe las métricas a sus analíticas para monitorear a los usuarios reales. Establezca como objetivo LCP ≤ 2.5s, INP ≤ 200ms y CLS ≤ 0.1. Utilice los datos de atribución para identificar los elementos o las interacciones específicos que provocan puntuaciones deficientes.
Preguntas frecuentes
¿La lección «Medir las Core Web Vitals en aplicaciones React» es gratis?
Sí — el texto completo de «Medir las Core Web Vitals en aplicaciones React» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Medir las Core Web Vitals en aplicaciones React»?
Utilice Lighthouse, WebPageTest y la biblioteca web-vitals para recopilar las puntuaciones de LCP, INP y CLS. Practicas React 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 React Academy?
No se requiere experiencia previa. React 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 «Medir las Core Web Vitals en aplicaciones React»?
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 React Academy?
Sí. Cada lección de React 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
- Medir las Core Web Vitals en aplicaciones React
- Análisis del bundle y estrategia de división de código
- Optimización de imágenes y fuentes en React
- Reducir INP: optimización de event handlers