Core Web Vitals
Google's Core Web Vitals are the three signals that most directly affect user experience and search ranking. Hit the green thresholds on all three to pass the assessment.
LCP — Largest Contentful Paint
Measures loading performance. Target: ≤ 2.5 s
FID — First Input Delay
Measures interactivity. Target: ≤ 100 ms
CLS — Cumulative Layout Shift
Measures visual stability. Target: ≤ 0.1
≤ 2.5s
LCP target
Largest Contentful Paint
≤ 100ms
FID target
First Input Delay
≤ 0.1
CLS target
Cumulative Layout Shift
≤ 800ms
TTFB target
Time to First Byte
Loading Optimization
Reduce the amount of work the browser must do before the page becomes usable. Each step below compounds with the others.
1
Lazy-load off-screen resources
Use loading='lazy' on images and dynamic import() for non-critical JS modules.
2
Code-split by route
Ship only the JavaScript needed for the current page. Next.js does this automatically per route segment.
3
Compress assets
Enable Brotli or gzip at the CDN/server layer. Use WebP/AVIF for images and woff2 for fonts.
4
Leverage HTTP caching
Set long max-age with content hashing for static assets; use stale-while-revalidate for API responses.
Performance Improvement by Technique
HTTP Caching50 %
Code Splitting40 %
Lazy Loading30 %
Compression25 %
Rendering Optimization
Choosing the right rendering strategy per page type is the single biggest lever for Time to First Byte and interactivity.
| Technique | Impact |
|---|---|
| Static Site Generation (SSG) | Fastest TTFB — pre-rendered HTML served from CDN |
| Incremental Static Regeneration (ISR) | Fresh data + CDN speed — revalidates in the background |
| React Server Components (RSC) | Zero client JS for data-fetching; smaller hydration payload |
| Partial Prerendering (PPR) | Static shell + streamed dynamic slots in a single request |
| Memoize expensive renders | useMemo / React.memo prevent redundant re-renders in the client tree |
Measuring Performance
You can't optimize what you don't measure. Use a combination of lab tools (consistent, reproducible) and field data (real users).
Performance Toolbox
Lighthouse — Automated audit in Chrome DevTools or CI
Chrome DevTools — Performance panel, Coverage, Network waterfall
WebPageTest — Multi-location, multi-device real-browser tests
Vercel Speed Insights / CrUX — Real-user field data
Quick Wins Checklist
✓Ship these today
Preconnect to third-party origins (fonts, analytics). Add width/height to every <img> to prevent CLS. Preload the LCP image with <link rel='preload'>. Remove render-blocking scripts with defer or async. Self-host Google Fonts to eliminate an extra DNS lookup.
!Common pitfalls
Avoid importing an entire icon library when you only need two icons. Don't block the main thread with synchronous localStorage reads on mount. Never ship unoptimized 4K hero images — always resize at the CDN edge.