In the first of our series on the core web vitals, we take a look at the performance metric ‘Largest Contentful Paint’.
Many components are used when trying to create a functioning website that works on many levels. One of the key components that you actually need to pay close attention to is the load speed of the pages themselves. Internet browsers are very impatient, and there is nothing more frustrating than sitting waiting for a page to load. This is why web designers need to be aware of a handy tool called Largest Contentful Paint (LCP).
What is Largest Contentful Paint?
It is most useful to start with a description of what Largest Contentful Paint – otherwise known as LCP – actually is. This is a user-centric metric that is used to measuring the perceived load speed of a page.
The perceived load speed is how quickly the page loads and renders all of its visual elements to make a complete page. Ideally, we want this loading time to be as quick as possible. In addition to this, all elements on the page need to load quickly. This is far more than just loading the page as needed, it is important that all pieces are as intact as possible.
The LCP is a key part of this whole process. It is the point in the page’s load time where most of the page has successfully loaded. We have all sat waiting for a web page to load and have been satisfied when bits and pieces of texts and images begin to render. This is the LCP in action. It exists to show the user how viable the webpage is likely to be.
What is a Good LCP Score?
Since LCPs deal with the load times of site pages, obviously the faster your pages load the better. Remember that this is not necessarily the load time of the entire page, but instead the point from which the page can be considered to be useable.
It is often thought that the LCP of any page needs to occur within 2.5 seconds. If your page is taking longer than 4 seconds to reach the LCP, you need to make some serious adjustments to the way the site is managed. Making changes where you can should massively speed up your load times and improve the LCP.
What Elements are Considered When Determining LCP?
All elements of the page are considered when determining an LCP score, but there are some that are larger than others. These are more likely to have a detrimental effect on the website as a whole. The most common of these are images and videos, as one might expect. Anyone with some experience of websites will know that it can take a few seconds for images and video content to load on a webpage.
However, there are some additional types of images that you need to be aware of. These are to do with how the page itself is constructed. First of all are any images inside an SBG element. You should also watch out for background images that are uploaded using a URL function instead of a CSS gradient.
When Will the LCP Be Reported?
Every webpage loads in stages. Even if it feels like one just opens up smoothly with no delay, it is actually loading its stages incredibly quickly. Since the webpage might change in the middle of this load, the largest contentful element will be loaded as quickly as possible. The others will then follow quickly behind it.
For example, most websites have an image as part of their navigation banner. If someone was to load a blog post on the website, the browser would load the text of the blog first, then the image in the banner, and then any additional images attached to the blog post. Once the banner image has been loaded, the LCP is reported.
The LCP is only reported when the largest contentful element, whatever it may be, is fully rendered and visible to the user. This can also be interrupted by something as simple as a user choosing to scroll on a webpage or opening the page as a background tab instead of a focus one. While the connection is obviously made, the element cannot begin to load until it is focused on a webpage. This is why you will sometimes see a small lag when opening a new tab for the first time even if you initially opened it as a background tab. The elements have not yet had a proper chance to load and thus the LCP has not yet been reported for this page.
How to Measure Your LCP?
Any company committed to improving the quality of their website is going to need to address their LCP at some point. This is an important part of any site and it is something that the users will most definitely notice. If you have noticed a drop in the dwell time on your website, you should think about looking at your LCP as one of the first steps. A poor load time could be one reason why people are choosing to click away.
Your site’s LCP can be measured in both the lab and the field depending on your needs. There are several tools from Chrome like the Chrome User Experience Report or the Chrome DevTools that could help you here. You can also measure LCP using the Javascript library and other tools.
Find Out Your LCP Today?
Your LCP is one of the most important functions on your website and you need to ensure that it is working to its full potential. Slow servers, Javascript and CSS could all be key reasons why this function is not behaving as it should and, in turn, slowing down the load times of your website.
If you want to speed up the load times of your website, one of the first places that you could address will be your LCP. Get your LCP speed tested as soon as you can, and then start to take steps towards optimising it for better performance.