The amount of time someone has to wait for a web page to load is one of the most impactful components of a site’s user experience. However, users experience "page load time" in ways that go beyond simply “when the page is done downloading” or “when the page starts downloading”. Instead, they view load time more along the lines of “how long until I can get the content I’m looking for”.
In order to quantify, track and optimize this idea of user experience, Google has introduced a metric called "Largest Contentful Paint" as part of Core Web Vitals.
Largest Contentful Paint is the amount of time it takes a page to render the largest content block visible in the viewport. It measures how long users have to wait to see the most important content on the page.
LCP is a user experience metric that answers the question "how long until a page shows users what they’re here for?"
When measuring and tracking Largest Contentful Paint, the clock starts as soon as the user’s browser requests the URL from your server.
It’s important to note that Largest Contentful Paint is fundamentally different from the concept of page load time. Load time, as measured by Google, simply looks at how quickly your server starts sending information to a browser (known as "time to first byte").
But a real person doesn’t care about when a website’s server starts sending the first piece of data. They care how long they’ll have to wait until they can start consuming the content on the page.
What is a good Largest Contentful Paint Score?
According to Google, in order to provide the best user experience your site should have an LCP of 2.5 seconds or less.
Like the other Core Web Vitals metrics, LCP is scored on a spectrum from "good" to “poor”:
How LCP works
In very simple terms, scoring LCP works by recording how long elements on the page take to load and render once the user (or tool if it’s a lab test) requests the page from their browser. Google looks at the sizes of the various content elements that will render within the user’s device viewport, figures out which is the biggest one, and starts counting how much time until that element has rendered.
Currently, Google tracks the following elements when calculating First Contentful Paint:
Shifting layouts and LCP
Many websites load in stages, resulting in layout shifts and new elements appearing on users’ screens. In these instances, a few things happen in the Largest Contentful Paint calculation.
In the example below we see the first several frames of a page rendering various elements:
So as this page loads, it renders some text elements of various sizes and then some images.
So here’s how LCP would work for this page:
The time it takes the page to load the large image, from the time the user requests the URL from the site’s server, is the LCP score. So if the image loads after 1 second, the LCP would be "good" while if the image rendered in 3 seconds the LCP would be “poor”.
Why Largest Contentful Paint matters
Largest Contentful Paint is a measurable and accurate way to measure how long it takes a page to be useful when it loads for real-life users. This makes it a fundamental parameter for evaluating and scoring a website’s user experience. Plus it’s an easy metric to track and optimize around, which always helps.
Beyond user experience, and at a very practical level, Largest Contentful Paint is important because Google uses LCP scores as part of its Core Web Vitals metric when ranking websites in search results.
Having a poor LCP for your site doesn’t just mean that your users are waiting longer than they should for the content to load. It could also be negatively impacting SEO, preventing your site from appearing at the top of search results.
Like Cumulative Layout Shift (another Core Web Vital), LCP can be measured by both lab and field tools.
Field tools for Largest Contentful Paint:
Field tools to analyze Largest Contentful Paint:
If your website isn’t getting the Largest Contentful Paint score you’re looking for, have no fear! The steps below will help you optimize around LCP and improve your pages’ performance.
Optimize images
Image optimization is one of the best things you can do for your website’s LCP score. While images are great for creating high-quality and engaging content, they are also a leading cause of long user wait times as pages load.
The best thing you can do is reduce an image’s filesize - reducing its dimensions via HTML doesn’t change how long it takes that image to load and render. Compress your images to reduce the amount of time it takes to download them from your server.
You should also be using modern image formats such as PNG or SVG (if you have the technical expertise to implement PNG correctly…).
Minify, defer and minimize
JavaScript and CSS can also block content from loading, leading to poor LCP scores. When this is the case, there are a few steps you should take to optimize Largest Contentful Paint:
Improve your server performance
Slow server performance is definitely going to result in some poor LCP scores. If your server simply takes a long time to respond to requests, it will by definition take a long time for your content to load.
Some typical reasons for poor server response times include:
To avoid these issues, always make sure your server and CMS are up to date and running the latest version. You should also avoid going with the cheapest hosting service you can find. While you might save some money in the short term, performance issues like poor LCP scores aren’t worth the savings.
You may be tempted to ignore LCP issues if you think your website is already fast. It might even have a very low time to first byte. However, failing to monitor LCP and address issues is a big mistake that will impact not just your site’s usability, but likely your ability to attract customers in the first place.
Besides, Google’s incorporation of LCP and the other Core Web Vitals into its ranking algorithm shows that it is continuing to prioritize a good user experience across the web. So fixing and optimizing your Largest Contentful Paint scores will benefit you and your business, not just other people out on the web.
The WooRank Assistant helps identify issues on a page-by-page basis and has recently been updated to include the three CWV checks, helping you to ensure your users have a great on-page experience.