Core Web Vitals Part 1: Largest Contentful Paint (LCP)

Core Web Vitals Part 1: Largest Contentful Paint (LCP)

1.Quick read

Historically, measuring how fast the key content of a web page loads and is available to users has become difficult for web developers.
Older metrics, such as load or DOMContentLoaded, are no longer useful since they do not often correlate to what the consumer sees on their computer. Furthermore, newer, user-centric efficiency indicators such as First Contentful Paint (FCP) only catch the first few seconds of the loading experience. This moment is not really important to the customer whether a website shows a splash screen or a loading indicator.
In the past, performance metrics such as First Meaningful Paint (FMP) and Speed Index (SI) (both available in Lighthouse) were proposed to better capture some of the loading experience after the initial paint, but these metrics are complex, difficult to understand, and sometimes incorrect—meaning they also do not identify when the page’s key content has loaded.
For most websites, the largest element in the viewport should be the first thing users see to begin their journey across the page. As a result, Largest Contentful Paint is now regarded as one of the critical rendering metrics, and Google has used it as one of the Page Experience variables.
This post would explain what LCP is and all the factors related to it.

2. What is LCP

Largest Contentful Paint (LCP) is a metric of Core Web Vitals. It counts how long it takes for the largest element of a web page to appear in the user’s browser.
LCP is a user-centric metric since the largest element in the viewport is typically the most significant, and rendering it as soon as possible increases the user experience of the users.
LCP searches for the largest element loaded in the viewport during the loading process and record the time it took to render the element after the page began loading.
According to studies, the most significant feature on a web page – the one that people choose to see as soon as possible – is usually the one that is the largest. Consider news pages, weather.com, and blog posts…
You understand the pain if you’ve ever seen a website like that and then clicked back when it took forever to load the content you were expecting to see.

Follow More Articles

Contact Us

3. What is a good LCP score?

Since LCP tests rendering time, the lower your ratings, the better, because your users can see the required content faster.
Having said that, Google has listed the following LCP value thresholds:
LCP of 2.5s or less is considered good.
LCP between 2.5s and 4s needs improvement;
LCP 4s or higher is considered poor.
So if you want to “pass” the Core Web Vitals, you need an LCP score of 2.5s or less for 75% of all your page views.

4. What factors are taken into account?

