Muhammed Senussi
Muhammed Senussi
  • Muhammed Senussi
Fixing LCP for Real, Not for the Lab
Frontend

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: swap and 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

  • Peter Bakker

    February 27, 2024

    Collecting the LCP element from real sessions is the step everyone skips. We found ours was a cookie banner.

    • Muhammed Senussi

      Muhammed Senussi

      AuthorFebruary 27, 2024

      A 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, 2024

    Does the metric-matched fallback really matter if you use font-display: swap?

    • Muhammed Senussi

      Muhammed Senussi

      AuthorMarch 1, 2024

      It 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.

Leave a comment