'time to first paint' vs 'First Meaningful Paint'

Question

Is there a Web Performance section of SO?

Assuming not (I haven't found one) then what is the difference, if any, between time to first paint (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) and First Meaningful Paint (https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)?

Answer 1

There are a few interesting paint times. The first one is

• First Paint: The time when the first pixel is painted onto the screen. For example a background color of the page.
• First Contentful Paint: The time when the first content piece from the DOM is painted, i.e. some text or an image.
• First Meaningful Paint: The time when the browser paints the content that users are interested in. This is highly depends on the page.

The first two can actually be tracked by Chromes timing API and reported in Google Analytics for example.

The first meaningful paint (FMP) cannot be measured from browser APIs at the moment. The general idea when measuring the FMP would be to define Hero Elements, i.e. elements that make up the main user content, and measure their paint times. Currently there is no way to get the paint times of a specific element in the DOM

Tools like Lighthouse or WebPageTest estimate the FMP by taking the biggest layout change when rendering as the primary candidate.