Largest Contentful Paint (LCP)
Design Processes
How long until the biggest thing on the screen has loaded.
In practice
Largest Contentful Paint measures the time from navigation to when the largest visible element — usually a hero image, a video poster or a headline — finishes rendering. It is the metric that captures 'the page looks loaded', and it is usually decided by one asset: the image at the top, how big its file is, and whether anything is blocking it.
Questions
What is Largest Contentful Paint (LCP)?
LCP is the render time of the largest image or text block visible in the viewport, measured from when the page starts loading.
Why do you use Largest Contentful Paint (LCP)?
It is the moment a visitor believes the page has arrived. Google wants it under 2.5 seconds; people want it sooner.
How do you use/apply Largest Contentful Paint (LCP)?
Find the LCP element, make it small and fast — right-sized images, modern formats, preload — and remove anything that delays it, including full-screen loaders.
When do you use Largest Contentful Paint (LCP)?
Every time the hero changes, and whenever a page feels slow to appear.
Who uses Largest Contentful Paint (LCP)?
Designers choosing hero media and developers delivering it.
