What is LCP by LCP element
LCP by LCP element breaks down Largest Contentful Paint (LCP) by the type of element that triggered it - typically an image or a block of text.
This lens helps you understand what’s actually being measured as your LCP and whether it’s visual content (like a hero image) or non-image elements (like headings, paragraphs, or background elements).
The two categories are:
Image – The LCP was triggered by an image element (e.g.
<img>,<picture>, background image via CSS)Non-image – The LCP came from a text block or non-image element (e.g.
<h1>,<div>, or other structural content)
Healthy LCP by LCP element sample
Should you worry
In a healthy experience:
Both Image and Non-image LCPs load quickly
Image-triggered LCPs are well-optimized and don't block rendering
Non-image LCPs reflect fast text rendering and good font-loading strategies
If your chart is green across both types, you’re delivering fast, visible content regardless of element type - that’s exactly where you want to be.
Unhealthy LCP by LCP element sample
If Image LCPs are slow:
It typically means unoptimized images, delayed lazy-loading, or excessive render-blocking JavaScript
These are often the largest assets on the page and can easily drag down performance if not handled properly
If Non-image LCPs are slow:
It may point to font-loading issues, layout shifts, or content being delayed by third-party scripts
You may be seeing slow LCP even though it’s just text - which suggests other bottlenecks in rendering
In both cases, knowing what is responsible gives you a more targeted starting point for fixing it.
Resolving unhealthy LCP by LCP element
Go-to action plan to resolve an unhealthy LCP by LCP element:
Ask Uxi to analyze your LCP by LCP element values and suggest improvements.
Use Filters to focus on the slowest LCP element type, then pivot to related lenses like image size, layout shift, or JavaScript execution.
Simulate LCP of the suspected lens to see if fixing it will resolve the slow LCP by LCP element. If yes, this is where the resolution focus should be.
Use an automated LCP optimization tool like Navigation AI to improve your LCP by LCP element 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.