NO_LCP only on mobile

[chemicalkosek]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://grod-ksiecia-2023.vercel.app/

What happened?

I'm getting NO_LCP in lighthouse reports on the main index page on mobile

What did you expect?

I expect LCP to exist on mobile

What have you tried?

I have checked similar bugs regarding NO_LCP:
I have crossed off offscreen animations since there shouldn't be any.
There might be animation on the mobile menu but when I comment out mobile menu code, it's still happening.

Because it's only happening on the main page I have presumably narrowed it down to the "hero" component.
Which is basically the two headings, paragraph and 6 images below. (on desktop it occupies the whole page).
When I comment out the images, NO_LCP is gone.
Apart from the first image - which will be most likely above the fold - all other images have loading set to lazy.
The first image is using priority setting from Next.js Image.
When I also remove the priority from the first image, NO_LCP error is gone but then I get:
Largest Contentful Paint image was lazily loaded

I have honestly no clue why is that happening. I don't create bug reports hastily, I have lost many hours trying to fix this and find the root cause.

How were you running Lighthouse?

CLI, PageSpeed Insights, Chrome DevTools

Lighthouse Version

10.1.1

Chrome Version

112.0.5615.165

Node Version

v18.12.1

OS

Linux

Relevant log output

LH:ChromeLauncher Waiting for browser. +0ms
  LH:ChromeLauncher Waiting for browser... +0ms
  LH:ChromeLauncher Waiting for browser..... +505ms
  LH:ChromeLauncher Waiting for browser.....✓ +1ms
