Menu
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)?
623
First contentful paint measures the time when the first visual dom element is painted on the canvas. First meaningful paint is the moment when "important" content is painted on the screen. Largest contentful paint measures the time at which the largest element above the fold is rendered.
First Contentful Paint (FCP) and FMP are often the same when the first bit of content rendered on the page includes the content above the fold. However, these metrics can differ when, for example, there's content above the fold within an iframe.
First Paint, part of the Paint Timing API, is the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from the default background color of the body.
There are a few interesting paint times. The first one is
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
