#Core Web Vitals

What is Largest Contentful Paint (LCP)?

by Sander van Surksum 5 minute read
What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LPC) measures how long it takes a website to show the largest content like text or an image on the screen. LCP measurement refers to elements above the fold of a given page.

“Largest Contentful Paint” sounds strange and technical. But, it’s pretty simple to understand when thinking like a consumer. You want a web page to load fast, which provides a good impression of the website and brand. A site that looks defunct or performs poorly is bound to disappoint.

Let’s see an example of LCP in action:

iron-out-LCP-in-action

In this example, the paragraph 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.

The loading of a page is a series of small events that culminates in user experience - good or bad.

iron-out-all-web-vitals

Why Measure LCP?

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 legible, loading, 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.

LCP 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. Mobile devices accounted for 54.8% of website traffic in the first quarter of 2021.

How to Find a LCP Score

Understand that an LCP score is just the beginning. Imagine using a comprehensive accounting tool, like QuickBooks; such a tool is only as useful as the person using it. So, someone inexperienced in accounting would not use QuickBooks to its full potential. Therefore, the real optimization happens when you allow an experienced person to view your LCP score.

Then you will have the resources to make educated decisions in moving forward. Knowing your score is necessary, but the real value in knowing the score is having the ability to do something about it.

What's a Good LCP Score?

A page needs to load and be ready in 2.5 seconds or less to provide a good user experience.

iron-out-lcp-boundaries

“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.

LCP Tools

Google and digital experts provide tools to help business owners gain a better understanding of LCP.

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 to Improve LCP (Largest Contentful Paint)

When it comes to optimizing LCP, focus on these major areas:

  • Slow servers.
  • Render-blocking JavaScript and CSS.
  • Slow resource load times.
  • Client-side rendering.

Much like any other variety of audit, service providers detect problematic elements and provide solutions. Adding caching, optimizing images, and pre-loading page assets are examples of things that can be done to improve LCP.

A few other things a specialist can attend to:

  • Optimize images for desktop and mobile versions, hence avoiding overloading.
  • Use a Content Delivery Network (CDN) to aid in image loading.
  • Limiting or avoiding JavaScript.
  • Help you find a good hosting service.

LCP 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, customize image sizes, and provide images in optimized formats (JPEG, PNG). 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, Largest Contentful Paint may be the most important aspect of Core Web Vitals.

Largest Contentful Paint - Examples of Improvement

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 LCP? Because improving LCP equals increased sales.

LCP Case Study Example - Vodafone

Vodafone, a leader in telecommunications, wanted to attach business metrics to Web Core Vitals. After running an A/B test, Vodafone found that improving LCP:

  • Increased sales by 8%.
  • Improved lead-to-visit rate by 15%.
  • Raised cart-visit-rate by 11%.

Lastly, Vodafone experienced a 31% improvement in its LCP score. Vodafone made the following LCP improvements to impact its ecommerce:

  • Image optimization: resizing hero image, optimizing SVG images, using media queries, and optimizing PNG.
  • Moved rendering logic over to server-side, which resulted in less render-blocking JavaScript.
  • Server-side rendered critical HTML.

Conclusion

Largest Contentful Paint measures how long it takes for elements to load (images, logos, and so on). 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, optimizing LCP leads to happier site visitors and healthier sales.