LCP: show the main content quickly
Largest Contentful Paint tracks when the main visible element is rendered. Heavy hero images, fonts and render-blocking resources can delay it.
- Optimise the primary image before secondary assets.
- Avoid unnecessary blocking CSS and scripts.
- Serve critical resources through effective caching and fast infrastructure.
INP: respond to interactions
Interaction to Next Paint reflects latency during user interactions. Long JavaScript tasks or heavy main-thread work can make an interface feel slow even after loading.
- Split long JavaScript tasks.
- Avoid large DOM recalculations on every event.
- Defer non-essential features until after critical interaction.
CLS: keep the page stable
Cumulative Layout Shift measures unexpected movement. Images without dimensions, late injected content and poorly anticipated fonts are common causes.
- Reserve space for images and embeds.
- Avoid inserting banners above content that is already visible.
- Test font changes and dynamic components.
Practical checklist
- The LCP element is identified.
- Long JavaScript tasks are located.
- Space is reserved for media.
- Metrics are observed on mobile and desktop.
- Improvements are re-measured after deployment.
Continue with related resources
Conclusion
Core Web Vitals are most useful when they point to a concrete cause. Measure, identify the main bottleneck, fix it and measure again.