Largest Contentful Paint (LCP)
Largest Contentful Paint is the moment the biggest image or block of text in the visible part of the page appears. On most pages, that’s the main content: the large photo at the top, the headline of an article, the product image. It’s the point where the page looks loaded to the visitor.
LCP is one of the three Core Web Vitals.
Why it matters
Section titled “Why it matters”Visitors come for the content. A menu and a logo that show up quickly don’t help much if the main image takes another four seconds. LCP measures the wait that visitors notice most.
Which element counts depends on the screen. On a phone, it can be a headline or a paragraph; on a desktop, the large image next to it. In the lab test, the largest element is always the same; with real visitors, it varies with their screens and with what they do.
What influences it
Section titled “What influences it”The time until LCP has four parts: the server’s first response, the delay until the browser starts loading the main image, the image download, and the delay until it’s drawn. Google’s analysis of real visits shows that the download itself is rarely the slow part. Most of the time goes into waiting for the server and into the delays around the image.
Cache: The most common cause of a slow LCP on WordPress sites is a missing page cache. The browser can’t even start on the main image until WordPress has built the page and sent it. See Time to First Byte.
Browser: The main image is often found late. Page builders and themes that set it as a CSS background image, or sliders that add it with JavaScript, make the browser wait until the stylesheet or script has loaded. An image marked for lazy loading starts even later. Stylesheets, scripts and web fonts in the head of the page delay the moment it’s drawn. Large images, uploaded at full camera size, take longer to download.
WordPress: WordPress marks images for lazy loading and gives the likely main image a higher priority, but it has to guess which image that is. Themes, page builders and optimization plugins can override that guess, and they don’t always pick the right one.
Server: A slow or overloaded server delays the first response for every page that isn’t served from a cache.
CDN: A CDN serves the page and its images from a location close to the visitor, so they arrive sooner.
In Permo
Section titled “In Permo”Permo shows LCP on its PageSpeed page, marked as a Core Web Vital, in the lab values for Mobile and Desktop and, when Google has data, in the Real users section: the value that 75% of Chrome visits reached or beat over the last 28 days. In the filmstrip, Permo marks the screenshot where the largest content appeared.
Related
Section titled “Related”Sources
- Largest Contentful Paint (LCP), accessed
- Common misconceptions about how to optimize LCP, accessed
- Image performance enhancements in WordPress 6.3, accessed