What is Largest Contentful Paint and How to Improve It for Ecommerce

Page speed, page speed, page speed. This critical aspect of your ecommerce website cannot be overstated. The success of your online business often hinges on how quickly your website loads and delivers content to your potential customers. This is where Largest Contentful Paint (LCP) comes into play.

LCP is one of the most critical Google Web Vitals metrics, and has become a vital ranking factor in search engine results. In this article, we take a look at several key points that you need to know in order to effectively understand, measure and optimize LCP for your ecommerce website. Let’s begin!

Contents:

• What is Largest Contentful Paint
• Why Largest Contentful Paint Matters for Ecommerce
• How to Measure Largest Contentful Paint
• How to Improve Largest Contentful Paint for Ecommerce
• Monitor and Improve Your Ecommerce Performance Today

What is Largest Contentful Paint

Largest Contentful Paint (LCP) measures the time it takes to fully load (or “render”) the largest image or text block visible within the viewport, at the moment when the page first starts loading. In simpler terms, it tells you when the most significant piece of content on your webpage becomes visible to your visitors. 

Why Largest Contentful Paint Matters for Ecommerce

Largest Contentful Paint (LCP) is an important performance metric for measuring the perceived load speed, because it marks the point in the page loading process when the main content above the fold has likely loaded. 

A fast LCP means that users can quickly see content that is important to them, and promptly reassures them that the page is useful (and functional). On the other hand, a slow LCP will make a page appear broken to users, causing them to abandon the website.

How to Measure Largest Contentful Paint

Now that you understand what LCP is and why it is important, how can you measure it? The first step is to understand how LCP is determined (without going into too much technical detail). Subsequently it is necessary to understand what are the tools that can help you with measuring this metric.

Identifying the Largest Contentful Paint Element

As currently specified in the Largest Contentful Paint API, the types of elements considered for Largest Contentful Paint are:

• image elements
• image elements inside an svg element
• video elements with a poster/feature image 
• elements with a background image loaded via the url() function 
• block-level elements such as H1, H2, H3, p and div
• the first frame painted for autoplaying video elements (as of August 2023)
• the first frame of an animated image format, such as animated GIFs (as of August 2023)

From the list of elements identified, the element size is compared and the largest one is determined. There are a few guidelines in determining the element with the Largest Contentful Paint: 

• The size reported for LCP is usually the size that is visible to the user. Therefore, if part of the element is outside of the viewport or is clipped, that part does not count towards the size of the elements. 
• If image elements are resized from their initial size, the size reported that determines the score is going to be either the visible size or the intrinsic size, whichever is smaller. This means that images that are shrunk down to a much smaller than their intrinsic size will only report the size they’re displayed at, whereas images that are stretched or expanded to a larger size will only report their intrinsic sizes.

Tools to Help Measure LCP

If you’re still unsure how LCP is measured, which element is chosen, etc. don’t worry. There are tools that can help you automatically identify the LCP element and measure your LCP score:

• The Google PageSpeed Insights tool allows you to execute a spontaneous test to see your current LCP results.
• Valido Web Score has PageSpeed Insights integrated and also allows you to execute both ad-hoc and scheduled tests according to your monitoring needs. In addition, Web Score allows you to test for other Web Vitals metrics as well as Google Lighthouse scores, providing practical recommendations on how to optimize your overall site performance.

How to Improve Largest Contentful Paint for Ecommerce

To improve the Largest Contentful Paint metric for your ecommerce site, you first need to understand the factors that influence the overall time it takes to load the LCP element / resource. The visualization below gives a breakdown of the components involved in this loading.

As you can see from the above, the LCP resource loading consists of 4 parts:

• Time to first byte (TTFB): The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response.
• Resource load delay: The delay between TTFB to when the browser starts loading the LCP element.
• Resource load time: The time it takes to load the LCP resource itself.
• Element render delay: The delay from when the LCP resource finishes loading (element is visible) until the LCP element is fully rendered (element is interactable).

Therefore, you would need to address each of these components in order to fully optimize the Largest Contentful Paint metric for your ecommerce. Let’s go through each of them.

1. Speed Up LCP Resource Loading

