Lighthouse returned error: NO_LCP

What’s actually happening

Lighthouse or PageSpeed Insights aborts the run with NO_LCP and no performance score. The page looks fine when you load it by hand. The catch is timing and visibility: Chromium tracks LCP candidates as the page paints, and if the final largest element was hidden at the moment painting settled, Chrome concludes no qualifying paint ever happened. Hero sections that fade in are the usual suspect.

Common causes

• The hero / largest element animates from `opacity: 0` and Chrome finalizes LCP before the fade completes, so the candidate is treated as never painted.
• Content renders then gets hidden (`display: none`, removed from DOM, or covered) before paint stabilizes.
• The LCP candidate is positioned offscreen (e.g. a slider track translated out of the viewport) and never enters the visible area during the trace.
• Images load via JS after the LCP window, leaving no qualifying element in time.
• An interstitial/cookie overlay covers all real content, and overlays don't count as LCP.

How to fix it

1. Stop animating the LCP element from opacity:0Render the hero visible on first paint and animate something cheaper (transform on a child, or a fade on a sibling). If you must fade it, start opacity at a non-zero value or trigger the animation immediately rather than after a delay.
2. Find what Chrome thinks the LCP candidate isOpen DevTools > Performance, record a reload, and check the LCP marker in the Timings track. In Lighthouse JSON, inspect the `largest-contentful-paint-element` audit. If it's empty or points at a hidden node, that's your fix target.
3. Keep content painted — don't render-then-hideAudit JS that toggles visibility on load (carousels, tab panels, splash screens). Ensure the largest element stays in the layout and visible through the measurement window.
4. Pull the LCP element into the viewportIf the candidate is offscreen by design, give Chrome a real in-viewport contentful element (a heading or hero image) so there's a valid candidate above the fold.
5. Suppress overlays for the audit if they block everythingA full-page consent/marketing modal can hide all content. Test with it dismissed, or defer it until after load, so a genuine element can register as LCP.