Skip the framework debates. These are the 12 measurable optimizations that will move your Lighthouse score from 60 to 95 plus and, more importantly, your real user metrics from "frustrating" to "fast". We focus on what actually shows up in Core Web Vitals, not what makes for good conference talks.
The four metrics that matter in 2026
- LCP (Largest Contentful Paint): under 2.0 seconds is good, under 1.5 is excellent
- INP (Interaction to Next Paint): under 200 milliseconds is good, under 100 is excellent
- CLS (Cumulative Layout Shift): under 0.05 is good
- TTFB (Time to First Byte): under 600 milliseconds at p75
1. Defer non critical CSS
Critical CSS inlined at under 14KB. Everything else loaded asynchronously. A typical 200KB stylesheet blocks first paint by 350 to 500 milliseconds on mid range Android.
2. Use AVIF with WebP fallback
AVIF cuts image weight by 35 to 50 percent versus JPEG at equivalent quality. Browser support hit 96 percent in 2026. The fallback to WebP is now a one line picture element.
3. Self host your fonts and subset them
Google Fonts costs you 150 to 300 milliseconds of TTFB. Self hosting on the same origin as your app removes that completely. Subset to the glyphs you actually use: a Latin Inter subset is 28KB instead of 220KB.
4. Code split every route
Most React apps ship 800KB of JavaScript to the homepage. Route level splitting cuts that to under 120KB for the average landing page. Next.js App Router and Vite + React Router both make this one line per route.
5. Use the platform: native lazy loading
Every img and iframe below the fold should have loading="lazy". Browser native lazy loading is faster than any JavaScript polyfill and has been stable for years.
6. Preconnect to critical third parties
If you load fonts from Google, images from a CDN, or analytics from any third party, preconnect in the head. A preconnect shaves 100 to 250 milliseconds off the first connection.
7. Stream HTML
Server side render the shell and stream the body. The browser can start painting while the rest of the page is still arriving. Edge runtimes like Vercel Edge and Cloudflare Workers do this by default.
8. Compress at the edge
Brotli compression saves 15 to 25 percent over gzip. Every modern CDN supports it. Cloudflare, Fastly, Vercel, and Netlify all default to Brotli in 2026.
9. Reduce JavaScript execution on the main thread
Long tasks over 50 milliseconds kill INP. Break heavy work into requestIdleCallback or scheduler.postTask. Move computation off the main thread using Web Workers where possible.
10. Cache aggressively
Immutable assets (hashed JS/CSS, images, fonts) should have a 1 year Cache-Control. HTML should have 5 to 10 minutes. Service workers for returning visitors. Most CDN setups handle this with two rules.
11. Use HTTP/3 and 0-RTT
Connection setup is essentially free with HTTP/3. Cloudflare and Fastly enable this by default. For repeat visitors, 0-RTT saves the round trip cost of the TLS handshake.
12. Profile on a real device, not your MacBook
Chrome DevTools throttling lies about real Android mid range performance. Use a physical Pixel 7a or a real WebPageTest run from a mobile profile. The metrics will be 2 to 4x worse than what you see locally.
Expected impact per optimization
| Optimization | LCP Gain | INP Gain | Effort |
|---|---|---|---|
| Defer non critical CSS | -300 ms | -40 ms | Low |
| AVIF images | -450 ms | - | Low |
| Self host fonts | -220 ms | -30 ms | Low |
| Route level code split | -380 ms | -110 ms | Medium |
| Native lazy loading | -180 ms | - | Trivial |
| Preconnect third parties | -160 ms | - | Trivial |
| Stream HTML | -420 ms | -60 ms | Medium |
| Brotli compression | -90 ms | - | Trivial |
| Reduce main thread work | - | -180 ms | High |
| Aggressive caching | -240 ms | - | Low |
| HTTP/3 + 0-RTT | -150 ms | - | Low |
| Real device profiling | reveals truth | reveals truth | Trivial |
Performance budget by device tier
| Device Tier | LCP Target | INP Target | JS Budget |
|---|---|---|---|
| High end iPhone / M series Mac | 1.2 s | 80 ms | 400 KB |
| Mid range Android 2024 | 1.8 s | 160 ms | 200 KB |
| Budget Android 2022 | 2.5 s | 240 ms | 120 KB |
| Slow 4G + budget device | 3.5 s | 300 ms | 80 KB |
How to ship this in a sprint
Pick the top 3 wins for your stack from the table above. They will not require a rewrite. Most teams can move Lighthouse from 60 to 85 in a week. The 85 to 95 jump takes the rest of the quarter. The last 5 percent is usually a single architectural decision: a service worker, a server component rewrite, or moving to the edge.