What Is Largest Contentful Paint?

Largest Contentful Paint (LCP) measures the time it takes for the largest visible part of a webpage, like an image or text block, to load when you visit a site. It’s one of the three key metrics Google uses to measure how fast a page loads and how it feels for users. Improving your LCP can make your site load faster and rank higher on Google’s search results.

Definition of Largest Contentful Paint

LCP tracks how long it takes for the main content on your webpage, such as a large image or text block, to fully appear. This element is typically a large hero image, text block, or video thumbnail, and takes a significant portion of the screen. To calculate the LCP score, a browser considers these elements:

• Images (‘<img>’ tags)
• Images inside ‘<svg>’ (scalable vector graphics)
• Poster images from videos
• Background images loaded via the ‘url()’ function
• Blocks of text or other large text elements

Unlike other metrics, LCP only measures what is visible without scrolling. If the largest element is not immediately visible, LCP tracks the next biggest visible one. Once the page loads, changes made by JavaScript or user actions won’t affect the LCP score. So, LCP tracks what happens during the initial page load, not after.

LCP can vary between mobile and desktop because different devices may load different elements as the largest. To ensure your site performs well across all devices, check LCP on both. LCP timing also depends on your server’s response speed, known as Time to First Byte (TTFB), which affects how quickly the largest element appears on the screen.

How Does Largest Contentful Paint Work?

The browser calculates LCP by measuring the time it takes to display the largest content element on a webpage. It tracks each frame as the page loads and records the time when that element appears. Here’s how it works:

1. As the page starts loading, the browser reads the HTML and builds a map of all of the page’s elements, known as the Document Object Model (DOM).
2. Each time a content element like an image or text block loads, the browser compares its size to the current largest element. If the new one is larger, it becomes the new LCP candidate.
3. This process continues until the page becomes stable, which happens when there’s no network activity for 5 seconds and no background tasks take longer than 50 ms.
4. Once the page is stable, the browser reports the render time of the final LCP candidate as the LCP value.

If your website uses JavaScript to load content, LCP may take longer. This happens because the browser has to download and run the JavaScript before it can show the content. To improve LCP, load necessary resources like images and text earlier in the process to make your page appear faster.

LCP works alongside other Core Web Vitals metrics, like First Contentful Paint (FCP) and Cumulative Layout Shift (CLS). While LCP measures how fast the main content appears, FCP tracks how long it takes for the first content, like a logo or header, to load. Similarly, CLS ensures that the page’s layout remains stable during loading. Together, these metrics determine your site’s overall user experience.

How Does LCP Determine the Largest Element?

The browser measures the size of each element based on what’s visible on the screen when a page first loads. For images, it considers the displayed size, not the original size of the image file. For text elements, it calculates the size of the text block. Once the browser records an element’s size as the largest, it doesn’t change, even if the element moves or resizes later.

What Is a Good LCP Score?

LCP is one of the key metrics Google uses to evaluate the user experience of your site, which can impact your ranking in search results. Pages that load faster generally provide a better user experience, which may improve their visibility in search. Google provides clear guidelines for what constitutes a good LCP score:

• A good user experience should have an LCP of 2.5 seconds or less
• An LCP between 2.5 and 4 seconds needs improvement
• An LCP above 4 seconds provides a poor user experience

These thresholds apply to both mobile and desktop devices. To ensure a good user experience, at least 75% of your site’s page loads should have an LCP of 2.5 seconds or less.

How to Measure Largest Contentful Paint

You can measure LCP using lab and field tools. Lab tools simulate page load in controlled settings, while field tools collect LCP data from real users visiting your site.

Lab Tools to Measure LCP

Lab tools provide LCP insights by simulating the load process under ideal conditions. However, they don’t always reflect real-world performance, especially for users with slower devices or network conditions.

• Chrome DevTools: Breaks down your page’s loading process and LCP locations step-by-step, helping you find and fix loading issues.
• Lighthouse: An open-source tool that checks your site’s performance, including LCP, and suggests ways to improve it.
• WebPageTest: Tests how your page loads under different conditions, like varying network speeds and devices.

Field Tools to Measure LCP

Field tools give you a more accurate picture of how users experience your site across different devices and networks. Here are some of them you can use to measure your LCP score:

• Chrome User Experience Report (CrUX): A dataset that gathers real-world data from users who visit your site, showing how quickly the page loads for them.
• PageSpeed Insights: Analyzes your page and recommends improvements to LCP using test and real user data.
• Search Console–Core Web Vitals report: This report tracks your site’s LCP performance, grouping your pages by their performance standards.
• Web-Vitals JavaScript library: Measures LCP directly on your site, showing how fast your page loads for users in real time.