Making your LCP resource start loading as early as possible is one of the most important things you can do to speed up your ecommerce website performance. Fortunately it is not a difficult step to optimize.

A good rule of thumb is to ensure your LCP resource starts loading at the same time as the first resource on the page. If it starts later, there’s room for improvement. There are two key factors that affect how fast an LCP resource loads:

When the Resource Is Found: Your LCP resource should always be discoverable in the HTML source. For example, if the LCP element is an image, its source attributes should be in the initial HTML markup. Ideally it should not be dynamically added to the page via JavaScript.

Resource Priority: Browsers don’t always give images the highest priority since they aren’t critical for the initial page rendering. You can guide the browser by using the fetchpriority attribute, like this:

<img fetchpriority=”high” src=”/path/to/hero-image.webp”>

Use “high” priority for one or two images likely to be your LCP element based on common screen sizes. Conversely, lower the priority for non-LCP images that might load early but aren’t immediately visible due to styling:

<img fetchpriority=”low” src=”/path/to/non-LCP-image-example.webp”>

Deprioritizing certain resources can afford more bandwidth to resources that need it more—but be careful. You can always check resource priority and test changes with Valido Web Score’s audit data (lab) and real data (field) tools.

Before – LCP resource loading not optimized

After: LCP resource starting at the same time as the first resource

2. Reduce Resource Load Time

The resource load time is the duration required to transfer the bytes of the LCP resource over the network to the user’s device. There are four ways to reduce this load time.

Reduce the size of the resource by serving the optimal image size, using modern image formats, compress images, etc.

Reduce the distance the resource has to travel by using a Content Delivery Network (CDN).

Reduce contention for network bandwidth, which can be resolved through proper use of fetchpriority discussed above.

Eliminate the network time entirely. A great way to this is by serving your resources with an efficient cache-control policy.

3. Eliminate element render delay 

Once the loading of the Largest Contentful Paint element can be optimized, the next step is to ensure that the element can render and be interacted on immediately after. The main reason for a long delay in the LCP element render is that if the rendering is blocked for some reason.

Here are possible solutions to eliminate unnecessary element render delay:

Reduce or inline render-blocking stylesheets.

For some websites, stylesheets are so large that it takes significantly longer to load than the LCP resource, preventing the LCP element from rendering. In most cases, the best way to ensure the stylesheet does not block rendering of the LCP element is to reduce its size so that it’s smaller than the LCP resource.This can be done by either removing unused CSS, deferring non-critical CSS, or using tools that minify and compress CSS.

Use server-side rendering.

Server-side rendering (SSR) is the process of running your client-side application logic on the server and responding to HTML document requests with the full HTML markup.

4. Reduce TTFB

The aim of this step is to get the first part of your webpage, the HTML, to show up quickly. Note that this is the hardest to optimize, as often developers don’t have much control over it. But it’s super important because it affects everything else that happens next. So, if you can make this part faster, it will make the whole website load faster.

One common reason for slow TTFB, even if the rest of the website is fast, is when visitors have to go through several redirects before arriving at the final URL. Therefore it is always essential to minimize redirects on your website as much as possible.

Another reason for slow TTFB is when cached content cannot be retrieved from a CDN edge server (the CDN closest to you), and instead user requests have to be directed all the way to the origin server.

Monitor and Improve Your Ecommerce Performance Today

In the quest to optimize your Largest Contentful Paint and deliver a lightning-fast user experience, you’ve explored the critical components that make up this essential metric. But understanding is just the beginning—now it’s time to put this knowledge into action.

With Valido Web Score and its integrated PageSpeed Insights, you can effortlessly measure your LCP and other vital web performance metrics. Whether it’s running ad-hoc tests, scheduled benchmarking, we’ve got you covered.

In addition to testing and monitoring your ecommerce, Web Score provides actionable insights and practical recommendations to optimize every aspect of your web performance. Our suite of tools empowers you to make data-driven decisions and fine-tune your website for a better user experience.

Don’t let slow-loading pages hinder your online business success. Take the first step to monitor and improve your LCP today with Valido Web Score. 

Leon Lau

Digital UX, writing about the latest ecommerce trends.