What is CLS by LCP
CLS by LCP compares Cumulative Layout Shift (CLS) with the loading speed of the Largest Contentful Paint (LCP).
This breakdown helps reveal whether layout shifts are tied to how fast—or how late—the largest element paints on the page.
A delay in LCP can often trigger layout shifts if key content arrives after initial layout calculation. This creates instability, especially on image-heavy or dynamically rendered pages.
Healthy CLS by LCP sample
A healthy state shows green CLS across all LCP durations, meaning:
Your largest content renders without triggering layout shifts.
Layout is reserved properly even before assets load.
Users experience both fast and stable rendering.
This balance is ideal for perceived performance and SEO.
Unhealthy CLS by LCP sample
If CLS is worse when LCP is slow:
It likely means placeholder areas aren’t being properly defined, so when content appears, it shifts the page.
Late-loading fonts or images may trigger unexpected jumps.
If CLS is worse when LCP is fast:
It might suggest a “race condition” where rendering is prioritized over stability, skipping layout guards.
Either way, the misalignment points to preventable shifts.
Resolving unhealthy CLS by LCP
Go-to action plan to resolve an unhealthy CLS by LCP:
Ask Uxi to analyze your CLS by LCP values and suggest improvements
Use Filters to identify the layouts with fast or slow LCP that correlate with layout instability.
Simulate CLS of the suspected breakdown to see if fixing it will resolve the CLS by LCP. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by LCP values
Once you’ve improved CLS, set an alert to be the first to know if it starts worsening again.
Try it yourself
Discover how your website performs with real user data.