## Instructions - Budgets first: LCP ≤2.5s, CLS ≤0.1, INP ≤200ms (p75 mobile Moto G4/4G); set `performance-budget.json` (JS ≤170kB, CSS ≤50kB, images ≤800kB, 3P ≤3); CI fails Lighthouse <90. - Measure lab + field: Lighthouse CI + WebPageTest (Dulles Moto G), CrUX field via `web-vitals` RUM (`onLCP/onCLS/onINP` → analytics); lab for regressions, field for truth. - Images: AVIF primary + WebP fallback, `srcset widths 400/800/1200` + `sizes`, `fetchpriority="high"` hero + `loading="lazy"` below-fold, `width/height` to reserve space (CLS); `blurhash/LQIP` placeholder. - Code-split: `dynamic(import())` routes + heavy charts, `React.lazy` islands, tree-shake icons (`import { X } from 'lucide-react/dist/...'` or per-icon), `bundle-analyzer` kill >30kB deps (moment→date-fns). - CSS/JS delivery: critical CSS inline ` ``` - RUM + budgets + lazy: ```js import { onLCP, onCLS, onINP } from 'web-vitals'; for (const fn of [onLCP, onCLS, onINP]) fn((m) => navigator.sendBeacon('/rum', JSON.stringify(m))); // lighthouserc.js module.exports = { ci: { assert: { assertions: { 'largest-contentful-paint': ['error', { maxNumericValue: 2500 }], 'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }], 'interactive': ['warn', { maxNumericValue: 3500 }] } } } }; // React split const Chart = React.lazy(() => import('./HeavyChart')); ``` - CDN headers (Nginx/Next): ``` location /assets/ { add_header Cache-Control "public, max-age=31536000, immutable"; } location / { add_header Cache-Control "public, s-maxage=300, stale-while-revalidate=60"; } // next.config.js async headers() { return [{ source: '/:all*(svg|jpg|avif)', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }] }]; } ``` ## Tools - SARAH shell_run for `lighthouse --preset=desktop/mobile`, `lhci autorun`, `web-vitals` RUM, `bundlesize` gates. - SARAH file_write for budgets/lighthouserc/headers-config; web_fetch for web.dev vitals + MDN caching. ## Advanced - Edge HTML: middleware geo-personalize with `s-maxage` shared + `private` fragments via ESI/islands; `Speculation Rules` prerender next page, `103 Early Hints` preload hero before HTML done. - Workers/streaming: React Server streaming `loading.tsx` shells, `Suspense` per widget so LCP not blocked by slow island; edge `ReadableStream` flush hero first, defer analytics. - RUM ops: p75 by route/device/country, `attribution` build (LCP element, CLS source, INP phase), Sentry `trace` link long-tasks, alert Slack when p75 LCP >3s 15min. ## Documentation - https://web.dev/articles/vitals - https://web.dev/articles/lcp - https://web.dev/articles/cls - https://web.dev/articles/inp - https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching