LCP + INP + CLS
This step is refinement: after you have the stack stable and caches enabled, you fix the remaining CWV regressions with targeted changes.
LCP (Largest Contentful Paint)
- Identify the LCP element (image, heading, hero container).
- Make that resource load first.
Common fixes:
- Do not lazy load the LCP image.
- Add priority hints for the LCP image.
- Reduce render blockers (CSS/JS) before the first paint.
Prioritize a hero image
<img src="/path/hero.webp" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async" alt="">
INP (Interaction to Next Paint)
INP problems usually come from main-thread work:
- heavy JS bundles
- third-party scripts executing on load
- long tasks triggered by scroll/click handlers
Common fixes:
- remove scripts you do not need
- delay non-critical third-party scripts
- keep critical UI scripts excluded from delay
CLS (Cumulative Layout Shift)
CLS is almost always caused by late layout changes:
- images/iframes without reserved space
- fonts swapping with different metrics
- banners/popups injected above the fold
Common fixes:
- ensure media has
widthandheight - reserve space for banners and embeds
- preload only the fonts used above the fold
Debugging Tools
- Chrome DevTools Performance panel: identify LCP element and long tasks.
- Chrome DevTools Rendering: enable layout shift regions.
- Lighthouse diagnostics: confirm which audits are still failing.
Checklist
- LCP element identified and prioritized.
- Non-critical scripts delayed or removed.
- Media sizing prevents layout shifts.
- Changes validated on mobile.