(node:1558313) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
  LH:status Connecting to browser +344ms
  LH:status Navigating to about:blank +10ms
  LH:status Benchmarking machine +10ms
  LH:status Preparing target for navigation mode +1s
  LH:status Navigating to about:blank +15ms
  LH:status Preparing target for navigation +10ms
  LH:status Cleaning origin data +19ms
  LH:status Cleaning browser cache +2ms
  LH:status Preparing network conditions +31ms
  LH:status Navigating to https://grod-ksiecia-2023.vercel.app/ +67ms
  LH:artifacts:getArtifact DevtoolsLog +3s
  LH:artifacts:getArtifact Trace +0ms
  LH:artifacts:getArtifact DevtoolsLog +3ms
  LH:artifacts:getArtifact Trace +0ms
  LH:artifacts:getArtifact Accessibility +0ms
  LH:artifacts:getArtifact AnchorElements +320ms
  LH:artifacts:getArtifact ConsoleMessages +21ms
  LH:artifacts:getArtifact CSSUsage +0ms
  LH:artifacts:getArtifact Doctype +29ms
  LH:artifacts:getArtifact DOMStats +2ms
  LH:artifacts:getArtifact EmbeddedContent +7ms
  LH:artifacts:getArtifact FontSize +2ms
  LH:artifacts:getArtifact Inputs +17ms
  LH:artifacts:getArtifact GlobalListeners +3ms
  LH:artifacts:getArtifact ImageElements +2ms
  LH:artifacts:getArtifact InstallabilityErrors +343ms
  LH:status Get webapp installability errors +0ms
  LH:artifacts:getArtifact InspectorIssues +1ms
  LH:artifacts:getArtifact JsUsage +0ms
  LH:artifacts:getArtifact LinkElements +0ms
  LH:artifacts:getArtifact MainDocumentContent +4ms
  LH:artifacts:getArtifact MetaElements +5ms
  LH:artifacts:getArtifact NetworkUserAgent +4ms
  LH:artifacts:getArtifact OptimizedImages +0ms
  LH:artifacts:getArtifact ResponseCompression +1ms
  LH:artifacts:getArtifact RobotsTxt +2ms
  LH:artifacts:getArtifact ServiceWorker +2s
  LH:artifacts:getArtifact Scripts +3ms
  LH:artifacts:getArtifact SourceMaps +0ms
  LH:artifacts:getArtifact Stacks +0ms
  LH:status Collect stacks +0ms
  LH:artifacts:getArtifact TagsBlockingFirstPaint +11ms
  LH:artifacts:getArtifact TapTargets +2ms
  LH:artifacts:getArtifact TraceElements +26ms
  LH:artifacts:getArtifact ViewportDimensions +29ms
  LH:artifacts:getArtifact WebAppManifest +2ms
  LH:status Get webapp manifest +0ms
  LH:artifacts:getArtifact devtoolsLogs +1ms
  LH:artifacts:getArtifact traces +0ms
  LH:artifacts:getArtifact FullPageScreenshot +0ms
  LH:artifacts:getArtifact BFCacheFailures +2s
  LH:status Analyzing and running audits... +358ms
  LH:status Auditing: Uses HTTPS +1ms
  LH:status Auditing: Registers a service worker that controls page and `start_url` +1ms
  LH:status Auditing: Has a `<meta name="viewport">` tag with `width` or `initial-scale` +0ms
  LH:status Auditing: First Contentful Paint +1ms
  LH:status Auditing: Largest Contentful Paint +16ms
  LH:largest-contentful-paint:warn Caught exception: NO_LCP +1ms
  LH:status Auditing: First Meaningful Paint +0ms
  LH:status Auditing: Speed Index +3ms
  LH:status Auditing: Screenshot Thumbnails +232ms
  LH:status Auditing: Final Screenshot +0ms
  LH:status Auditing: Total Blocking Time +1ms
  LH:status Auditing: Max Potential First Input Delay +12ms
  LH:status Auditing: Cumulative Layout Shift +6ms
  LH:status Auditing: No browser errors logged to the console +1ms
  LH:status Auditing: Initial server response time was short +0ms
  LH:status Auditing: Time to Interactive +1ms
  LH:status Auditing: User Timing marks and measures +1ms
  LH:status Auditing: Avoid chaining critical requests +2ms
  LH:status Auditing: Avoid multiple page redirects +1ms
  LH:status Auditing: Web app manifest and service worker meet the installability requirements +3ms
  LH:status Auditing: Configured for a custom splash screen +1ms
  LH:status Auditing: Sets a theme color for the address bar. +0ms
  LH:status Auditing: Manifest has a maskable icon +1ms
  LH:status Auditing: Content is sized correctly for the viewport +0ms
  LH:status Auditing: Displays images with correct aspect ratio +0ms
  LH:status Auditing: Serves images with appropriate resolution +1ms
  LH:status Auditing: Fonts with `font-display: optional` are preloaded +1ms
  LH:status Auditing: Avoids deprecated APIs +0ms
  LH:status Auditing: Minimizes main-thread work +1ms
  LH:status Auditing: JavaScript execution time +17ms
  LH:status Auditing: Preload key requests +4ms
  LH:status Auditing: Preconnect to required origins +0ms
  LH:uses-rel-preconnect:warn Caught exception: NO_LCP +1ms
  LH:status Auditing: All text remains visible during webfont loads +0ms
  LH:status Auditing: Diagnostics +2ms
  LH:status Auditing: Network Requests +1ms
  LH:status Auditing: Network Round Trip Times +8ms
  LH:status Auditing: Server Backend Latencies +1ms
  LH:status Auditing: Tasks +1ms
  LH:status Auditing: Metrics +0ms
  LH:status Auditing: Performance budget +2ms
  LH:status Auditing: Timing budget +4ms
  LH:status Auditing: Keep request counts low and transfer sizes small +0ms
  LH:status Auditing: Minimize third-party usage +2ms
  LH:status Auditing: Lazy load third-party resources with facades +4ms
  LH:status Auditing: Largest Contentful Paint element +2ms
  LH:status Auditing: Largest Contentful Paint image was not lazily loaded +0ms
  LH:status Auditing: Avoid large layout shifts +1ms
  LH:status Auditing: Avoid long main-thread tasks +0ms
  LH:status Auditing: Avoids `unload` event listeners +4ms
  LH:status Auditing: Avoid non-composited animations +0ms
  LH:status Auditing: Image elements have explicit `width` and `height` +0ms
  LH:status Auditing: Page has valid source maps +1ms
  LH:status Auditing: Preload Largest Contentful Paint image +1ms
  LH:status Auditing: Ensure CSP is effective against XSS attacks +0ms
  LH:status Auditing: Script Treemap Data +1ms
  LH:status Auditing: Site works cross-browser +19ms
  LH:status Auditing: Page transitions don't feel like they block on the network +0ms
  LH:status Auditing: Each page has a URL +1ms
  LH:status Auditing: `[accesskey]` values are unique +0ms
  LH:status Auditing: `[aria-*]` attributes match their roles +0ms
  LH:status Auditing: `button`, `link`, and `menuitem` elements have accessible names +0ms
  LH:status Auditing: `[aria-hidden="true"]` is not present on the document `<body>` +1ms
  LH:status Auditing: `[aria-hidden="true"]` elements do not contain focusable descendents +0ms
  LH:status Auditing: ARIA input fields have accessible names +0ms
  LH:status Auditing: ARIA `meter` elements have accessible names +0ms
  LH:status Auditing: ARIA `progressbar` elements have accessible names +0ms
  LH:status Auditing: `[role]`s have all required `[aria-*]` attributes +0ms
  LH:status Auditing: Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. +1ms
  LH:status Auditing: `[role]`s are contained by their required parent element +0ms
  LH:status Auditing: `[role]` values are valid +0ms
  LH:status Auditing: ARIA toggle fields have accessible names +0ms
  LH:status Auditing: ARIA `tooltip` elements have accessible names +1ms
  LH:status Auditing: ARIA `treeitem` elements have accessible names +0ms
  LH:status Auditing: `[aria-*]` attributes have valid values +0ms
  LH:status Auditing: `[aria-*]` attributes are valid and not misspelled +0ms
  LH:status Auditing: Buttons have an accessible name +1ms
  LH:status Auditing: The page contains a heading, skip link, or landmark region +0ms
  LH:status Auditing: Background and foreground colors have a sufficient contrast ratio +0ms
  LH:status Auditing: `<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements. +1ms
  LH:status Auditing: Definition list items are wrapped in `<dl>` elements +0ms
  LH:status Auditing: Document has a `<title>` element +0ms
  LH:status Auditing: `[id]` attributes on active, focusable elements are unique +0ms
  LH:status Auditing: ARIA IDs are unique +0ms
  LH:status Auditing: No form fields have multiple labels +1ms
  LH:status Auditing: `<frame>` or `<iframe>` elements have a title +0ms
  LH:status Auditing: Heading elements appear in a sequentially-descending order +0ms
  LH:status Auditing: `<html>` element has a `[lang]` attribute +0ms
  LH:status Auditing: `<html>` element has a valid value for its `[lang]` attribute +0ms
  LH:status Auditing: Image elements have `[alt]` attributes +1ms
  LH:status Auditing: `<input type="image">` elements have `[alt]` text +0ms
  LH:status Auditing: Form elements have associated labels +0ms
  LH:status Auditing: Links have a discernible name +0ms
  LH:status Auditing: Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). +1ms
  LH:status Auditing: List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements +0ms
  LH:status Auditing: The document does not use `<meta http-equiv="refresh">` +0ms
  LH:status Auditing: `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. +0ms
  LH:status Auditing: `<object>` elements have alternate text +1ms
  LH:status Auditing: No element has a `[tabindex]` value greater than 0 +0ms
  LH:status Auditing: Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table. +0ms
  LH:status Auditing: `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. +0ms
  LH:status Auditing: `[lang]` attributes have a valid value +0ms
  LH:status Auditing: `<video>` elements contain a `<track>` element with `[kind="captions"]` +1ms
  LH:status Auditing: Custom controls have associated labels +0ms
  LH:status Auditing: Custom controls have ARIA roles +0ms
  LH:status Auditing: User focus is not accidentally trapped in a region +0ms
  LH:status Auditing: Interactive controls are keyboard focusable +0ms
  LH:status Auditing: Interactive elements indicate their purpose and state +0ms
  LH:status Auditing: The page has a logical tab order +0ms
  LH:status Auditing: The user's focus is directed to new content added to the page +0ms
  LH:status Auditing: Offscreen content is hidden from assistive technology +0ms
  LH:status Auditing: HTML5 landmark elements are used to improve navigation +0ms
  LH:status Auditing: Visual order on the page follows DOM order +0ms
  LH:status Auditing: Uses efficient cache policy on static assets +0ms
  LH:status Auditing: Avoids enormous network payloads +2ms
  LH:status Auditing: Defer offscreen images +1ms
  LH:status Auditing: Eliminate render-blocking resources +5ms
  LH:status Auditing: Minify CSS +3ms
  LH:status Auditing: Minify JavaScript +18ms
  LH:status Auditing: Reduce unused CSS +63ms
  LH:status Auditing: Reduce unused JavaScript +2ms
  LH:status Auditing: Serve images in next-gen formats +4ms
  LH:status Auditing: Efficiently encode images +3ms
  LH:status Auditing: Enable text compression +2ms
  LH:status Auditing: Properly size images +3ms
  LH:status Auditing: Use video formats for animated content +4ms
  LH:status Auditing: Remove duplicate modules in JavaScript bundles +2ms
  LH:status Auditing: Avoid serving legacy JavaScript to modern browsers +2ms
  LH:status Auditing: Page has the HTML doctype +25ms
  LH:status Auditing: Properly defines charset +1ms
  LH:status Auditing: Avoids an excessive DOM size +0ms
  LH:status Auditing: Avoids requesting the geolocation permission on page load +1ms
  LH:status Auditing: No issues in the `Issues` panel in Chrome Devtools +0ms
  LH:status Auditing: Avoids `document.write()` +0ms
  LH:status Auditing: Detected JavaScript libraries +0ms
  LH:status Auditing: Avoids requesting the notification permission on page load +1ms
  LH:status Auditing: Allows users to paste into input fields +0ms
  LH:status Auditing: Use HTTP/2 +0ms
  LH:status Auditing: Uses passive listeners to improve scrolling performance +2ms
  LH:status Auditing: Document has a meta description +0ms
  LH:status Auditing: Page has successful HTTP status code +1ms
  LH:status Auditing: Document uses legible font sizes +0ms
  LH:status Auditing: Links have descriptive text +0ms
  LH:status Auditing: Links are crawlable +1ms
  LH:status Auditing: Page isn’t blocked from indexing +0ms
  LH:status Auditing: robots.txt is valid +2ms
  LH:status Auditing: Tap targets are sized appropriately +0ms
  LH:status Auditing: Document has a valid `hreflang` +2ms
  LH:status Auditing: Document avoids plugins +0ms
  LH:status Auditing: Document has a valid `rel=canonical` +0ms
  LH:status Auditing: Structured data is valid +0ms
  LH:status Auditing: Page didn't prevent back/forward cache restoration +1ms
  LH:status Generating results... +0ms

[adamraine]

I can reproduce, looks like an issue in chrome. I filed upstream:
https://bugs.chromium.org/p/chromium/issues/detail?id=1440476