15 Jul Largest Contentful Paint – Easy Explanation via @martinibuster
Largest Contentful Paint (LCP) is a Google user experience metric. It is set to become a ranking factor in 2021. This guide explains what LCP is and how to achieve the best scores.
Definition of Largest Contentful Paint
What is Largest Contentful Paint?
LCP is a measurement of how long it takes for the main content of a page to download and be ready to be interacted with. What is measured is the largest image or block of context within the user viewport. Anything that extends beyond the screen does not count.
Typical elements that are measured are images, video poster images, background images, and block-level text elements like paragraph tags.
Why is LCP Measured?
LCP was chosen as a key metric for the Web Vitals score because it accurately measures how fast a web page can be used. Additionally it is easy to measure and to optimize for.
Block-level Elements Used to Calculate the LCP Score
Block-level elements used for calculating the Largest Contentful Paint score can be the <main> and <section> elements, as well as the heading, div, form elements.
Basically any block-level HTML element that contains text elements can be used, as long as it’s the largest one.
Not all elements are used. For example, the SVG and VIDEO elements are not currently used for calculating the Largest Contentful Paint.
LCP is an easy metric to understand because all you have to do is look at your web page and determine what the largest text block or image is and then optimize it by making it smaller or removing anything that would prevent it from downloading quickly.
Because Google includes most sites in the mobile first index, it’s best to optimize for the mobile viewport first, then the desktop.
Delaying Large Elements Might Not Help
Sometimes a web page will render in parts. A large featured image might take longer to download than the largest text block-level element.
What happens in this case is that a PerformanceEntry is logged for the largest text block-level element. But when the featured image at the top of the screen loads, if that element takes up more of the users screen (their viewport), then another PerformanceEntry object will be reported for that image.
Images Can Be Tricky for LCP Scores
Web publishers commonly upload images at their original size and then use HTML or CSS to resize the image to display at a smaller size.
The original size is what Google refers to as the “intrinsic” size of the image.
If a publisher uploads an image that’s 2048 pixels wide and 1152 pixels in height, that 2048 x 1152 height and width are considered the “intrinsic” size.
Now, if the publisher resizes the 2048 x 1152 pixel image to 640 x 360 pixels, the 640×360 size image is called the visible size.
For the purposes of calculating the image size, Google uses whichever size is smaller between the intrinsic and visible size images.
Note About Image Sizes
It’s possible to achieve a high Largest Contentful Paint score with a large intrinsic size image that is resized with HTML or CSS to be smaller.
But it’s a best practice to make the intrinsic size of the image match the visible size.
The image will download faster and your Largest Contentful Paint score will go up.
How LCP Handles Images Served from Another Domain
Images served from another domain, like from a CDN, are generally not counted in the Largest Contentful Paint calculation. Publishers who want to have those resources be a part of the calculation need to set what’s called a Timing-Allow-Origin header.
Adding this header to your site can be tricky because if you use a wildcard (*) in the configuration then it could open your site up to hacking events.
In order to do it properly you would have to add a domain that’s specific to Google’s crawler in order to whitelist it so that it can see the timing information from your CDN.
So at this point, resources (like images) that are loaded from another domain (like from a CDN) will not be counted as part of the LCP calculation.
Scoring Gotchas to Be Aware Of
All elements that are in the users screen (the viewport) are used to calculate LCP. That means that images that are rendered off-screen and then shift into the layout once they are rendered may not count as part of the Largest Contentful Paint score.
On the opposite end, elements that start out in the user viewport and then get pushed off-screen may be counted as part of the LCP calculation.
How to Get the LCP Score
There are two kinds of scoring tools. The first one is called Field Tools and the second one is called Lab Tools.
Field tools are actual measurements of a site. Lab tools give a virtual score based on a simulated crawl using algorithms that approximate Internet conditions that a typical user on a mobile phone might encounter.
How to Optimize for Largest Contentful Paint
There are three main areas to optimize (plus one more for JavaScript Frameworks):
- Slow servers
- Render-blocking JavaScript and CSS
- Slow resource load times
A slow server can be an issue with DDOS levels of hacking and scraper traffic on a shared or VPS host. You may find relief by installing a WordPress plugin like WordFence to find out if you’re experiencing a massive onslaught and then block it.
Other issues could be misconfiguration of a dedicated server or VPS. A typical issue can be the amount of memory allotted to PHP.
Other issues could be outdated software like an old PHP version or CMS software that is outdated.
Worst case scenario is a shared server with multiple users that are slowing down your box. In that case moving to a better host is the answer.
Typically, applying fixes like adding caching, optimizing images, fixing render blocking CSS and JavaScript and pre-loading certain assets can help.
Google has a neat tip for dealing with CSS that’s not essential for rendering what the user sees:
“Remove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site.
For any CSS not needed for initial rendering, use loadCSS to load files asynchronously, which leverages rel=”preload”and onload.
<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>”
Field Tools for LCP Score
Google lists three field tools:
PageSpeed Insights
Search Console (Core Web Vitals report)
Chrome User Experience Report
The last one, Chrome User Experience Report, requires a Google account and a Google Cloud Project. The first two are more straightforward.
Lab Tools for LCP Score
Lab measurements are simulated scores.
Google recommends the following tools:
Chrome DevTools
Lighthouse
WebPageTest.org
The first two tools are provided by Google. The third tool is provided by a third party.
Sorry, the comment form is closed at this time.