What is Largest Contentful Paint (LCP) & How To Improve Scores
Updated on Jul 13, 2024
- LCP is the moment the biggest element on a page to be loaded
- A quick hack can dramatically improve scores
- Just add fetchpriority="high" to the main image
Google’s Core Web Vitals initiative sets common standards for speed and user experience with defined metrics to measure performance. One of these is Largest Contentful Paint (LCP) and it became a vital ranking factor in 2021. Today it is given 25% of the overall Web Vitals weighting so it's extremely important to understand and optimise.
If you aren’t aware of its central role in the page rendering lifecycle, read on to see exactly how Largest Contentful Paint works, how you can use it to boost your website’s ranking and best of all - a quick way to improve the score.
Contents
- What Is Largest Contentful Paint
- Identifying the LCP element
- Why LCP Matters
- How to Measure LCP
- What's A Good Score
- What Elements Are Considered
- How The Size Of An Element Is Determined
How To Improve LCP Scores - What If The Largest Element Is Not The Most Important
- Conclusion
What is Largest Contentful Paint
Largest Contentful Paint is a measurement of how long it will take for the main content of a web page to download (usually an image) so the user can interact with it. In the case of this article, the LCP element is the main image at the top of the page
Chrome renders pages in frames and logs PerformanceEntry events for each one indicating the largest element in that frame. When page loading is complete, LCP is determined by looking at loading time of the largest element in the last frame. LCP is visualised in the image below:
You’ll see the LCP was initially the H1 and was then replaced by the image which loaded in the last frame.
Identifying the LCP element
Often, it will be obvious what the LCP element is if you have one standout piece of content such as the image that appears at the top of this article. If you aren’t sure, there are a few tools that give a definitive answer.
WebPageTest
webpagetest is a great resource for highlighting what the LCP element is. Just enter your URL on the homepage and start a scan. When the results are shown click on LCP:
In the case of our website homepage, the LCP element is identified as the laptop image that appears under the title:
Pagespeed Insights
Pagespeed Insights can also show what the LCP element is on both mobile and desktop. Run a test and scroll to the Diagnostics section. Expand the dropdown for LCP and you’ll see a little image to show what was classed as the LCP element.
Interestingly, Pagespeed Insights choose the H1 as the LCP element on mobile. We could have easily assumed the image would be the LCP but because it’s below the fold on mobile, that isn’t the case.
Many sites use google fonts to display the H1 in a nice style and in this case that could lead to a delay in the LCP element loading. To avoid issues, we ensure the Text Remains Visible During Webfont Load by using a system default as a fallback.
Why LCP Matters
When the LCP happens, it signals the moment the page is ready for the user to interact with so the earlier this occurs, the sooner users can start browsing. For that reason Google base a whopping 25% of the Web Vitals score on LCP.
A good score will therefore be an empirical measurement of performance that Google can use when grading the website, which will positively impact ranking decisions.
This is why for any website creator or owner, sophisticated design and good content are not enough. A good LCP score is also pivotal to the user experience and the better the user experience, the higher the content will rank.
How to Measure LCP
LCP data comes in two flavours:
- Field Data - information collected from real users visiting your site
- Lab Data - information collected in a synthetic tool executed in consistent conditions
Whatever method you choose, tools can speed up the work to make the measurement easier to gather. If you are using the Field method, you could use some of the following:
- Chrome User Experience Report.
- PageSpeed Insights.
- Search Console (Core Web Vitals report).
- web-vitals JavaScript library.
- PageSpeedPlus
For those using Lab tools, you can use the following:
- Chrome DevTools
- Lighthouse
- WebPageTest
- PageSpeedPlus
What Is a Good LCP Score
When monitoring Web Vitals metrics, it’s beneficial to know what the performance thresholds are.
To guarantee you hit this target for your website’s users, you need to measure the 75th percentile of page loads across all desktop and mobile devices.
However, while having an understanding of the minimum requirements is essential, monitoring this metric over time is just as crucial and that’s where PageSpeed Plus can help. With a few clicks, you can set up monitoring for your website and capture LCP data along with the other Web Vitals metrics CLS and FID.
Ensuring that you measure the website loading speed is just as important as focusing on high-quality content. Many people view content and products as the best approach to delivering a great service. But understanding how people interact with your website is so important. As it takes 0.05 seconds for a user to form an opinion about a site, you have to be quick and provide an instant impact, which is why a great LCP is so crucial.
What Elements are considered for Largest Contentful Paint
As specified in the Largest Contentful Paint API, the types of elements considered for LCP are as follows:
- img elements.
- image elements inside an svg element.
- video elements.
- Block level elements such as H1, H2, H3, p, div
- Elements with a background image loaded via the url() function
Determining Element Size
The size reported for Largest Contentful Paint is usually the size that is visible to the user. If the element goes outside of the viewport or is not visible, they do not count towards the size of the elements. If image elements are resized from their intrinsic size, the size reported that determines the score is going to be either the visible size or the intrinsic size, whichever is smaller.
How To Improve LCP scores
This is what you really came to find out. Learning how to optimize LCP is necessary for achieving a good score. At a high level, the score is influenced by four key factors:
- Images
- JavaScript
- Slow server response times
- CSS
Here are some simple ways to optimize your website for Largest Contentful Paint:
Images
The majority of LCP issues come from images. There are a variety of techniques to make their delivery more efficient such as compressing, lazy loading, serving the image in next-gen format and serving the right sized image for a device. Solutions for all of these problems exist and they can be used in unison to tackle the issues.
1) Use Priority Hints - PageSpeedPlus Recommendation
When browsers are downloading a webpage, they encounter assets and scripts, which are assigned a loading priority that the browser thinks is best for the page to render.
This priority can be manually specified so that the LCP asset is given the highest rating and will be processed sooner. The best news is it couldn’t be simpler.
Here’s an example:
<img src="lcp-image.jpg" fetchpriority="high">This tells the browser you consider the resource a high priority and want it to be prioritized. We implemented this on the main image from our homepage and the result was 200ms faster loading time. Here is visual proof:
And here's the impact it had on the pagespeed score:
Here's what the eBay team had to say after implementing priority hints:
Aside from boosting the priority of important elements, Priority Hints can also be used to lower the priority of others to avoid your LCP element competing with other high priority resources. This is another useful feature that is often overlooked. An example use case would be an image carousel where the first image has significantly higher priority than the rest. In that scenario, you can prioritise the first image and deprioritize the rest.
<ul class="mycarousel">
<img src=“img-1.jpg" fetchpriority="high">
<img src=“img-2.jpg" fetchpriority="low">
<img src="img-3.jpg" fetchpriority="low">
</ul>This gives another signal to the browser about what order things should be loaded and frees up resources for the main LCP element.
2) Cloudflare Image Resizing
Fortunately, there is a single tool that solves compression, right sizing and serving the right format all at once, which is Cloudflare Image Resizing. By leveraging this easy to use product, most of your image problems will disappear almost instantly.
Cloudflare Images Resizing allows you to use a single master image file as a source, which is compressed and transformed on their edge network as it is requested. Assuming you have an image hosted at:
https://yoursite.com/images/yourimage.jpgsimply change the URL to the following:
https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpgThis returns a compressed version of the image in either AVIF, WebP, PNG, JPEG on GIF, depending on what is supported by the users browser. It reaches them in milliseconds due to the scale of the Cloudflare CDN, which is all over the world.
The image will be served at 100x100 pixels. If you want a different sized version, just tweak the parameters to specify the size needed. This allows the correct sized version to be loaded on mobile devices.
3) Preloading
By preloading a resource, you can force browsers to fetch it ahead of everything else. This can be used in scenarios where Priority Hints don’t work like difficult to discover images such as a background image specified in CSS.
For that to be discovered naturally by browsers, the HTML page has to be parsed, then the CSS has to be downloaded and parsed. Preloading can hoist the background image up to the top of the queue so it is loaded before being discovered naturally by the browser.
<link rel="preload" href=“/img/banner.jpg“ >Priority hints are a newer and easier to implement method and give more flexibility to push things up and down the loading order. In general terms Priority Hints should be used for assets that are needed right away and Preloading should be reserved for assets needed in the future.
4) Lazy load images
Only content above the fold is considered for LCP. Deferring the loading of images below the fold, until users scroll avoids time being wasted on rendering items that users cannot see and allows the browser to put all its effort into rendering the visible portions of the page. We recommend the Lazysizes library because it's easy to use.
Just add the script to the page, add class="lazyload" to the image and change src to data-src. Here's an example
<img data-src="flower.jpg" class="lazyload" alt="">JavaScript
Avoid JavaScript
JavaScript can slow down the page rendering process a lot. Various methods exist to optimise its loading but the best approach is to eliminate JavaScript use altogether, which avoids blocking scripts from getting in the way.
Optimise JavaScript
If you really need to use JavaScript then make sure to reduce the impact by deferring the load until the LCP is finished. If some JavaScript is needed for the initial page load, then inlining it will reduce the impact. If using Cloudflare, there are several of performance settings that can optimise the delivery of JavaScript with 1 click such as these:
Choose a Reliable Hosting Service
Good hosting will have a seismic impact on the overall loading time of the page. Choose a high-quality hosting service with a good reputation. Make sure the servers are located close to your users geographically and ensure there are cost effective options for scaling if traffic levels increase. Getting hosting right will go a long way to guarantee your LCP score stays in the green. We recommend AWS.
What if the Largest Element Is Not the Most Important
As a rule, the largest element is considered the most important factor in your LCP score. However, there will be times when the most important element on the page is not the same as the largest element. This is where developers might be more interested in measuring the render times of the elements instead, which can be achieved with the Element Timing API.
Wrapping Up What is Largest Contentful Paint
| ✅ Good | A page loading time of up to 2.5 seconds. | |
| 🟠 Average | Between 2.5 seconds and 4.0 seconds means it needs improvement | |
| ❌ Bad | Anything over 4.0 seconds is classed as poor. | |
Fast websites provide a rich user experience. Because website speed is such an important component of any SEO strategy, the Largest Contentful Paint metric needs to be a key focus. Amazing content and wonderful services are great but if you ignore LCP, you are ignoring the most important Core Web Vital that will have a major impact on your abilities to rank.
PageSpeedPlus can help you monitor and track LCP over time for your important pages so if the score changes, you will know about it immediately.