Why I get LCP less than FCP?

[xiaofud]

Javascript code

<script type="module">
        import {onCLS, onFID, onLCP, onFCP} from 'https://unpkg.com/web-vitals@3?module';

        onCLS(console.log);
        onFCP(console.log);
        onLCP(console.log);
    </script>

console log

The LCP element is an image and it's preloaded.

My Chrome version: Version 114.0.5735.198 (Official Build) (x86_64)

[tunetheweb]

In theory this shouldn't be possible on a single page load. Do you have a URL where this can be reproduced?

[xiaofud]

In theory this shouldn't be possible on a single page load. Do you have a URL where this can be reproduced?

Hello, I can reproduce the issue at https://www.iq.com/, using following code snippet in console

const observer = new PerformanceObserver((entryList) => {

  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }

  for (const entry of entryList.getEntriesByType("largest-contentful-paint")) {
    console.log('LCP candidate:', entry.startTime, entry);
  }

  for (const entry of entryList.getEntriesByType("first-input")) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }

});

observer.observe({type: 'paint', buffered: true});
observer.observe({type: 'largest-contentful-paint', buffered: true});
observer.observe({type: 'first-input', buffered: true});

[philipwalton]

This is happening here because the LCP image is loaded cross-origin, so it's full timing information is not available and the API can only expose the loadTime value rather than the renderTime value.

If you want to enable full timing data for cross-origin images, you can add the Timing-Allow-Origin to those image responses (assuming you control the config for that server).

See this related issue for more details: #260 (comment)

[xiaofud]

This is happening here because the LCP image is loaded cross-origin, so it's full timing information is not available and the API can only expose the loadTime value rather than the renderTime value.

If you want to enable full timing data for cross-origin images, you can add the Timing-Allow-Origin to those image responses (assuming you control the config for that server).

See this related issue for more details: #260 (comment)

Thanks @philipwalton ! After adding Timing-Allow-Origin header using chrome plugin, I get the correct value.