What is CLS by FCP
CLS by FCP examines Cumulative Layout Shift (CLS) against the First Contentful Paint — the moment the first content appears in the browser.
This lens helps determine whether early rendering contributes to layout shifts later, or if your initial load sequence is stable from the start.
Healthy CLS by FCP sample
A healthy chart shows low CLS across both early and late FCPs. This suggests:
Content appears without disrupting layout.
There are no shifts between the initial paint and the rest of the page loading.
FCP doesn’t trigger jank due to unreserved space or late styling.
That’s a good sign that layout logic is under control.
Unhealthy CLS by FCP sample
If fast FCPs result in worse CLS:
You might be painting too early, before styles or dimensions are locked in.
Placeholder components may be missing, causing late shifts.
If slow FCPs trigger high CLS:
Lazy loading or deferred rendering might be introducing shifts once FCP finally occurs.
Misalignment here reveals timing gaps in the rendering pipeline.
Resolving unhealthy CLS by FCP
Go-to action plan to resolve an unhealthy CLS by FCP:
Ask Uxi to analyze your CLS by FCP values and suggest improvements
Use Filters to zero in on layouts that load quickly but shift immediately after.
Simulate CLS of the suspected lens to see if fixing it will resolve the CLS by FCP. If yes, this is where the resolution focus should be.
Use an automated CLS optimization tool like Navigation AI to improve your CLS by FCP 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.