20 Quick Wins: Low-Hanging Performance Fruit
These are changes you can make today, often in under an hour each, that deliver outsized performance impact. Ordered roughly by effort-to-impact ratio.
1. Add fetchpriority="high" to your LCP image. One attribute, measurable LCP improvement. The most impactful single change on most pages. (Section 12, 17)
2. Stop lazy-loading your LCP image. 17% of sites lazy-load their LCP element. Remove loading="lazy" from above-the-fold hero images. (Section 12)
3. Set interpolate-size: allow-keywords in your CSS reset. One line enables smooth height: auto animations sitewide, replacing JS-powered accordions. (Section 14)
4. Add <link rel="preconnect"> for critical third-party origins. Saves 100–300ms per origin by completing DNS + TCP + TLS ahead of time. (Section 17)
5. Enable Brotli compression. 15–25% smaller than gzip for text assets. Most CDNs support it with a toggle. (Section 18)
6. Self-host your web fonts in WOFF2 format. Eliminates two third-party connections (100–300ms saved), enables long caching, and fixes GDPR issues with Google Fonts. (Section 15)
7. Add font-display: swap (or optional) to all @font-face rules. Prevents Flash of Invisible Text. Text is always visible. (Section 15)
8. Serve images in AVIF with WebP and JPEG fallbacks. AVIF is 50% smaller than JPEG at equivalent quality. Use the <picture> element for format negotiation. (Section 12)
9. Add content-visibility: auto to off-screen sections. CSS-only virtual scroll — up to 7× rendering performance improvement for long pages. (Section 13)
10. Replace YouTube embeds with lite-youtube-embed. 224× faster initial load. The real player loads only when the user clicks play. (Section 16)
11. Add explicit width and height to all <img> and <video> elements. Prevents layout shifts (CLS) by reserving space before the resource loads. (Section 12)
12. Enable HTTP/3 on your CDN. Usually a single toggle. Zero risk — browsers fall back to HTTP/2 if QUIC fails. 1-RTT connections, no head-of-line blocking. (Section 18)
13. Audit and remove unused CSS with Chrome DevTools Coverage tab. Many sites ship 80–90% unused CSS from frameworks. (Section 13)
14. Use @layer to organize CSS specificity. Eliminates !important hacks and specificity wars, especially with third-party CSS. (Section 13)
15. Preload your critical font. <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> — always include crossorigin or the browser downloads it twice. (Section 15, 17)
16. Subset your fonts to the characters you actually use. Can reduce font files by 50–70%. Use pyftsubset or Glyphhanger. (Section 15)
17. Wrap all animations in @media (prefers-reduced-motion: no-preference). Respects user preferences, saves rendering resources, and is an accessibility requirement. (Section 22)
18. Add loading="lazy" to all below-the-fold images. Native browser lazy loading with zero JavaScript. (Section 12)
19. Set Cache-Control: public, max-age=31536000, immutable on fingerprinted static assets. Your hashed filenames are your cache-busting mechanism. (Section 19)
20. Move third-party scripts to defer or dynamic injection after DOM interactive. Never load analytics, tag managers, or ads synchronously in the <head>. (Section 16)