Web Performance Checklist

Reducing JavaScript is consistently the highest-impact optimization. JS is the most expensive resource type — it requires downloading, parsing, compiling, and executing, blocking the main thread throughout. Beyond JS: use a CDN to reduce TTFB, properly size and format images (WebP/AVIF), eliminate render-blocking resources, and implement caching. The HTTP Archive shows that JS weight is the strongest predictor of poor Core Web Vitals scores.

Use modern formats (WebP saves 25–35% vs JPEG; AVIF saves 50%+ vs JPEG). Set explicit width and height to prevent CLS. Use srcset and sizes for responsive images. Lazy-load below-the-fold images with loading='lazy'. Preload the LCP image. Compress with tools like Squoosh, Sharp, or imagemin. For hero images, consider serving different sizes: 400w mobile, 800w tablet, 1200w desktop.

Render-blocking resources are CSS and JS files that prevent the browser from painting the page until they finish downloading. CSS in <head> always blocks rendering. Scripts block unless marked async or defer. To eliminate render-blocking: inline critical CSS, load non-critical CSS with media='print' onload trick, add defer or async to scripts, and preload critical fonts. Google's LCP metric is heavily influenced by render-blocking resources.

Web fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text), contribute to LCP delays, and add layout shift. Best practices: preconnect to font origins, preload critical fonts, use font-display: swap (shows fallback while loading) or font-display: optional (uses fallback if font isn't cached). Subset fonts to only needed characters. Consider variable fonts — one file replaces multiple weight files. Prefer self-hosted fonts over Google Fonts for control.

A CDN (Content Delivery Network) stores copies of your static assets (images, JS, CSS) at geographically distributed servers, reducing the physical distance between user and content. Edge caching extends this further — dynamic content and even full page responses are cached at CDN edge nodes. Services like Cloudflare, Vercel, and Fastly offer both. A CDN primarily improves asset delivery; edge caching (like Cloudflare Workers or Vercel Edge) can also accelerate dynamic content by caching HTML at the edge.