How to measure, monitor and improve your Largest Contentful Paint (LCP) score
“Largest Contentful Paint” sounds strange and technical. But, it’s pretty simple to understand when thinking like a consumer. When you visit a website, you expect the content for which you are requesting a page from the server to appear on the screen quickly. This content, also referred to as critical content, is considered the Largest Contentful Paint.
Often this is a product image, a video, or a large snippet of textual content in the viewport on a smartphone and above-the-fold on desktop screens. As a user, you not only want to experience content appearing quickly on the screen, but more importantly, you want it to be relevant or useful to you. This is exactly what the user-centric metric Largest Contentful Paint measures.
What Is Largest Contentful Paint? #
LCP is a crucial part of Google's Core Web Vitals, which assess user experience on a website. It is essential to ensure that a page is loading and displaying content in a fast and efficient way to provide a great user experience.
Let’s see an example of LCP in action:
In this example, the paragraph (in green) is the largest page element, displayed before any images on the page (even the logo). All other images on the page are smaller than the paragraph, so the paragraph remains the largest page element.
But it can also happen that at a later time, a larger element appears on the screen as content loads and this element is measured as the final LCP element. The elements that were previously marked as LCP during the loading or rendering (painting) of the page are called LCP candidates.
Since user interaction often changes what is visible to the user (which is especially true for scrolling),the browser stops reporting new LCP entries as soon as the user interacts with the page (via a tap, scroll or keystroke).
What types of elements are considered for Largest Contentful Paint? #
The types of elements eligible for Largest Contentful Paint are <img> elements, <image> elements within a <svg> element, <video> elements with a poster image, an element with a background image and block-level elements containing textual content. Several more elements (full <video> and <svg> support) are likely to be added in the near future.
A number of heuristics are also applied by browsers to exclude certain elements as LCP candidates, for example when the background image uses the entire screen (viewport), when an image is not visible (opacity) to users or when an image cannot be evaluated as true content (low entropy).
The loading of a page is a series of small events that culminates in user experience - good or bad. Visitors to a page are looking for feedback during loading; they want to see something happen first so they know the server is responding. Next, they want to see relevant content - for which they are visiting the page - appear on the screen quickly. Following that moment, they also expect to be able to interact with the page. These key user moments are important for perceived user performance.
Why should you measure Largest Contentful Paint? #
LCP is a portion of Google’s Core Web Vitals. Overall, Google’s Core Web Vitals gauge user experience. So, it makes sense for Google to measure LCP. Page loading and the readiness of page elements dictate user experience. It’s great to host incredible content. But, if it’s not loading, legible, or interactive, the page does not deliver a great user experience. That’s a big failure.
Take a look at the largest image and block of text on the screen once a given page loads. What’s the load time? This is an easy way to do a quick DIY assessment.
Largest Contentful Paint and Mobile #
“But, I have a mobile and desktop version of my site!” Given the importance of Google’s mobile-first index, you should be concerned. Basically, the mobile-first index means that Google primarily uses a site’s mobile content for indexing and ranking. Historically, rankings were based mostly on desktop versions. But, Google’s emphasis shadows user trends and data.
Mobile accounts for more than half of web traffic around the world. As of March 2023, 58.43% of all website traffic comes from people using mobile devices.
Given that consumer sites in particular are mainly visited using smartphones, you will have to take this into account for LCP. Smartphone users regularly use 4G or 5G networks. And although these networks are fast, there is always additional latency compared to WiFi or a wired connection at home. And mobile networks cannot always provide users with a 4G or 5G experience due to several (technical) factors.
What is the ideal Largest Contentful Paint (LCP) score? #
For a good user experience, the goal is to achieve a LCP metric of 2.5 seconds or less. This target should be achieved for the 75th percentile of page loads, segmented across mobile and desktop devices.
“I have a good LCP score but I’m not satisfied with my user traffic and behavior.” There’s plenty of possibility that you have a good LCP score but other technical aspects of your site need improvement.
Are images the only elements that affect LCP? #
The simple answer is no. It's a common misconception that images are the sole contributors to the LCP score. In reality, videos and block-level text elements can also take up the mantle as the largest element on a webpage. Therefore, these elements also have a significant influence on the LCP score.
How can I measure my LCP score? #
Google and digital experts provide tools to help business owners gain a better understanding of LCP. Insights into the LCP score can be gathered with both lab and field data.
The first two are considered to provide “actual measurements” of a site based on real user (field) data:
The next two provide users with “simulated” LCP scores from lab data:
How can I improve the Largest Contentful Paint? #
When it comes to optimising LCP, focus on these major areas:
- Time To First Byte
- First Contentful Paint
- Avoiding redirects
- Render-blocking JavaScript and CSS
- Image Optimising
- Caching
- Fonts
- Request order
As with any other form audit or monitoring, web performance specialists detect problematic elements and offer solutions. Optimising images and preloading page elements are examples of things that can be done to improve LCP.
A few other things a specialist can attend to:
- Optimise the LCP candidate for desktop and mobile versions, hence avoiding overloading.
- Limiting or deferring JavaScript.
- Help you find a good hosting service.
- Defer or lazy load resources needed later on the page.
- Reduce request overhead.
- Use 103 early hints
Largest Contentful Paint and images #
Images are especially important to ecommerce and news outlets due to the reliance on image-heavy content. For such websites, images could be the largest element on a given page. Regardless of LCP, the importance of images (as to sell a product or complement a story) is undeniable. Images need great technical attention - to make a great impression on Google and consumers!
Specialists can compress, customise image sizes, and provide images in optimised formats (JPEG, PNG, WEBP and AVIF). Some things are out of your control (whether a consumer decides to buy a product from another vendor). But, you can control the speed of your site. And, doing so provides a great user experience.
So, for ecommerce, news outlets, and sites that heavily rely on images, LCP may be the most important aspect of Core Web Vitals. Focus on delivering the image as quickly as possible.
Especially when the LCP involves an <img> element and the LCP score is not sufficient, it is relevant to analyse a breakdown of timings that directly affects the LCP timing. This breakdown consist of several sub-parts like the document TTFB, the delay between TTFB and when the browser starts loading the image resource, the time it takes to load the LCP resource and the moment between when the LCP resource is loaded and when it’s fully rendered (painted) by the browser. This breakdown helps where and how to improve the LCP score.
Slower LCP impacts online business #
The technical aspects of LCP and Core Web Vitals can be confusing for some business people. However, the effects of improving Core Web Vitals is easily grasped by all. What’s the biggest reason you should care about Largest Contentful Paint? Because improving LCP equals increased sales.
Product pages can see a 40% to 50% lower Conversion Rates (CR) when comparing users that experience a 2-second LCP vs. a 4 to 5-second LCP.
Higher Conversion Rates #
Adding Conversion Rates to histogram cohorts shows Conversion Rates dropping when LCP is slower. As you can see, a much higher percentage of users go on to make purchases when they have the LCP appear in less than 2 seconds. This particular product page shows that users converted twice as often with identical content when comparing the LCP cohorts of 2.0 seconds vs. 5.0 seconds:
Faster Largest Contentful Paint = Lower Bounce Rates #
Not surprisingly, Bounce Rates more than double when comparing the same 2 second and 5-second LCP cohorts:
Conclusion #
Largest Contentful Paint measures how long it takes for elements to load (text or images). As mentioned, LCP is especially important for ecommerce brands and news outlets. However, every website needs to pay greater attention to Google’s Core Web Vitals, for improving CWV can lead to better rankings and click-through rates. And, optimising LCP leads to happier site visitors and healthier sales.
