Some Google PageSpeed users may have noticed a new metric called Largest Contentful Paint. This was added in May 2020, as Google begins pushing user experience as an important metric in ranking websites on its search engine.
Previously, we wrote about cumulative layout shift, and what that score meant. In this blog post we're going to discuss what Largest Contentful Paint is, the scoring behind it, why it is important for your website, and how to improve it.
Largest Contentful Paint is another metric that helps you measure how fast your webpage takes to load. There are many other metrics that help you get a good idea of how fast your website is, like first contentful print, time to 1st byte, and more.
However, as Google begins to shift more towards user experience, they realized that these metrics aren't great at actually identifying how fast real content loads for real visitors. These metrics are good if you're trying to get a understanding as to how fast your content is loading, but in relation to what your visitor is actually seeing, they don't work well.
Largest Contentful Paint was created to measure how fast visible content for users loads.
The official Google definition of Largest Contentful Paint is as follows: “Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful.”
Basically, this new metric on Google PageSpeed is created to give you a more accurate reading of how fast real world content is loading for human visitors.
The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport. To better understand Largest Contentful Paint, we first need to understand what a content element is.
A content element is a (as one may think) any HTML element that contains human understandable content. Google defines these as images, videos, block level elements that contain text or an element with a background image loaded via the url() function.
If you would like to read Google's complete list of content elements and their definitions, click here.
As you can see, this is a fairly fluid metric, as it will differ between websites. For example, a website that displays an image as their largest piece of content will have a different score in this metric when compared to a website that loads a three word header with nothing else behind it as their largest piece of content.
Now that we understand what a content element is, let's take a look at Largest Contentful Paint. To calculate that metric, Google first identifies the largest content element. The largest content element is the element that falls within the content element parameters, and is the largest one on the page.
So, if you have a header image that is bigger than header text, the header image is the largest content element.
Google then measures how long it takes for that individual element to paint onto the page. That right there is what your Largest Contentful Paint metric is derived from.
Now, this all may be very confusing and technical, so looking at some visual representations of how Largest Contentful Paint is measured could be very helpful (it was for us):
This image was screen captured from Google's Web.dev entry for Largest Contentful Paint. As you can see, both examples show mobile versions of web pages, which is in line with Google's mobile first agenda that they adopted in 2017.
In these examples, the green box signifies what Google is identifying as the largest content element throughout the loading process of the web page. You can see that it changes as new images and elements are rendered to the page. In the first example, we start out with text reading “visual stories” as our largest element, but end up with a featured image being the largest content element on the page.
In the two examples that we just discussed, Largest Contentful Paint occurs last. but, while this is the most typical situation, your largest content element could load before other elements, which would increase your scoring on this metric.
As you can see, in both examples, the largest content element loads before other elements load. That leads to a faster time to load for the largest content element, which results in a better score on your Largest Contentful Paint.
Hopefully this section introduced you to what goes into Largest Contentful Paint. In simplest terms, it is how long it takes for the largest element on the web page to load.
This new metric is extremely important to your Google search engine ranking placements. Over the next couple of months, Google will begin to transition into using user experience and web vitals as important aspects of its ranking algorithm.
Now content has to be not only useful to your visitors, but your visitors need to have a good experience when accessing it.
Google is referring to this category of ranking as page/website delightfulness. It's exactly as it sounds, how delightful is the experience of browsing on your website. Google attempts to calculate this by looking at cumulative layout shift, which we discussed in another blog post, and Largest Contentful Paint.
Additionally, this metric is extremely helpful in determining if your visitors are actually going to have a good time on your website. You want to focus on user experience not only because it will soon directly impact your rankings, but also because users who have a better experience on your website will convert more.
If you're trying to sell something, you'll end up selling more of it, if you're trying to generate leads, you'll end up generating more of them, if you're trying to get people to click on advertisements, you'll end up getting more clicks if your website is easy and fun for visitors to use.
Keep in mind that this metric may change depending on how you are loading content on your webpage. For example, if you're loading a large featured image, that may take longer than loading a large chunk of text. You shouldn't really compare your score in this metric to other websites, as it differs between each individual page.
While Google hasn't specifically stated how they will use this metric in their upcoming search engine ranking placements, they will definitely be taking into account the differences between websites when it comes to this metric.
Largest Contentful Paint has a simple scoring criteria of good, needs improvement, and poor. Anything under 2.5 seconds is good, while anything over 4 seconds is poor.
Thinking about this, as a visitor you would want your largest page element to load in under 2.5 seconds, be it text or an image, so this scoring rubric makes perfect sense.
Improving this score is hugely dependent on your individual page and website. This is because the largest content element differs from page to page. For example, on a blog page the largest element may be a high resolution featured image. But, on a contact page, the largest element may be a simple input form.
because of the variability, there's no “one size fits all fix”, instead you're going to have to create a unique optimization plan to increase your Largest Contentful Paint score.
However, there are a few things that you may want to focus on when it comes to LCP. Optimizing and addressing overall performance issues will definitely increase your score.
One of the largest causes of a slow website is bad hosting. If you don't give your website the resources it needs to load quickly, or are using slow/inadequate hardware, your website will likely be slow as well. Make sure you're on an enterprise level host if you want a fast website. All of our websites are hosted through Cloudways, and we recommend this service to anybody who asks. Their plans work for everybody from a local small business to a Fortune 500 company.
The most common largest content element in web sites are images, so optimizing your images is essential to performance and Largest Contentful Paint scoring. The first thing you should do is serve your images in WebP format, with fallbacks to optimized jpegs or PNG's. You should also ensure that these images are properly sized, and compressed.
Learn how to efficiently encode images here: https://isotropic.co/how-to-efficiently-encode-images-on-wordpress/
Learn how to remove render blocking resources here: https://isotropic.co/how-to-eliminate-render-blocking-resources-for-wordpress-websites/
Google recommends focusing on the PRPL loading aspects of your web page.
In many ways, Largest Contentful Paint is the future of Google PageSpeed scoring, and the Google search engine algorithm in general. What sets this metric apart from every other metric that you can measure using lighthouse or Google PageSpeed, is the fact that it is specific to your individual web page.
Compared to another website, your page could have a similar amount of content, take a similar amount of time to load, and look the same, but have a different Largest Contentful Paint metric. That's because your website’s Largest content element maybe a block of text, while the website you're comparing it to may have a featured image as its largest content element.
At the same time, this is a standard score. Get better than 2.5 seconds, and you're good to go. It doesn't matter what type of element it is, how it's loaded, or why it's loaded, all that matters is if it loads in 2.5 seconds. This is interesting, as it's going to push the industry to focus on less heavy content like text , as opposed to images.
This article should have answered the question “what is Largest Contentful Paint?” And offered a good background and overview of it. In review, LCP is how long it takes the largest content element on your website to load.
The largest content element differs by website, in some it may be a featured image, in others it may be a large block of text.
Because this is a page specific measurement, the ways to address it vary widely. For example, if you have a low score do too a high definition image being your largest content element, consider optimizing that image. If this score is slow because you have a large amount of font, consider preloading your fonts to make this element load faster.
The list goes on and on, and really is dependent on what your largest content element is, and the optimization that you have already done on your website.
And, you can always replace this element with another quicker loading element. For example, if you have a high definition video as your largest element, you may want to think about transforming it into an image, or even text.
As always, if you have any questions feel free to reach out in the comments.
Furthermore, our subsidiary SpeedOpp, that’s created to exclusively address low Google PageSpeed scores is currently piloting a program that directly increases low LCP scores. If you have a low Largest Contentful Paint score, and you don’t want to spend the time fixing it yourself, reach out and we’d love to discuss this new offering with you.
IsoGroup- Web Dev/Design, WordPress and More