4 Expert Strategies to Fix Largest Contentful Paint (LCP) Webinar Recap

Three years after the introduction of Core Web Vitals, a staggering 33% of websites globally still struggle to pass the notoriously challenging metric – Largest Contentful Paint (LCP).

To address this issue, we partnered up with Google and launched the four-part webinar series “Core Web Vitals For Your Business.” The third episode dedicated to mastering LCP optimization is now available to replay on YouTube:

In this session, Google’s top minds, Barry Pollard and Adam Silverstein, together with NitroPack’s CTO, Ivailo Hristov, discuss:

• The latest developments and changes around LCP
• What makes LCP the hardest Core Web Vitals metric to Optimize
• Live techniques to improve poor LCP scores

Read on for the webinar highlights and an actionable checklist for fixing your LCP from “Failed” to “Passed.”

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the render time of the largest element within the viewport relative to when the page first started loading. It’s especially important to the user experience as it helps you understand the perceived loading performance from a user's perspective.

A delayed LCP can indicate that a page takes too long to load its main content, leading to a perception of slowness by users. Use the following thresholds to gauge your LCP score:

• Under 2.5 s is Good
• 2.5 - 4.0 s means it Needs Improvement
• Over 4.0 s is considered Poor

What is considered an LCP element?

Various elements can be considered the largest content element depending on the structure and content of a webpage.

Any of the following can be classified as the largest content element candidates:

