Performance

--- name: performance description: Optimize web performance for faster loading and a better user experience. Use when asked to "speed up my site," "optimize performance," "reduce load time," "fix slow loading," "improve page speed," or "performance audit." license: MIT metadata: author: web-quality-skills version: "1.0" --- # Performance optimization In-depth performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization. ## How it works 1. Identify performance bottlenecks in code and assets 2. Prioritize by impact on Core Web Vitals 3. Provide specific optimizations with code examples 4. Measure improvement with before/after metrics ## Performance budget | Resource | Budget | Rationale | |----------|--------|-----------| | Total page weight | < 1.5 MB | 3G loads in ~4s | | JavaScript (compressed) | < 300 KB | Parsing + execution time | | CSS (compressed) | < 100 KB | Render blocking | | Images (above-fold) | < 500 KB | LCP impact | | Fonts | < 100 KB | FOIT/FOUT prevention | | Third-party | < 200 KB | Uncontrolled latency | ## Critical rendering path ### Server response TTFB < 800 ms. Time to First Byte should be fast. Use a CDN, caching, and efficient backends. Enable compression. Gzip or Brotli for text assets. Brotli is preferred (15:20% smaller). HTTP/2 or HTTP/3. Multiplexing reduces connection overhead. Edge caching. Cache HTML at the CDN edge when possible. Send Early Hints (HTTP 103) for slow origins.* When the origin takes hundreds of milliseconds to assemble the final response, return a `103 Early Hints with Link: </hero.webp>; rel=preload; as=image (and similarly for critical CSS/fonts) so the browser starts fetching before the 200 OK is received. Cloudflare reports [20:30% LCP improvements](https://blog.cloudflare.com/early-hints-performance/) on image-heavy pages. Requires HTTP/2+ and is supported by Chromium-based browsers; other browsers ignore the 103 and fall back to the 200:it’s safe to enable. CDNs (Cloudflare, Fastly, Akamai) can automatically generate 103 responses from previous responses; on your own origin, send them from the same handler that issues the 200. ### Resource loading **Preconnect to required origins:** `html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://cdn.example.com" crossorigin> ` **Preload critical resources:** `html <!-- LCP image --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <!-- Critical font --> <link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin> ` **Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages): `html <script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] } </script> ` moderate triggers after a ~200ms hover : usually intent-correlated, rarely wasted. See [core-web-vitals → LCP](../core-web-vitals/SKILL.md#lcp-largest-contentful-paint) for the full discussion of eagerness tradeoffs and the prerenderingchange gating you'll need for analytics. **Defer non-critical CSS:** `html <!-- Critical CSS inlined --> <style>/* Above-fold styles */</style> <!-- Non-critical CSS --> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="/styles.css"></noscript> ` ### JavaScript optimization **Defer non-essential scripts:** `html <!-- Parser-blocking (avoid) --> <script src="/critical.js"></script> <!-- Deferred (preferred) --> <script defer src="/app.js"></script> <!-- Async (for independent scripts) --> <script async src="/analytics.js"></script> <!-- Module (deferred by default) --> <script type="module" src="/app.mjs"></script> ` **Code splitting patterns:** ``javascript // Route-based splitting const Dashboard = lazy(() => import('./Dashboard')); // Component-based splitting const HeavyChart = lazy(() => import('./HeavyChart')); // Feature-based splitting if (user.isPremium) { const PremiumFeatures = await import('./Premi