Semalt: Large Contentful Paint (LCP)
If you're reading this, then the chances are that you're wondering what a contentful paint is? How to measure your LCP score, and what ways can an LCP score be optimized to improve your Сore Web Vitals score?
In this article, we will help you find answers to all these questions. The Largest Contentful Paint (LCP) is a Google user metric that is now a ranking factor for starters. By the end of this piece, you should have learned what LCP is and how to help you achieve the best score.
What Is Largest Contentful Paint?
An LCP is a measurement of how long it takes for the main content of a page to download and be ready to interact with the user. This measurement considers the largest block of content that fits into the user's screen or the size of images on the page.
LCP only measures what displays on the screen at that moment, and anything outside the user's viewpoint is considered irrelevant. Some of the elements LCP measures include:
- Video poster images
- Background images
- Block-level text elements like paragraph tags
The LCP metric lets you measure how long it takes for the visual elements of a site to load. No doubt, this knowledge will go a long way in improving the User experience factor of CWVs. Thanks to LCP, we can improve the satisfaction visitors enjoy on your site and its display.
When a site takes too long presenting content to the user, there is a high chance that the user will remain unsatisfied. In most cases, the user will leave.
Is Measuring LCP Important?
While LCP may not be something you often hear or see on every SEO article you read, it is important. LCP was chosen as one key metric for Core Web Vitals, and that wasn't a mistake. That is because of how accurately it measures how soon a user can use a website once searched.
This gives you a perspective of your site you may not have found anywhere else. It makes it so easy to measure elements like block-level and large elements on a page.
Block-Level Elements Used to Calculate the LCP Score
Block-level elements used for calculating the LCP score can be the <main> and <section> elements alongside the div, heading form elements.
Any HTML block element that contains text elements can be used as long as it is the largest. Not all elements are included. For example, VIDEO and the SVG elements are not considered when calculating the LCP. However, it is possible that such elements may be added in the future.
Because all you need to do is look at your webpage and pick out the largest block or image, LCP is simple to understand. It's almost the most basic metric to calculate. Then when the site needs to be optimized, the size of these elements needs to be reduced. It's that simple.
Considering that the majority of web traffic seems to come from mobile devices, it's best you consider a mobile-first approach. Also, because Google considers Mobile First in its indexing checklist, it's best we optimize the mobile viewpoint first, then we can focus on the desktop version of your site.
Delaying Large Elements Might Not Help
Have you noticed that sometimes, webpage loads in fragments? Having a large featured image may take longer to render when compared to the largest text block-level element completely.
When faced with this challenge, we log a PerformanceEntry for the largest block-level elements. But if the featured image at the top of the screen loads, and that element takes up more of the user's screen, we will have to report another PerformanceEntry objective for the image.
Images Are Most Times The Trickiest Part Of Measuring LCP Scores
Most times, web publishers upload images in their original size and then use CSS or HTML to resize the image and have it displayed at a smaller size. We refer to the original size as the intrinsic size of the image.
When a publisher uploads an image of 2048 pixels wide and 1152 pixels in height, that is the original and intrinsic size. But when the publisher resizes that image to, let's say, 640 X 360 pixels, that new value is what is considered visible size. When choosing what figures to use when measuring, Google simply goes for the smaller size between the Intrinsic and visible size image.
It is possible to achieve a higher LCP score still when your intrinsic size image is resized using HTML or CSS to be smaller than the visible size image. Smaller images mean they download faster, and your LCP rises.
How LCP Considers Images Featured From Another Domain
Let's assume an image is served from a CDN (Content Delivery Network), is it considered when calculating the LCP score? No, it's generally not considered. Publishers who wish to include that in their LCP score should set up a Timing-Allow-Origin header.
When this header is added to your site can be tricky. Using the (*) wildcard in the configuration could open your site up to a hacking event. So when adding this header, you would have to add a domain that's specific to Google's crawler in order to allow it so that it can see the timing information from your CDN.
At this point, resources like images that you loaded from another domain will not be counted as part of the calculation.
How To Measure An LCP Score
There are two types of scoring tools: Field tools and Lab tools.
Field tools refer to an actual measurement of a site's performance.
Lab tools on the other hand 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.
Optimizing for LCP
There are three main areas we focus on when optimizing, namely:
- Slow servers
- Slow resource load time
Having slow servers can be an issue with DDOS levels.
Speed has become an important aspect of surviving as a website. To get to your target audience, you must be the best, including having a very good LCP.
Semalt provides services that include optimizing your site so that it loads quickly on every device. With improved user experience and other SEO benefits, your website will stand a better chance at ranking and converting visitors.