There’s a lot of performance advice on the internet. Most of it won’t move your Core Web Vitals. Here are five techniques that consistently produce measurable improvements.
1. Lazy-Load Everything Below the Fold
<img src="hero.jpg" alt="Hero" loading="eager" />
<img src="section-2.jpg" alt="Section 2" loading="lazy" />Use loading="eager" only for the LCP image. Everything below the fold gets loading="lazy". This alone often cuts Time to Interactive by 30–40 %.
2. Inline Critical CSS
Your render-blocking CSS is likely delaying paint. Extract the styles needed for above-the-fold content, inline them in <style>, and load the full stylesheet asynchronously:
<style>/* critical above-the-fold styles */</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />3. Subset Your Fonts
Loading a full variable font can cost 300 KB. Use unicode-range subsetting to load only the characters you actually use. Google Fonts’ &text= parameter does this automatically.
4. Use HTTP/2 Push Carefully
HTTP/2 server push sounds great in theory. In practice, push resources that are already cached waste bandwidth. Use <link rel="preload"> instead—it has the same priority hints without the cache-collision problem.
5. Split Your Bundles
A single 500 KB JS bundle means users wait for code they may never execute. Route-based code splitting with dynamic import() ships only what the current page needs.
const HeavyWidget = lazy(() => import('./HeavyWidget'));Conclusion
These five changes are measurable, targeted, and applicable to virtually every production site. Pick the one with the worst current metric and start there.