The categories of elements considered for Largest Contentful Paint are currently defined in the Largest Contentful Paint API:
  • elements with <img>
  • <image> elements contained within an element
  • <video> components (the poster image is used)
  • An element with a background image that was obtained using the url() function (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text elements children.

5. Does your LCP score have an effect on your SEO?

LCP, along with Cumulative Layout Shift and First Input Delay, will be used as a minor ranking element in mobile search when the Page Experience upgrade goes live in June 2021.
Even more specifically, hitting the recommended benchmarks for all three measures will decide whether or not a badge is shown next to your site in search results, which would almost certainly affect your clickthrough performance!
Google can use the field data obtained from Google Chrome users on your website. These usage statistics are saved in the Chrome User Experience Report, allowing you to optimise your site using the same data as Google uses for rating.

6. Why should you be concerned with Largest Contentful Paint?

Even if you aren’t concerned about Core Web Vitals being a ranking consideration, I suggest concentrating on LCP when optimizing your web performance.
Google used this measure for a reason: it correlates well with metrics measuring user behavior.
If you’re struggling to improve your conversion rates, time spent on-page, or any other behavior indicators that have a direct effect on your business, optimizing your render performance would undoubtedly help. It was deliberate to reduce the elements to this small number in order to keep things simple at first. If further research is conducted, additional elements (e.g. svg>, video>) can be included in the future.

7. How is the size of an element determined?

The size recorded for Largest Contentful Paint is usually the size noticeable to the user inside the viewport. Whether an element stretches outside the viewport, or if any part of it is clipped or has non-visible excess, those parts are not included in the element’s size.
The size that is registered for image elements that have been resized from their intrinsic size is either the observable size or the intrinsic size, whichever is smaller. Images that have been compressed to a scale that is much less than their intrinsic size, for example, will only report the size at which they are viewed, while images that have been enlarged or increased to a greater size will only report their intrinsic sizes.
Only the size of the text nodes is taken into account for text elements (the smallest rectangle that encompasses all text nodes).
Any margin, padding, or border added through CSS is ignored for all elements.

8. When is the largest contentful paint reported?

Since web pages always load in stages, it’s possible that the largest element on the website will change.
To deal with this possibility of change, the browser sends a PerformanceEntry of type largest-contentful-paint defining the largest contentful element as soon as the browser has painted the first frame. However, after making subsequent frames, it will dispatch another PerformanceEntry if the largest contentful entity shifts.

For eg, on a page with text and a hero image, the browser may initially only render the text, at which point the browser may dispatch a largest-contentful-paint entry, the element property of which will most likely reference a

or <h1>. After the hero picture has finished loading, a second largest-contentful-paint entry will be dispatched, with its element property referencing the <img />

It’s worth noting that an entity can only be called the largest contentful element until it’s rendered and accessible to the user. Images that have not yet loaded are not regarded as “rendered.” Neither text nodes nor web fonts are used during the font block period . In such instances, a smaller element will be reported as the largest contentful element, but once the larger element has finished rendering, it will be reported by a different PerformanceEntry object
A page can add new elements to the DOM when new content becomes available, in addition to late-loading images and fonts. A new PerformanceEntry will be recorded if any of these new elements is greater than the previous largest contentful element.
If the largest contentful element in the viewport is omitted (or even removed from the DOM), it will remain the largest contentful element until a larger element is rendered. Since user activity often affects what is available to the user, the browser may stop reporting new entries as soon as the user communicates with the page (via a tap, scroll, or keypress) (which is especially true with scrolling).

9. How are changes in element layout and size handled?

Changes to an element’s size or position do not produce new LCP candidates to maintain the performance overhead of measuring and dispatching new performance entries down. The element’s original size and position in the viewport are the only factors taken into account.
Photos that are rendered off-screen and then transition on-screen may not be reported as a result. It also ensures that elements rendered in the viewport but then pulled out of view can still report their original in-viewport size.
Here are a few examples of when the Largest Contentful Paint appears on a few well-known websites:
The largest element in any of the timelines above shifts as material loads. In the first case, new content is added to the DOM, which affects which element is the largest. In the second case,
the interface changes, and the content that was previously the largest is omitted from the viewport.
Although it’s common for late-loading content to be larger than the content already on the website, this isn’t always the case. The following two illustrations demonstrate the Largest Contentful Paint occurring before the page completely loads.
The Instagram logo is loaded relatively early in the first example, and it remains the largest element even though another material is gradually displayed. The largest element on the Google search results page is a paragraph of text that appears before all of the photos or logos finish loading. Since each image is smaller than this paragraph, it remains the largest element in the loading phase.

10. Tools for measuring LCP

You can calculate the site’s LCP using both lab and field data, and both forms of data have their uses.

Field tools

It is advised to examine the Field Data recorded by Google because this is the data that is used to influence the rankings.
  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • web-vitals JavaScript library

Lab tools

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

Measure LCP in JavaScript

11. What if the largest element isn’t the most important?

In certain cases, the most significant element (or elements) on the website are not the largest, and developers might be more interested in calculating the render times of these other elements. This is possible with the Element Timing API , as defined in the custom metrics article .

12. Finishing up

The Largest Contentful Paint metric is a deceptively simplistic but efficient way to monitor when main content appears in the user’s viewport. Like all of the other metrics at our disposal, we’re moving closer to a standardized, universal method of assessing online success while keeping the user experience in mind.

Follow More Articles

Contact Us

May 31st, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.