TL;DR As simulated throttling extrapolates timings on slower devices, the original trace will show the markers based on the unthrottled results. Use Dev Tools Throttling for more accuracy.

While optimizing Core Web Vitals, I couldn't make sense of one specific difference between the reported LCP value in Chrome's Lighthouse tab and the LCP marker displayed in the Performance tab when accessing the trace through the View Original Trace button.

To understand this difference, it is important to consider the throttling option selected for performance evaluation during the Lighthouse test (available when clicking the cog wheel icon for "Lighthouse settings")

1. Simulated throttling (default)

2. DevTools throttling (advanced)

As noted in the parenthesis, simulated throttling is the default behavior and is summarized plainly and clearly in the documentation:

Simulated throttling (default) This option simulates the typical conditions of browsing on a mobile device. It's called "simulated" because Lighthouse doesn't actually throttle during the auditing process. Instead, it just extrapolates how long the page would take to load under mobile conditions. [1]

To get a more realistic result, changing the option to DevTools throttling (advanced) will apply actual throttling during the Lighthouse test. As a side-effect, all events and markers in the flame graph will reflect the actual timings that are reported in the Lighthouse results.

The DevTools throttling (advanced) setting, on the other hand, actually throttles your CPU and network, with the tradeoff of a longer auditing process. [2]

Based on its increased accuracy, I recommend switching to this option before deep-diving into the performance flame graphs to not only benefit from the more consistent markers but also from getting a better picture of possible hardware-bound issues like long-running tasks, script evaluation- or painting cycles & co.

Sources

• [1][2] https://developer.chrome.com/docs/devtools/lighthouse/