Google’s page experience update is in full swing, and that means SEO professionals like you need to think about Core Web Vitals like Largest Contentful Paint (LCP).
But what is Largest Contentful Paint, why is it so important, and what can you do to improve yours (and boost your rankings in the process)? Learn all that and more in this ultimate guide to LCP.
- What Is Largest Contentful Paint (LCP)?
- Why Does Largest Contentful Paint Matter?
- How Do I Find the Largest Contentful Paint?
- How to Optimize Largest Contentful Paint
What Is Largest Contentful Paint (LCP)?
If you’ve been following SEO news over the course of the last year, then you’ve probably heard of Google’s page experience update.
The update is, in short, designed to reward pages that provide a stellar user experience. This is measured using a wide variety of metrics, including a set of signals called Core Web Vitals.
As Google first explained back in the spring of 2020, the three signals that make up Core Web Vitals are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS):
Here, we’ll be focusing on Largest Contentful Paint. Put simply, this signal indicates a page’s loading time. Put a little less simply, it measures how long it takes for a page’s largest contentful element (such as a big, colorful photo or high-res graphics) to be rendered and thus become fully visible to the user.
Note that this is different from both First Paint (the time it takes for a web page’s first pixels to load) and First Contentful Paint (FCP) (the time at which a web page’s first text or image appears). These differences are perfectly illustrated in a handy chart from GTmetrix:
In terms of the LCP, you should shoot for 2.5 seconds or less. Speeds ranging from 2.5 to 4 seconds are okay but in need of improvement, while those over four seconds are downright poor and should be addressed immediately.
Why Does Largest Contentful Paint Matter?
Especially if you’ve taken the time to optimize your site’s page speed (kudos to you!), you may be wondering why Largest Contentful Paint is all that important.
The answer comes down to Google’s new, more nuanced view of the user experience. For instance, if you’ve enabled asynchronous loading, then your page’s plain text will likely load before its heavier multimedia files. With Largest Contentful Paint, Google can now measure how long it takes for those multimedia files to load in order to gain a better understanding of your page’s overall speed, not just its text loading speed.
From an SEO perspective, Largest Contentful Paint (and the other two Core Web Vitals signals) is particularly important in light of Google’s recent page experience update. The update finished rolling out at the end of August 2021, which means that page experience as a whole is now officially a ranking factor.
As such, your site’s page experience will now have a very real impact on its SERP positions, level of exposure, and potential traffic.
How Do I Find the Largest Contentful Paint?
We’ve established that LCP is one of the important signals that Google uses to determine your site’s page experience, but how can you actually go about finding it?
It turns out that you have several options. If you want to see data gathered from real users, you can find the LCP in:
- your Chrome User Experience Report (CrUX);
- your PageSpeed Insights report;
- Search Console’s Core Web Vitals Report; and
- the web-vitals JavaScript library.
And if you want to see data gathered from controlled, automated tests instead, you can find the LCP in:
- Chrome DevTools;
- Google’s Lighthouse; and
- Catchpoint’s WebPageTest.
If you’ve got a knack for JavaScript, you can even use the Largest Contentful Paint API.
Although LCP data from any of those sources can be useful, it’s important to use at least some that have been gathered from real users. This will give you valuable insights about the user experience that an automated test conducted by a computer simply cannot.
How to Optimize Largest Contentful Paint
So you’ve finally measured your site’s own Largest Contentful Paint only to find that it clocks in at more than the recommended 2.5 seconds. What now?
It helps to start by learning about some of the common causes of a higher-than-desired LCP. These include:
- slow-loading page elements;
- improperly configured client-side rendering;
- sluggish server response times; and
- render-blocking code.
Luckily, each of those issues has its own straightforward set of solutions.
- For slow-loading page elements such as images or videos, consider using image optimization tactics such as compression, pre-loading important resources, and implementing adaptive serving.
- For improperly configured client-side rendering, correct it by minifying large JavaScript files, minimizing unnecessary JavaScript, using server-side rendering, or using pre-rendering.
- For sluggish server response times, optimize your server’s code, consider routing faraway users to a content delivery network (CDN) located closer to them, implement caching, use a service worker, make early third-party connections with rel=preconnect, and use signed exchanges.
- For render-blocking code (e.g., scripts and stylesheets), minify CSS and JavaScript, inline important CSS, reduce unused polyfills, and remove unnecessary code of any kind.
Depending on the cause of your high LCP, the changes you make can have a profoundly positive impact. In one example shown on web.dev, the simple act of minifying a site’s CSS improved its LCP by an impressive 0.6 seconds:
Similarly, compressing HTML, JavaScript, and CSS files using the Brotli compression algorithm improved LCP by almost one full second:
So, as you can see, optimizing your Largest Contentful Paint doesn’t necessarily mean scrapping your existing optimization efforts or re-working your content. With just a few simple tweaks, you can help your site pass Google’s Core Web Vitals tests with flying colors.
Improve LCP to Future-Proof Your Site
With their page experience update, Google made it crystal clear that Search is all about giving users the best and smoothest experience possible. So as one of the three Core Web Vitals that Google is now using as ranking factors, Largest Contentful Paint is a powerful metric that’s crucial to optimize for.
When you do, you’ll be future-proofing your site and ensuring it can thrive in Google’s user-centric future.
Image credits
web.dev / April 2020
GTmetrix / Retrieved September 2021
web.dev / August 2020