Comparison
Largest contentful paintvsNative lazy loading
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 →Native lazy loading
you added one attribute and the images further down the page stopped downloading until they were near the viewport.
The `loading="lazy"` attribute, which defers fetching an image or iframe until it approaches the viewport, handled by the browser without script. It replaces the observer-based libraries that used to do this, with better heuristics and no main-thread cost. Applying it to an image above the fold delays the largest contentful paint, which is the one way it reliably makes things worse.
Full entry →