What is LCP breakdown
The LCP breakdown lens breaks down the Largest Contentful Paint (LCP) into its key components, helping you identify where delays are happening in the page load experience.
LCP is the most popular vital from the Core Web Vitals and represents the loading time of the largest element on the page.
Healthy LCP breakdown sample
Should you worry
Here’s what a healthy LCP breakdown might look like in terms of component times:
Component | Ideal Time | Notes |
Time to First Byte | ≤ 0.15s | Fast server response (ideally under 150ms). Use CDN, caching, etc. |
Load time | ≤ 0.10s | Critical assets (e.g., images, fonts) load quickly via preloading. |
Load delay | ≤ 0.15s | Minimal time between resource readiness and load completion. |
Render delay | ≤ 0.50s | Browser quickly renders LCP element or prerendered by Navigation AI. Optimize JS/CSS & main thread. |
This suggested data is sourced from a SaaS platform utilizing Navigation AI and edge cache CDN.
Unhealthy LCP breakdown sample
In this example, the main issue is the very high Time to First Byte at 3.53 seconds, which means the server is extremely slow to respond. This delays everything else and likely points to backend inefficiencies, lack of caching, slow redirects before landing or poor server location.
Render delay is 0.50 seconds, which is moderate, but could be improved by reducing JavaScript or CSS blocking. Load delay and load time are both low (0.21s and 0.06s), showing that once the response starts, assets load quickly and efficiently.
Overall, frontend performance is decent, but the backend response time is the critical problem to address.
Resolving unhealthy LCP breakdown
Go-to action plan to resolve an unhealthy LCP breakdown:
Ask Uxi to analyze your LCP breakdown values and suggest improvements
If the Time to First Byte is high, please go to Experience → Time to First Byte tab and drill down to its widget lenses and look for poor performers
If either Render delay or Load delay time is high, scroll down and look through all the widget lenses and try to find directly related unhealthy zones. Good candidates would be LCP by cookie name, LCP with ad blocker on/off, LCP by third party
Simulate LCP of the suspected lens to see if fixing it will resolve the LCP breakdown. If yes, this is where the resolution focus should be.
Use an automated LCP optimization tool like Navigation AI to improve your LCP by checkpoint values
Once you’ve improved LCP, 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.