What Factors Impact Largest Contentful Paint?

How quickly the largest element on your page appears can affect the entire user experience of your website. Here are some factors that affect your site’s LCP score and ways you can prevent it from getting too low:

Slow Server Response Times

When you click on a webpage, your browser sends a request to the server to load the content. If the server is slow, the browser has to wait longer before it can start loading the page. This delay affects how quickly the largest part of the page loads. The longer the server takes to respond, the slower the site will load. To improve your server’s speed and reduce these delays, consider these steps:

• Use server-side caching: Stores a ready-made version of your page so the server can send it faster the next time someone visits it.
• Optimize database queries: This makes the database requests more efficient, so the server doesn’t waste time retrieving data.
• Set up a content delivery network (CDN): A CDN uses servers in different locations to deliver your website’s files from the closest server, reducing load time.
• Upgrade to faster hosting: A faster hosting provider can improve overall site performance and reduce delays in serving your content.

Render-Blocking JavaScript and CSS

JavaScript and CSS help build the structure and design of the page. However, they can block the browser from loading the visible parts of the page right away. If there are large or complex JavaScript and CSS files that need to load first, the browser will wait until they are fully processed before it can show the rest of the content – this delay affects your LCP score. To avoid this, you can:

• Defer non-essential scripts: Delay loading scripts that don’t need to run immediately.
• Load scripts asynchronously: Let the page load while downloading scripts in the background.
• Use critical CSS: Load only the CSS needed to display content above the fold first.
• Split your code: Break large files into smaller parts so the browser loads only what it needs.

Slow Resource Load Times

Large media files, like images or videos, can slow down LCP. These files can be heavy and take longer to load, especially if they aren’t optimized for fast loading. Since LCP focuses on when the largest element becomes visible, any delays in loading these large resources will increase LCP time. You can reduce this delay by:

Compressing images: Shrinking image files without losing quality so they load faster.

• Using modern formats like WebP: These file formats are smaller and load faster than older formats like JPEG or PNG.
• Lazy loading: Only load images that are visible on the screen and delay loading images that are further down the page.
• Compressing text files: Use tools like Gzip or Brotli to shrink HTML, CSS, and JavaScript files so they load quickly.

Client-side Rendering

In client-side rendering, the browser builds the page using JavaScript instead of receiving a complete page from the server. Your browser has to download the JavaScript, process it, and then render the content. This takes extra time and can delay when the largest content element appears, especially on slower devices or networks. To prevent this, you can take the following measures:

• Server-side rendering: Have the server build the page before sending it to the browser so the content loads faster.
• Static site generation: Pre-build pages and send them directly to the browser, speeding up load times.
• Optimize JavaScript files: Reduce JavaScript file size by removing unnecessary characters or compressing them. You can also split large files into smaller chunks.

How Can I Optimize Largest Contentful Paint?

Besides the above measures, there are a few more ways to fine-tune your site’s performance and further optimize LCP. To start, focus on how your site loads its contents on different devices and network speeds. Based on the results, you can make some tweaks to improve your LCP score.

Optimize fonts for LCP

Fonts can slow down your page if they don’t load properly. To prevent delays in displaying text, load only the necessary fonts. Use the ‘font-display: swap’ property in your CSS, the code that controls your site’s appearance. This lets the browser show fallback text until your custom font is ready, so users won’t see a blank screen while waiting for fonts to load.

Prioritize critical resources with HTTP/2

HTTP/2 is a protocol that helps your site load faster by allowing multiple resources to download at the same time. This is especially useful for large, important files like images or scripts that affect LCP. Switching to HTTP/2 helps the browser load critical content more quickly, reducing delays in showing the most essential parts of the page.

Use Adaptive Loading

Adaptive loading adjusts your site’s content based on the user’s network speed or device. If someone has a slower connection or an older device, your site can serve them smaller images or a more straightforward layout. This reduces LCP for users who might otherwise wait longer for the page to load.

Reduce third-party script impact

Third-party scripts, like ads or analytics, often slow down your page because they load files from outside websites. When the browser has to handle too many of these extra files, it delays showing your main content. Reduce LCP by auditing and removing any scripts you don’t need so the browser can focus on loading your content first.

Summary

Largest Contentful Paint (LCP) measures how quickly the biggest part of your webpage loads and appears to users. It’s one of the key factors Google uses to judge page speed. Improving LCP helps your site feel faster and keeps users engaged.

To optimize LCP, focus on speeding up your server, reducing delays from JavaScript or CSS, and loading large files like images more quickly. Regularly check your site’s performance using tools that show real user data. This will improve the user experience and help your site rank better in search results.