Largest Contentful Paint is a brand new Google user experience metric and soon to be a ranking factor. Learn what’s and how to optimize for it.
Largest Contentful Paint (LCP) is a Google user experience metric. It’s set becoming a ranking factor in 2021. This guide explains what LCP is and how to attain the best scores.
Definition of Largest Contentful Paint
Largest Contentful Paint is a measurement of how long it can take for the main content of a page to download and be ready to be interacted with.
what’s measured is the largest image or block of context inside the user viewport. Anything that extends beyond the screen isn’t used to calculate the score.
Typical elements which are measured are images, iframes, video poster images, background images, and block-level text elements like paragraph tags.
Why is Largest Contentful Paint Measured?
LCP was chosen as a key metric for the Web Vitals score because it accurately measures how fast a webpage may be used. In addition it’s simple to measure and also 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 and elements; and also the heading, div, form elements.
Fundamentally any block-level HTML element that contains text elements may be used, so long as it’s the largest one.
Not all elements are used. For instance, the SVG and VIDEO elements aren’t currently used for calculating the Largest Contentful Paint.
LCP is an easy metric to understand because all you need to do is take a take a take a look at your webpage and determine; what the largest text block or image is and after that optimize it by making it smaller or removing anything that would prevent it from downloading rapidly.
Since 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
Occasionally a webpage will render in parts. A large featured image might take more time to download than the largest text block-level element.
What happens in this case is that a Performance Entry is logged for the largest text block-level element. But when the featured image on top of the screen loads, if that element takes up more of the users screen (their viewport); then another Performance Entry object will be reported for that image.
Images Can Be Tricky for LCP Scores
Web publishers commonly upload images at their original size and after that 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.
Image Sizes and Largest Contentful Paint
It’s possible to achieve a high Largest Contentful Paint score with a big intrinsic size image that’s resized with HTML or CSS to be smaller.
However 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 usually 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 might 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’d have to add a domain that’s specific to Google’s crawler in order to whitelist it in order that it may see the timing info from your CDN.
So at this point, resources (like images) which are loaded from another domain (like from a CDN) won’t be counted as part of the LCP calculation.
Scoring you have to Be Aware Of
All elements which are in the users screen (the viewport) are utilized to calculate LCP. That implies that images which are rendered off-screen and after that shift into the layout once they’re rendered might not count as part of the Largest Contentful Paint score.
On the opposite end, elements that start out in the user viewport and after that get pushed off-screen can be counted as part of the LCP calculation.
The way 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 cell phone might encounter.
The way to Optimize for Largest Contentful Paint
There are 3 main areas to optimize (plus one more for JavaScript Frameworks):
- Slow servers
- Render-blocking JavaScript and CSS
- Slow resource load times
A slow server might be an issue with DDOS levels of hacking and scraper traffic on a shared or VPS host. You might find relief by installing a WordPress plug-in like WordFence to find out if you’re experiencing an enormous onslaught and after that block it.
Other issues might be misconfiguration of a dedicated hosting service or VPS. A typical issue might be the amount of memory allotted to PHP.
Other issues might be out-of-date software like an old PHP version or Content management system software that’s out-of-date.
At worst scenario is a shared server with multiple users which are slowing down down your box. In that case moving to a better host is the answer.
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.
