Core Web Vitals
Core Web Vitals son un conjunto de métricas específicas que Google considera importantes para la experiencia de usuario. Son parte de las señales de experiencia de página usadas para ranking.
LCP - Largest Contentful Paint
Mide el rendimiento de carga: cuánto tarda en mostrarse el elemento más grande.
<2.5s
Bueno
2.5-4s
Necesita mejora
>4s
Malo
// Improve LCP
// 1. Optimize images
import Image from 'next/image';
<Image
src="/hero.jpg"
priority // Preload above-fold images
sizes="100vw"
/>
// 2. Preload critical resources
<link rel="preload" href="/fonts/main.woff2" as="font" />
// 3. Use CDN for static assets
// 4. Minimize render-blocking resources
// 5. Server-side render critical contentINP - Interaction to Next Paint
Mide la respuesta: qué tan rápido responde la página a interacciones (reemplazó a FID en 2024).
<200ms
Bueno
200-500ms
Necesita mejora
>500ms
Malo
// Improve INP
// 1. Break up long tasks
// Bad - blocks main thread
function processData(items) {
items.forEach(item => heavyComputation(item));
}
// Good - yield to main thread
async function processData(items) {
for (const item of items) {
heavyComputation(item);
await scheduler.yield(); // Let browser handle events
}
}
// 2. Use web workers for heavy computation
const worker = new Worker('worker.js');
worker.postMessage(data);
// 3. Debounce/throttle event handlers
// 4. Use CSS for animations instead of JS
// 5. Minimize JavaScript execution timeCLS - Cumulative Layout Shift
Mide la estabilidad visual: cuánto se mueve el contenido durante la carga.
<0.1
Bueno
0.1-0.25
Necesita mejora
>0.25
Malo
// Prevent CLS
// 1. Always set dimensions on images/videos
<Image
src="/photo.jpg"
width={800}
height={600}
alt="Description"
/>
// 2. Reserve space for dynamic content
.ad-container {
min-height: 250px; /* Reserve space for ad */
}
// 3. Use CSS aspect-ratio
.video-container {
aspect-ratio: 16 / 9;
}
// 4. Avoid inserting content above existing content
// 5. Use transform for animations instead of layout properties
// 6. Preload fonts to avoid FOUT/FOITMedición de Core Web Vitals
- PageSpeed Insights: Datos de laboratorio y de campo
- Chrome DevTools: Panel de rendimiento
- Search Console: Informe de Core Web Vitals
- web-vitals library: Medición en JavaScript
- Lighthouse: Auditorías automáticas
// Measure with web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
// Send to analytics
function sendToAnalytics(metric) {
gtag('event', metric.name, {
value: Math.round(metric.value),
metric_id: metric.id,
});
}