I spent a week getting a Lighthouse score from 62 to 94 and field data barely moved. The lesson stuck.
Find the element first
Do not guess. The LCP entry is available from PerformanceObserver in real browsers, so collect it from actual sessions and group by element. Twice now the answer has been an element nobody on the team expected — once a background image on a promotional band, once a heading in a font that was still loading.
What moves field numbers
- Preload the LCP image and give it
fetchpriority="high". This is the single highest-leverage change on most content pages. - Serve it at the size it renders. A 2400px image on a 390px viewport wastes the entire budget on a network that has none.
- Never lazy-load the LCP element. The attribute that speeds up everything else slows down the one that counts.
- Get fonts out of the critical path with
font-display: swapand a metric-matched fallback so the swap does not shift the layout.
Lab tools are for finding causes. Field data is for knowing whether you fixed anything.
4 Comments
Leave a comment
Sign in to leave a comment.
Signing in is unavailable right now.







Peter Bakker
February 27, 2024Collecting the LCP element from real sessions is the step everyone skips. We found ours was a cookie banner.
Muhammed Senussi
AuthorFebruary 27, 2024A cookie banner as LCP is more common than you would think, and it is a particularly annoying one because fixing it usually means arguing with legal rather than writing code.
Yara Mansour
March 1, 2024Does the metric-matched fallback really matter if you use font-display: swap?
Muhammed Senussi
AuthorMarch 1, 2024It matters for CLS rather than LCP. Swap alone means text renders in the fallback and then jumps when the real font arrives. Matching the metrics with size-adjust and ascent-override makes the swap almost invisible. It took me about an hour to generate and it removed a persistent 0.05 of layout shift.