Web performance guide
Ship pages that load fast, feel instant, and convert higher.
1. Measure first
Run Lighthouse in incognito. Target LCP under 2.5s, TBT under 200ms, CLS under 0.1. Use the Performance panel to find long tasks and layout shifts.
2. Slim the critical path
Inline critical CSS. Defer non-critical stylesheets with media="print" and onload swap. Preload the LCP image and the primary font. Keep the HTML response under 14 KB compressed so the first TCP round-trip delivers the full head.
3. Images
Serve WebP or AVIF with a JPEG fallback. Set explicit width/height to reserve layout space. Use loading="lazy" for below-fold images and fetchpriority="high" on the hero. Responsive srcset avoids shipping 4K images to phones.
4. JavaScript budget
Ship less than 200 KB of uncompressed JS per route. Tree-shake, code-split at the route level, and dynamic-import heavy libraries. Remove unused polyfills — modern browsers cover 98% of ES2020 natively.
5. Fonts
Subset to Latin + the glyphs you actually render. Use font-display: swap with a fallback that matches the web font's metrics. Preload the woff2 variant.
6. Caching & CDN
Immutable hashed filenames with a one-year Cache-Control max-age. Serve static assets from a CDN close to users. Use stale-while-revalidate for API responses that can tolerate slight staleness.
Run a Lighthouse audit after every deploy. Regressions under 5 points trigger a rollback. Fast pages are a feature — treat them like one.