Core Web Vitals (What They Mean)
LCP
Largest Contentful Paint measures how fast the main content becomes visible. Usually driven by hero image, fonts, and render blocking resources.
CLS
Cumulative Layout Shift measures unexpected movement. It is often caused by images without dimensions, late fonts, banners, or injected widgets.
INP
Interaction to Next Paint measures responsiveness. Heavy JS, long tasks, and too many scripts typically make INP worse.
Optimization Playbook (Next.js)
1) Fix your hero image and above-the-fold content
- Use responsive image sizes and modern formats.
- Reserve layout space (avoid CLS).
- Keep the hero section simple and reduce heavy overlays.
2) Reduce JavaScript and third-party scripts
- Remove unused packages and heavy UI dependencies.
- Load analytics and chat widgets carefully (avoid blocking).
- Prefer server rendering for content pages where possible.
3) Fonts and CSS
- Preload critical fonts and avoid loading many weights.
- Keep CSS lean; reduce large global styles.
- Avoid layout shifts from late font swaps.
4) API and data fetching
- Cache where possible for public content pages.
- Don’t block rendering for non-critical data.
- Reduce waterfalls (multiple sequential requests).
Examples
Example: The “Slow Hero” Problem
- Hero background image is 3–6MB and loads late → bad LCP
- Sticky banner loads after render and pushes content → bad CLS
- Chat widget injects heavy JS on first load → worse INP
Fix Plan
- Compress hero image, serve responsive sizes.
- Reserve banner space or show it without shifting layout.
- Delay chat widget until user interaction or after idle.
Pre-Launch Performance QA Checklist
LCP
- Hero assets optimized and cached
- Render blocking resources minimized
- Above-the-fold content is simple
CLS
- All images have width/height or reserved space
- Fonts load without shifting layout
- Widgets don’t push content after render
INP
- Heavy scripts removed or delayed
- Long tasks reduced by splitting work
- Key interactions feel instant
Mobile
- Test on a real phone network
- No large images hidden via CSS only
- Touch targets are usable
Need Better Core Web Vitals?
We optimize Next.js apps for performance, SEO, and conversion. Share your URL and we will tell you the biggest quick wins.