Core Web Vitals Explicado

┌──────────────────────────────────────────────────────────────────┐
│                    Framework Core Web Vitals                     │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│   │      LCP        │  │      INP        │  │      CLS        │  │
│   │    Carga        │  │ Interactividad  │  │   Estabilidad   │  │
│   │                 │  │                 │  │                 │  │
│   │ "¿Qué tan       │  │ "¿Qué tan       │  │ "¿Los elementos │  │
│   │  rápido aparece │  │  rápido responde│  │  saltan por la  │  │
│   │  el contenido?" │  │  la página?"    │  │  pantalla?"     │  │
│   └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │
│            │                    │                    │           │
│            ▼                    ▼                    ▼           │
│   ┌─────────────────────────────────────────────────────────────┐│
│   │              Factor de Ranking Google                       ││
│   │       (Señal de Experiencia de Página desde May 2021)       ││
│   └─────────────────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────────────┘

<!-- Imagen hero (candidato típico de LCP) -->
<img src="hero.jpg" alt="Escaparate del producto">

<!-- Sección hero con background -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h1>Bienvenido a Nuestra Tienda</h1>
</div>

<!-- Poster de video -->
<video poster="video-preview.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Sesión de Página:
  Clic #1: 120ms latencia
  Clic #2: 80ms latencia
  Clic #3: 450ms latencia ← Mayor interacción
  Toque #4: 95ms latencia

INP = 450ms (o percentil 99 para alta cuenta de interacciones)

Fracción de Impacto × Fracción de Distancia = Puntuación de Layout Shift

Ejemplo:
  Elemento se mueve 200px hacia abajo (altura viewport: 800px)
  Fracción de Impacto: 0,25 (área ocupada por elemento)
  Fracción de Distancia: 0,25 (200/800)
  Puntuación del Shift: 0,0625

CLS Total = Suma de todas las puntuaciones de shift inesperados

<!-- Imágenes sin dimensiones -->
<img src="producto.jpg" alt="Producto">  <!-- Malo: causa reflow -->

<!-- Correcto: dimensiones reservadas -->
<img src="producto.jpg" alt="Producto" width="400" height="300">

<!-- Contenedores de anuncios sin espacio reservado -->
<div id="ad-slot"></div>  <!-- Malo: anuncio carga, empuja contenido -->

<!-- Correcto: reservar espacio -->
<div id="ad-slot" style="min-height: 250px;"></div>

// PageSpeed Insights API
fetch('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?' +
  'url=https://ejemplo.com&category=performance')
  .then(response => response.json())
  .then(data => {
    const lcp = data.lighthouseResult.audits['largest-contentful-paint'];
    const cls = data.lighthouseResult.audits['cumulative-layout-shift'];
    const inp = data.lighthouseResult.audits['interaction-to-next-paint'];
  });

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);  // Registra valor LCP
onINP(console.log);  // Registra valor INP
onCLS(console.log);  // Registra valor CLS

// Enviar a analytics
function enviarAAnalytics(metrica) {
  navigator.sendBeacon('analytics-endpoint', JSON.stringify({
    nombre: metrica.name,
    valor: metrica.value,
    clasificacion: metrica.rating,
    id: metrica.id
  }));
}

onLCP(enviarAAnalytics);
onINP(enviarAAnalytics);
onCLS(enviarAAnalytics);

<head>
  <!-- Precargar imagen LCP -->
  <link rel="preload" as="image" href="hero.webp">

  <!-- Precargar CSS crítico -->
  <link rel="preload" as="style" href="critical.css">

  <!-- Preconectar a orígenes -->
  <link rel="preconnect" href="https://cdn.ejemplo.com">
  <link rel="dns-prefetch" href="https://analytics.ejemplo.com">
</head>

Sin CDN: Usuario ──────────────────> Servidor de Origen (100-300ms RTT)
                                    [distancia geográfica]

Con CDN: Usuario ───> Nodo Edge (10-50ms) ───> Origen (si necesario)
                   [PoP más cercano]

// Malo: Tarea larga bloqueante
function procesarItems(items) {
  items.forEach(item => {
    // Computación pesada
    item.procesar();
  });
}

// Bueno: Procesamiento en chunks
async function procesarItems(items) {
  for (let i = 0; i < items.length; i += 50) {
    const chunk = items.slice(i, i + 50);
    chunk.forEach(item => item.procesar());
    await new Promise(r => setTimeout(r, 0)); // Ceder al hilo principal
  }
}

// Hilo principal
const worker = new Worker('computar.js');

boton.addEventListener('click', () => {
  worker.postMessage({ datos: granDataset });
  // Hilo principal permanece responsivo
});

/* Truco de aspect ratio */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* O usar CSS para reservar espacio */
.contenedor-imagen {
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  background: #f0f0f0;
}

@font-face {
  font-family: 'FuenteCustom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* No cambiar si carga tarde */
}