┌─────────────────────────────────────────────────────────────────┐
│                    Framework Core Web Vitals                     │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│   │      LCP        │  │      INP        │  │      CLS        │  │
│   │   Carregamento  │  │ Interatividade  │  │   Estabilidade  │  │
│   │                 │  │                 │  │                 │  │
│   │ "Quão rápido    │  │ "Quão rápido    │  │ "Os elementos   │  │
│   │  aparece o      │  │  a página       │  │  pulam pela     │  │
│   │  conteúdo?"     │  │  responde?"     │  │  tela?"         │  │
│   └────────┬────────┘  └────────┬────────┘  └────────┬────────┘  │
│            │                    │                    │           │
│            ▼                    ▼                    ▼           │
│   ┌─────────────────────────────────────────────────────────────┐│
│   │              Fator de Ranqueamento Google                    ││
│   │         (Sinal de Experiência de Página desde Mai 2021)      ││
│   └─────────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────────┘

<!-- Imagem hero (candidato típico de LCP) -->
<img src="hero.jpg" alt="Vitrine do produto">

<!-- Seção hero com background -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h1>Bem-vindo à Nossa Loja</h1>
</div>

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

Sessão de Página:
  Clique #1: 120ms latência
  Clique #2: 80ms latência
  Clique #3: 450ms latência ← Maior interação
  Toque #4: 95ms latência

INP = 450ms (ou percentil 99 para alta contagem de interações)

Fração de Impacto × Fração de Distância = Pontuação de Layout Shift

Exemplo:
  Elemento move 200px para baixo (altura viewport: 800px)
  Fração de Impacto: 0,25 (área ocupada pelo elemento)
  Fração de Distância: 0,25 (200/800)
  Pontuação do Shift: 0,0625

CLS Total = Soma de todas as pontuações de shift inesperados

<!-- Imagens sem dimensões -->
<img src="produto.jpg" alt="Produto">  <!-- Ruim: causa reflow -->

<!-- Correto: dimensões reservadas -->
<img src="produto.jpg" alt="Produto" width="400" height="300">

<!-- Containers de anúncios sem espaço reservado -->
<div id="ad-slot"></div>  <!-- Ruim: anúncio carrega, empurra conteúdo -->

<!-- Correto: reservar espaço -->
<div id="ad-slot" style="min-height: 250px;"></div>

// PageSpeed Insights API
fetch('https://www.googleapis.com/pagespeedonline/v5/runPagespeed?' +
  'url=https://exemplo.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 para analytics
function enviarParaAnalytics(metrica) {
  navigator.sendBeacon('analytics-endpoint', JSON.stringify({
    nome: metrica.name,
    valor: metrica.value,
    classificacao: metrica.rating,
    id: metrica.id
  }));
}

onLCP(enviarParaAnalytics);
onINP(enviarParaAnalytics);
onCLS(enviarParaAnalytics);

<head>
  <!-- Pré-carregar imagem LCP -->
  <link rel="preload" as="image" href="hero.webp">

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

  <!-- Pré-conectar a origens -->
  <link rel="preconnect" href="https://cdn.exemplo.com">
  <link rel="dns-prefetch" href="https://analytics.exemplo.com">
</head>

Sem CDN: Usuário ──────────────────> Servidor de Origem (100-300ms RTT)
                                    [distância geográfica]

Com CDN: Usuário ───> Nó Edge (10-50ms) ───> Origem (se necessário)
                   [PoP mais próximo]

// Ruim: Tarefa longa bloqueante
function processarItens(itens) {
  itens.forEach(item => {
    // Computação pesada
    item.processar();
  });
}

// Bom: Processamento em chunks
async function processarItens(itens) {
  for (let i = 0; i < itens.length; i += 50) {
    const chunk = itens.slice(i, i + 50);
    chunk.forEach(item => item.processar());
    await new Promise(r => setTimeout(r, 0)); // Cedência à thread principal
  }
}

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

botao.addEventListener('click', () => {
  worker.postMessage({ dados: grandeDataset });
  // Thread principal permanece responsiva
});

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

/* Ou usar CSS para reservar espaço */
.container-imagem {
  width: 100%;
  padding-bottom: 56.25%; /* Aspect ratio 16:9 */
  background: #f0f0f0;
}

@font-face {
  font-family: 'FonteCustom';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* Não troca se carregar tarde demais */
}