Largest Contentful Paint is a Google metric that forms part of the Core Web Vitals. As part of the Page Experience Algorithm Update, this is likely to become a partial ranking factor later in 2021.
Definition of Largest Contentful Paint
LCP is measured in seconds and is a record of the amount of time that it takes the browser to render the largest content element after a user has requested a URL. In most cases, the largest element tends to be an image or a video or depending on the type of website, it could be a large text block.
The LCP tells the reader that the URL they requested is actually loading; otherwise, they could be looking at a blank screen.
You may see Agg LCP (or aggregated LCP) show in the Lighthouse report. This, according to Google is “the time it takes for 75% of the visits to a URL… to reach the LCP state.”
Why the LCP Matters
The LCP is part of the CWV as it is a measurement of how soon a web page is usable. This also means that it is an element that can easily be optimised and improved.
You can get to grips with this by looking at a page on your website, working out the largest text block or image, and then optimising it. This can be by making it smaller or removing anything that would slow down the take it takes to download onto the browser.
Remember that Google uses a mobile-first index, or mobile-only as I like to call it, and so when testing, it will be better to use the mobile viewport and not the desktop viewport.
An easy win here is to make sure you upload your images in the correct size instead of resizing the image in HTML or CSS. So instead of uploading an image that is 2048 x 1152 px and then resizing this to be 640 x 360 px, you should upload the image at 640 x 360 pixels to begin with. This way, your image will download within the browser, and your Largest Contentful Paint score will improve.
How to Optimise for Largest Contentful Paint
The main culprits for a poor LCP are:
- Slow server response times,
- Render-blocking JavaScript and CSS,
- Resource load times,
- Client-side rendering.
A slow server can be caused by server misconfigurations or even due to PHP memory allocation. You should also ensure that you are using the latest PHP versions and your CMS, as these can also slow down your server.
Arguably one of the most common causes of a slow server, in my experience, are sharing a server with many other websites. Here, the best option is usually to move to a better hosting provider. You can find out how many websites are on the shared hosting server here: https://viewdns.info/reverseip/.
Generally, improve your LCP by adding caching, optimising your images (without affecting quality) by removing aspects such as EXIF data, fixing render-blocking CSS and JavaScript, and pre-loading some of your assets can help too.
Tools for Measuring Largest Contentful Paint
Google lists the following as field tools for measuring Largest Contentful Paint:
Google lists the following as lab tools (with simulated data) for measuring Largest Contentful Paint:
