In the 2nd part of our Core Web Vitals guide, we’ll talk about the first of the three metrics, Largest Contentful Paint or LCP. I’ll run you through everything you need to know about LCP and how you can optimize for it to get your website prepared for when Core Web Vitals become a ranking factor in 2021.
Website loading speeds are one of the most important ranking factors and it highly affects user experience as well. If it takes minutes before your main content loads, it is a bad experience for the user.
Before, it was challenging for developers to measure the time it takes for the main content of a web page to be visible to a user. So Google kept it simple and found out that the best way to measure it is by the largest element on the web page thus the metric, Largest Contentful Paint.
What is Largest Contentful Paint (LCP)?
Largest Contentful Paint is a measure of how long does it take for a web page to load the largest element until it is visible in the viewport.
As written in the first part of the Core Web Vitals guide, a measure of good LCP is when the Largest Contentful Paint of a webpage load within 2.5 seconds. Anything between 2.5 seconds to 4.0 seconds needs improvement and any LCP loading speed above 4.0 seconds is poor.
Elements that are considered for LCP
Currently, there are five elements that are considered for LCP.
- Image elements
- Image elements inside Scalable Vector Graphics or SVG elements
- Video elements
- Background images loaded using url()
- Block elements with text
How to Identify the Largest Contentful Paint of a Web Page
If you want to know what Google considers the LCP of a web page, you can use the Chrome Developer Tools.
First, go to the page that you want to check, fire up Chrome Developer Tools (ctrl+shift+I), then go to Performance.
Click the record button and refresh the page. Wait for 10 seconds or until the page fully loads then stop the recording. You should now see the web page data. Under Timings, you should see LCP, and when you hover your mouse over it, the Largest Contentful Paint of the web page should be highlighted. In this screenshot, I identified the LCP of a blog post and the LCP of it is the featured image.
What causes poor LCP?
Slow Server Response Times
A slow server will negatively affect all loading speed metrics across your website. And even if your other resources are optimized, all of it will just be wasted as long as you have a poor performing server.
Resource Load Times
Images, videos, and text-block elements that render above-the-fold have a direct effect on LCP. Big elements such as hero banners must be optimized to reduce loading times.
How to Optimize Largest Contentful Paint (LCP)
The first thing that you should look up when optimizing your server is your web hosting. You’ve got two options here: either opt for a higher hosting plan with your current provider or move to a different provider.
If you’re on a shared website hosting, moving to a dedicated server is a big improvement since you won’t be sharing resources anymore with other websites. Always make sure to choose a reliable and reputable hosting company. Do your research first and find out if they are using updated software and equipment. Customer support is also a priority as well.
Caching and using a Content Delivery Network (CDN) can greatly improve your server performance as well. Both will reduce the time that it takes for a browser to load the content of a web page.
Unoptimized images are one of the most often causes of poor LCP. All images above the fold such as hero banners, carousels, banners, featured images are common and the first thing you should do is make sure that these are optimized
You can use various tools to compress images before you upload them. You can even install plugins on your website to compress existing images there. Reducing the file size of images reduces the load. You should also use modern image formats.
Do a quick review of the images on a web page with poor LCP if some of these images are necessary. One of the easiest methods to reduce LCP is by simply removing images. If these are still not enough, consider using an image CDN.
When optimizing for LCP, remember that the goal is to serve the user the above-the-fold section of your website as much as possible. Above-the-fold is the first thing that the user sees on your website as soon as it loads.
Instead of loading scripts and stylesheets above-the-fold, defer them by placing them below-the-fold so the browser can focus loading on what matters most, the main content of the web page.
Always check for unused and unnecessary lines and characters in your stylesheets and scripts. It may not look much but every bit can help shave-off loading times of your website little by little.
Test Your LCP
Use Google Search Console to identify which pages on your website have poor LCP scores. Once you are done optimizing them, use the various Field and Lab tools to make sure that your LCP is up to speed.