First Meaningful Paint is one of the six performance metrics tracked and displayed by Lighthouse. It measures when the primary content of a page is visible, but is more of a guess. It became time for a new metric.
First Meaningful Paint
First Meaningful Paint, abbreviated as FMP, is based on the paint after the largest layout change above the fold. But for real user experience, this isn't always the right moment.
When testing, the First Contentful Paint (FCP) often is the same as or close to the FMP metric when JavaScript is being loaded asynchronously. However, when relying on JavaScript (in the case of a Client Side Rendered website, often a PWA), the body background color or navigation bar would be painted ahead of other elements and thus ahead of the FMP metric. Although this sounds positive, the real FMP metric is being unfolded later in the loading process.
For example, when having a webshop, the productimage and its description could show up in a later stadium, after fetching its data using AJAX or similar techniques. This would cause a new paint, resulting in the real First Meaningful Paint, while a synthetic test might falsely tell you the FMP was registered in an earlier stage. As a result, the FMP metric wasn't considered trustworthy enough.
Meet Largest Contentful Paint
The Largest Contentful Paint, abbreviated as LCP, is quite similar as the FMP. However, the difference is that this metric is tracking the largest individual element paint, instead of the paint of the largest layout change.
On a productpage, you might have the following elements above the fold:
- header and logo;
- navigation;
- breadcrumbs;
- product description;
- product image.
Your product image most likely will load latest, as an external request has to be made. But when the dimensions of that element is larger then other elements, it will be(come) the Largest Contentful Paint, thus impact the LCP metric once the image is loaded and JavaScript is done setting its dimensions or creating a slideshow.
That's why Google and web.dev are considering LCP as a better metric for getting the "right" moment, than FMP is.
LCP is actually replacing FMP, as LCP turned out to be more accurate.
Phil Walton on Twitter
After this article was published, Largest Contentful Paint became part of Lighthouse v6 as well as Google's Core Web Vitals, covering essential metrics for a healthy site. It will become part of SEO ranking as of 2021.
Tracked elements in LCP metric
As currently specified, the types of elements considered for Largest Contentful Paint are:
imgelementsimageelements inside ansvgelement- An element with a background image loaded via the
url()function (as opposed to a CSS gradient) - Block-level elements containing text nodes or other inline-level text elements children.
Elements such as svg and video might follow in the future.
Achieving a perfect LCP score
With inline critical CSS in a Server Side Rendered website or shop and deferring non-critical CSS, you could paint elements above the fold in an early stage. This enables you to paint multiple elements at the same time, producing a large layout change. As a result, your FMP metric ended up being the same as your First Contentful Paint (FCP).
Using the technique above, your LCP metric can become a bit different. For example, a (blurred or coloured) image placeholder itself won't help you in the LCP battle, as the LCP metric will still report when the image is done loading.
LCP will wait until the image finishes loading. If you swap in a new image or add a new, larger element to the DOM, it would report that as well.
Phil Walton on Twitter
In this specific case, you could introduce responsive preloading of your product's main image. Other individual elements will have to be tested as well. This could change our approach of landing or e-commerce pages and how we see and measure the user experience within those pages.
Want to know more or want to get technical? Let me know!
