---
name: web-performance-optimization
description: "Otimização de performance web — Core Web Vitals (LCP/INP/CLS), bundle splitting, lazy loading, image opt, caching, CDN. Activates: lighthouse, performance, core web vitals, lcp, bundle, lazy loading, cache."
category: development
keywords: [performance, lighthouse, lcp, inp, cls, bundle, cache, cdn]
license: MIT
metadata:
  author: "Funnel Labs I.A — Anthony Nichols & André Cia"
  version: "1.0.0"
  consumed_by: [web-designer]
---

# Web Performance Optimization

Owned por `@web-designer`. Foco em Core Web Vitals e perf real (mobile 4G).

## Targets (mobile real)

| Métrica | Bom | Aceitável | Ruim |
|---|---|---|---|
| LCP (Largest Contentful Paint) | <2.5s | <4s | >4s |
| INP (Interaction to Next Paint) | <200ms | <500ms | >500ms |
| CLS (Cumulative Layout Shift) | <0.1 | <0.25 | >0.25 |
| FCP (First Contentful Paint) | <1.8s | <3s | >3s |
| TTFB (Time to First Byte) | <800ms | <1.8s | >1.8s |

## Recipe priorizada (ordem de impacto)

### 1. Imagens (geralmente 50% do problema)

```html
<!-- BAD -->
<img src="hero.jpg" alt="...">

<!-- GOOD -->
<img
  src="hero-mobile.webp"
  srcset="hero-mobile.webp 600w, hero-tablet.webp 1024w, hero-desktop.webp 1920w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 100vw, 1920px"
  loading="lazy"
  decoding="async"
  width="1920"
  height="1080"
  alt="...">
```

- Formato: AVIF > WebP > JPG (90% dos casos AVIF + WebP fallback).
- Width/height explícitos = evita CLS.
- `loading="lazy"` em imagens below-the-fold.
- Hero image: `fetchpriority="high"`, NÃO lazy.

### 2. JS bundle

- Code splitting por rota (Next.js dynamic imports).
- Tree shaking — verificar com bundle performance-analyst.
- Remover lib se usa < 30%.
- Polyfills só quando necessário (modern browsers).

### 3. Caching

- HTML: `Cache-Control: no-cache` (sempre revalidar).
- Assets com hash: `Cache-Control: public, max-age=31536000, immutable`.
- API: stale-while-revalidate quando aplicável.
- CDN edge cache (Cloudflare).

### 4. Fonts

```css
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;  /* evita FOIT */
  font-weight: 100 900;  /* variable font */
}
```

- Preload critical font: `<link rel="preload" as="font" type="font/woff2" crossorigin>`.
- Subset (Latin-only se PT-BR).

### 5. Critical CSS

- Inline critical CSS no `<head>`.
- Resto async via `media="print" onload="this.media='all'"`.

### 6. Server / API

- HTTP/2 ou HTTP/3.
- Brotli compression.
- Database query under 100ms p95.
- N+1 query elimination (DataLoader pattern).

## Toolchain

- Lighthouse CI no PR.
- WebPageTest pra throttling realista.
- Bundle performance-analyst (Next.js: `@next/bundle-performance-analyst`).
- Real User Monitoring (RUM): Cloudflare Analytics, Vercel Analytics, ou simples Web Vitals lib.

## Anti-patterns

- ❌ Otimizar local sem medir prod.
- ❌ Polyfill global pra suporte de IE11 em 2026.
- ❌ Cache header errado (HTML cached forever, CSS sem cache).
- ❌ Imagem hero lazy (penaliza LCP).
- ❌ JavaScript blocking no `<head>` sem `async`/`defer`.

## Cross-skill

- `frontend-design` — design respeita perf budgets.
- `senior-frontend` — code patterns (memoization, suspense).
- `webapp-testing` — Lighthouse no CI.
