LCP element type
What the LCP element is: image, background image, text, or video.
At a glance the headline numbers for LCP element type
What the LCP element is: image, background image, text, or video.
The LCP is an img element on 42.2% of sites. On 29.1% it is a CSS background image.
LCP element type who uses what, and how stable each group is
Little daylight between the groups: every variant sits near 0.02 median CLS. computed
Passing CLS per LCP element type which group passes the CLS most often
No variant stands out: pass rates sit between 77% and 80%. computed
Why this matters for the Core Web Vitals, and where to start fixing it
What the LCP element is decides the playbook. An img can be prioritized, preloaded and right-sized. A CSS background image has a discovery problem first: the browser cannot see it until the CSS applies. Text means rendering waits on a font, not an image. Video means the poster frame is the candidate to optimize.
Text LCP is the underrated option. A headline renders as soon as its font is ready, no megabytes involved. A fast headline beats a slow hero, and a site gets to choose which one it leads with.
Chrome field data from 189,915 sites, representing millions of real page loads. How we measured.
Live queries (1) — admin only
SELECT m.lcp.type AS val, COUNT(*) AS n,
quantile_disc(crux."desktop".cls, 0.5) AS median,
COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL AND crux."desktop".cls <= 0.1) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL), 0) AS good,
COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL AND crux."desktop".cls > 0.1 AND crux."desktop".cls <= 0.25) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL), 0) AS ni,
COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL AND crux."desktop".cls > 0.25) * 1.0 / NULLIF(COUNT(*) FILTER (WHERE crux."desktop".cls IS NOT NULL), 0) AS poor
FROM sites WHERE 1=1 GROUP BY m.lcp.type;