• Images: This includes images loaded using the img tag, as well as images used as a background via CSS that are displayed within the viewport.
• Image Elements Inside an svg Element: If an SVG contains image elements (like via the image tag), those can be reported as the LCP.
• Videos: The poster image of the video (the image that's displayed before the video plays) can be the LCP. The video frame itself can also be the LCP if there's no poster image and the video auto-plays without user interaction.
• Animated media: For example, the first frame of animated GIFs created with third-party animation apps
• Block-level Text Elements: This pertains to text elements such as headings (h1, h2, etc.), paragraphs (p), lists (ul, ol, etc.), and others. The block of text that takes up the largest amount of space in the viewport can be an LCP candidate.
• Elements with a Background Image Loaded via CSS: If an element, like a div or a section, has a background image set using the background-image property in CSS, and this image is the largest visible content, it can be the LCP.

 

How to find the LCP element on a web page

Internally, the Chrome browser will identify different LCP elements as the page’s contents render. Meaning that during the initial page load, the LCP element will change until the above-the-fold is loaded to reveal the definitive largest element.

Important note: Depending on the different screen sizes, the LCP element of the same webpage can vary.



Luckily, with tools like Chrome DevTools and WebPageTest you can easily identify the specific LCP element for a particular page load scenario.

1. With Chrome DevTools

• Right-click anywhere on the page and select "Inspect"
• Go to the "Performance" tab and simply reload the page
• Once the page has loaded, you'll see a timeline of events
• Look for the "LCP" marker in the "Timings" section and scroll down to see more details in the “Summary” tab
• Hover over the “Related Node” link to highlight the LCP element on the page

2. With WebPageTest

• At www.webpagetest.org, enter the URL of the web page and start the test
• Once the test is completed, go to the "Page Performance Metrics" tab and click on “Largest Contentful Paint”
• You will find details about the LCP, including a screenshot highlighting the LCP element.

What’s New with Largest Contentful Paint (LCP): Updates and Developments

Since the introduction of the most important Core Web Vitals metrics, they’ve been continuously updated to address edge cases and web performance evolution.

LCP Changes in Chrome Browser

Chrome has gone through a few changes already, focusing on excluding and including elements based on how “contentful” they are:

• Chrome 86 - Opacity 0 images were excluded
• Chrome 88 - Full-screen images (typically background images) were excluded
• Chrome 112 - Low-entropy images were excluded (aka very simple images, i.e. a large blue square)
• Chrome 116 - Videos included (first frame)
• Chrome 116 - GIFs changed to use the first frame
• Chrome 116 - Image loading experiments (now, the browser “looks” at some of the images beforehand and stipulates which ones might be LCP element candidates)

 

LCP Changes in WordPress

Following the introduction of a WordPress Core Performance Team back in 2021, WordPress has been investing heavily in making the platform more performance-friendly.

WordPress 6.2 and 6.3 versions showed massive improvements, with 27% faster load times for block themes and 18% faster load times for classic themes. The overall CWVs pass rate for WordPress websites on mobile has hit 34.71%, compared to 30.47% in April.

Changes made by the WP Core Performance Team that affect the Largest Contentful Paint for the better include:

• Introduction of native WebP image format support since version 5.8
• Automatic conversion of uploaded images
• Reduction of database queries for common page loads
• Fine-tuning of high-frequency code paths
• Improvements to the caching layer
• Improvements to the automatic native HTML lazy loading 
• Introduction of automatic fetchpriority=”high” to the LCP element
• Introduction of the script API “strategy,” where developers specify an async or defer strategy for header scripts

 

Why are you failing Largest Contentful Paint? (Common Pitfalls)

There’s a reason LCP is still the most challenging CWV metric to pass out there. And it’s not necessarily your optimization strategy.

Pitfall #1: You’re not entirely in control of your LCP score

LCP is complex in the sense that a lot happens in the initial loading process, and you may not be able to impact every step of the way.

When visitors land on your website through an ad with a shortened link, there can be quite a few redirects happening before the user even starts to see your webpage content. Additionally, network strength plays a huge role, especially if your website has visitors coming in from countries with slower connections.

“It can feel annoying because it’s somewhat out of your control. You can’t just go and magically fix these things. You need to understand what the problem is itself - is it something on your page, or is it something more about how people are getting to your site.”

— Barry Pollard, @Google Chrome Team 

 

Pitfall #2: Your website design doesn’t match your demographics

Going back to the core idea behind Core Web Vitals metrics, LCP is all about measuring how real-world users experience the initial load of your webpage.

Building a high-end website that offers all the bells and whistles is great. But what if your visitors can’t access your website because of older devices and slower network connections? Remember, complex web design means more HTTP requests and sluggish loading times.

When all else seems to not be working, revisiting the basics in terms of demographics and device type usage will help you and your team to:

• Introduce more relevant UX design changes
• Better emulate user conditions in testing environments
• Optimize based on recent data and avoid regressions

"You might have to rethink your website. You need to figure out who’s using your website, what their network conditions are, typical device, etc.”

— Ivailo Hristov, @NitroPack  

Pitfall #3: You’re not leveraging RUM data tools to pinpoint LCP bottlenecks

While lab data is essential for catching pre-production issues, RUM data provides a holistic view of post-production, real-user experiences.

Real User Monitoring (RUM) tools provide insights into how actual users experience your website in real-world scenarios. These tools track and analyze the performance of web pages as experienced by genuine users in terms of varying device capabilities, network connections, and interactions.

When it comes to choosing a RUM data tool, data granularity is key. CrUX data report is a great public source of information, but because of its nature and privacy requirements, it can’t provide a deeper level of data than its current setup.

Apart from relying on your in-house telemetry and data collection, other tools (both paid and free) you can consider include:

• New Relic Browser: Provides insights into end-user experiences and monitors JavaScript errors. It offers detailed performance timelines and helps in identifying bottlenecks.
• Dynatrace: Offers end-to-end monitoring, from frontend to backend. It automatically discovers performance issues across the stack.
• AppDynamics: Captures complete performance data in real time, allowing businesses to visualize complex application environments.
• Pingdom: While known for its uptime monitoring, it also offers RUM capabilities to get insights into user experiences from multiple global locations.
• Boomerang: An open-source RUM tool that measures the page load time experienced by real users. It can capture metrics for hard and soft page loads and even single-page apps.
• Perfume.js: A small web performance library that helps developers measure the performance of their web pages in real time.

In conclusion, for a 360-degree view of performance, your best bet is to use lab data for pre-production optimization and RUM data for post-production insights.

Pitfall #4: You’re not tracking the performance of third-party solutions

It’s no secret we rely on third-party solutions for a wide range of functionalities, including analytics, ads, widgets, chat systems, social media integration, and more.

These external scripts and resources, while providing essential features or monetization avenues, can also adversely impact your LCP score and, more specifically, hurt it with:

• Unexpected downtime, lag, and inefficient code updates that are outside of your domain
• Excessive network requests that lead to increased load times, especially if these aren’t loaded asynchronously or deferred
• Render-blocking resources that halt the rendering process of your site and contribute to higher exit rates

“You (site owners) are very dependent on those services and need to make sure you’re tracking their performance, and if something isn’t performing well, you should be raising an alarm.”

— Ivailo Hristov, @NitroPack  

If third-party solutions you’re using are not meeting your performance standards, consider excluding them from your tech stack or reach out to the developers and push toward speedy improvements.

How to Fix Largest Contentful Paint (Stages and Expert Techniques)

Given the complex nature of LCP, it would be counterproductive to simply list separate optimization techniques.

Instead, we’ll break down the LCP value into four sub-parts which have no overlap or gap between them, and collectively add up to the full LCP time:

1. Time to First Byte (TTFB)
2. Resource load delay 
3. Resource load time
4. Element render delay

#1: Reduce Time to First Byte (TTFB)

Think of TTFB as your baseline for a good LCP score – if TTFB is, for example, 1 s, your LCP can’t go lower than 1 s, no matter how much you optimize it.

A lower TTFB requires some essentials that ensure a high-performance ecosystem for your website, like:

• Choosing a good hosting provider
• Avoiding redirects
• Caching your website
• Using a Content Delivery Network (CDN)

 

#2: Eliminate Resource Load Delay

Ideally, you want your LCP element to start loading at the same time as the first resource loaded by the webpage.

To achieve that, you should use prioritization techniques that tell the browser when exactly you’d like the LCP element to be fetched:

• link rel="preload" images and fonts (depending on your case)
• Remove your LCP element from any lazy loading you have enabled for the webpage

#3: Eliminate Resource Load Delay

Reducing the time it takes to deliver your resources to the browser is essential for reducing LCP time. A combination of several well-known techniques is helpful here:

• Compress and adjust images
• Use modern image formats like WebP
• Reduce the file size of your fonts 
• Generally, try to avoid videos in the LCP area (i.e. above the fold)

 

#4: Eliminate Element Render Delay

To decrease your LCP score effectively, it’s imperative the LCP element renders immediately after it has finished loading.

To ensure no other elements block or delay it from rendering, you can:

• Generate Critical CSS
• Defer or completely eliminate render-blocking JavaScript 
• Set the font-display property to tell the browser to use a system font until the custom font is ready, then swap it out once loaded

 

Largest Contentful Paint Optimizations: Before and After Example

Using a demo website and a lab environment, we started out with an LCP score of 13 s, and after applying all the optimizations we discussed above, we were able to bring it down to 1.9 s.

For reference, an LCP score under 2.5 s is considered “Good” and will appear as “Passed” in your Core Web Vitals assessment.

Before LCP optimization: 13 s LCP value

 

After LCP optimization: 1.9 s LCP value

 

Largest Contentful Paint FAQ with Google and NitroPack

 

If you have several images exactly the same size, then which is the LCP?

Largest Contentful Paint considers a whole element for the main candidate. If the images are in the same container, then all the images will be considered the largest content. If not, then the image that appears first (higher up on the page) is typically considered the LCP.

If I have different LCP images on mobile and desktop, which should I optimize for?

Optimizing for both is important, but focus on the platform from which most of your users are coming. If more users visit your site via mobile, prioritize mobile optimization. Always check your site's analytics to guide your decision.

Is a CDN really needed if your website is local and not global?

If your site’s resources don’t have to travel more than a few hundred kilometers across a country, a CDN might be considered optional. One essential detail, however, is that by skipping on a CDN service, all the incoming traffic goes toward your origin server, which typically leads to poor performance in general or even server downtime in some extreme cases. In conclusion, consider enabling the CDN that comes with your hosting for an affordable option.

Does visiting a site via an ad influence LCP time?

When using shortened links (typical in paid campaigns) the user usually waits for at least one redirect to happen before they land on your page. This is all counted toward your LCP score. While this is beyond your control, you can make sure the landing page is simple and well-optimized to engage the user as fast as possible.

What if I get a lot of traffic from slower countries?

If you have significant traffic from regions with slower internet connections, implementing performance optimizations like Content Delivery Networks (CDNs) to serve your content faster to those areas is essential. Also, consider simplifying your UX and web design to better cater for your core audience.

Does using large fonts affect LCP?

The larger the web font files, the more requests your website makes when users try to load it. To speed things up and improve LCP time, employ font loading techniques like subsetting fonts, preloading above-the-fold styles, and using the font-display property.

What are the best ways to optimize for LCP with full-size background images on mobile?

Typically, a full-size background image wouldn’t be considered an LCP candidate (as of Chrome 88 update). Assuming you’ve already identified the background image is indeed your LCP element on mobile, you can:

• Compress the image and use WebP format
• Preload it to tell the browser to prioritize it in the loading process
• Use CSS properties like background-size: cover to ensure the image scales properly
• Use adaptive image sizing to automatically adjust the image to the user’s viewport