Comparison
First contentful paintvsLargest contentful paint
First contentful paint
the first text or image appeared, so the user finally knew the page was alive.
The moment anything from the DOM is painted — any text, image, canvas or non-white background. It answers 'is it working', which is a different question from 'can I see what I came for'. It is driven almost entirely by time to first byte plus render-blocking resources, which makes it the metric most improved by removing things from the head.
Full entry →Largest contentful paint
the big hero image finally rendered, four seconds after the header was already on screen.
The render time of the largest text block or image in the viewport, taken as a proxy for when the page's main content is visible. It answers 'can I see what I came for', which is why it is a headline metric and first contentful paint is not. The element it picks is often not the one you assumed, so the first step is always to look at which element the tooling identified.
Full entry →