How to improve a page's LCP score

The Largest Contentful Paint (LCP) metric is used to measure the loading speed of a webpage from the user's perspective, specifically measuring the time it takes for the primary content to be visible. This is deemed as a crucial factor for user experience, with the goal being to have LCP occur within 2.5 seconds of page load. When a user accesses a website, the speed at which the main content appears is crucial to their perception of the page load time. LCP is determined by the time frame from page load initiation to the rendering of the biggest image or text block. Please note that this metric does not measure the entire page load time, but only the time it takes for the main content to be visible.

Improving LCP is crucial, as it allows the user to engage with the content while the rest of the page loads, resulting in a better overall experience, can be used to track the performance of the website and fix issues that could lead to poor user experience.

What are the best ways to optimize LCP?

There are several techniques that can be used. These include:

1. Optimizing the critical rendering path.
2. Optimize the loading of the critical resources.
3. Asynchronously or defer loading non-critical resources.
4. Reduce the number of requests your pages make.
5. Use a Content Delivery Network to bring data closer to the user.
6. Optimize images by compressing and choosing the right format.
7. Store frequently-used resources in the browser's cache.
8. Reduce the amount of code that the browser needs to execute.
9. Use a preloader to load resources in the background.
10. Break up your JavaScript codebase into smaller chunks.
11. Minimize the use of third-party scripts that can slow down the page.
12. Test your website's LCP to identify and troubleshoot issues.

See below for a more detailed explaination of all the above points.

Note: The best approach will vary depending on the specific website and its content, some of these methods are closely related and could be used together for better optimization results.

Optimizing the critical rendering path

By reducing the size of the critical rendering path, specifically the amount of JavaScript and CSS used to display the visible portion of the page, LCP can be improved. The less code that needs to be downloaded and processed by the browser, the faster the above-the-fold content will be displayed, which leads to a better LCP score. A smaller critical rendering path can also help the browser use less memory and CPU resources, further enhancing the LCP.

You can optimize the critical rendering path in the following ways:

• Minimizing the code needed to display the above-the-fold content by removing unnecessary code, compressing and splitting it.
• Prioritizing and inlining the critical resources in the HTML to start rendering the page faster.
• Caching critical resources in the browser for faster reuse across page views.
• Preloading and deferring non-critical resources to reduce the bytes needed to be parsed by the browser.
• Utilizing code-splitting techniques to load only the needed code to improve LCP. It's important to measure the performance of the website and to identify which techniques work the best for the specific use case.

Optimize the loading of the critical resources

Optimizing the loading of critical resources can improve LCP by reducing the time it takes to fully load and render the above-the-fold content on a page. By reducing the number of bytes and requests needed to load the critical resources, the browser can start rendering the page sooner, which in turn reduces the time it takes for the user to see the content they requested. Then, by caching the critical resources, the browser can reuse them across page views, which eliminates the need to re-download them, reducing the number of roundtrips required to render the page.

To optimize the loading of critical resources, a combination of techniques can be applied such as:

• Reducing the number of requests and the time it takes to load the important resources by inlining them in HTML, eliminating redirects and using HTTP/2 multiplexing.
• Utilizing a Content Delivery Network (CDN) and optimizing server-side code to decrease the time to first byte (TTFB) of the critical resources.
• Caching the critical resources in the browser to avoid redownloading them and reduce the number of roundtrips.
• Preloading critical resources to start downloading them as soon as the HTML is received.
• Deferring or lazy-loading non-critical resources to reduce bytes and improve LCP. It's important to measure the performance of the website and to identify which techniques work the best for the specific use case.

Asynchronously or lazy loading non-critical resources

Optimizing non-critical resource loading can be done by delaying their retrieval until they are required or by having them loaded simultaneously with the rest of the page.

Techniques such as lazy loading, where only certain resources such as images, videos, and other media are loaded as the user scrolls down the page, can be used to reduce the amount of data and requests that the browser needs to download and parse. This can improve LCP scores. For instance, using the loading="lazy" attribute on an image tag or a JavaScript library such as lazysizes can implement lazy loading on images.

Loading resources concurrently, also known as asynchronous loading, allows them to be loaded in parallel with the rest of the page, without blocking the browser from parsing and rendering the above-the-fold content. This can be done by using the async or defer attributes on script tags, or by using a dynamic script loader library such as loadJS. For example, to load a script asynchronously, one could add the async attribute to the script tag:

Reduce the number of requests your pages make

By minimizing the amount of resources that need to be loaded, such as images, scripts, and stylesheets, it can decrease the number of HTTP requests made by the page. This can result in a faster loading time and improve LCP by reducing the amount of time needed for the browser to download, parse and execute the necessary resources to render the above-the-fold content.

This can be accomplished through a variety of methods, including:

• Compressing and minifying resources to decrease their file size and the amount of data transferred over the network.
• Implementing "spriting" to combine multiple images into one, thus reducing the number of requests necessary to load them all.
• Using font icons instead of images for icons, eliminating the need to load multiple images for each one.
• Using lazy-loading for images and other media, only loading resources as the user scrolls down the page, thereby reducing the number of requests required to load all resources.
• Code splitting and dynamic imports can be used to only load the resources that are needed to render the above-the-fold content of the page, reducing the number of requests required to load all resources.

Use a Content Delivery Network to bring data closer to the user

Using a Content Delivery Network (CDN) can improve the LCP by reducing the distance that data needs to travel to reach the user. By distributing resources across multiple servers in different geographic locations, the CDN can serve the resources to the user from a server that is closer to them. This reduces the time it takes for the resources to be delivered, which can improve the LCP score.

Optimize images by compressing and choosing the right format

Optimizing images by compressing them and using the appropriate image format can improve the LCP by reducing the file size of the images and therefore the amount of data that needs to be downloaded by the browser. This can be achieved through a variety of techniques such as:

• Compressing images using our JPEG or PNG Compressor tools to reduce the file size without sacrificing quality.
• Use the WebP image format, which can provide the same quality as JPEG and PNG images but with smaller file sizes, especially for photographic images.
• You can also use the JPEG 2000 or JPEG XR image format, which provides better compression than JPEG and can be used for photographic images.
• Use the AVIF image format, which can provide even better compression than webp.

For example, using the WebP image format can be done by using the element and the tag with the webp format like this:

<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>

Another way can be by using the tag with the "accept" attribute like this:

<img src="image.webp" alt="" accept="image/webp">

Please note that not all browsers support all image extensions, you should implement a backup strategy for browsers that do not support the image format you are working with.

Store frequently-used resources in the browser's cache

To use browser caching, you can use HTTP caching headers to tell the browser to store a copy of the resource locally. This will reduce the number of requests that need to be made to the server and thus improve the LCP score. Some examples of how this can be done include:

• Adding an Expires or a Cache-Control header to resources
• Using a tool such as mod_expires for Apache or the expires_module for Nginx to automatically add caching headers to resources
• Using a service worker to intercept and cache resources

Reduce the amount of code that the browser needs to execute

Minimizing the amount of code that needs to be executed by the browser can improve LCP by reducing the time it takes for the browser to parse and execute the code. One way to accomplish this is by removing unnecessary JavaScript and CSS. This can be achieved by:

• Removing any unused code from the JavaScript and CSS files.
• Using a CSS preprocessor such as Sass or Less to write modular CSS, making it easier to remove any unused styles.
• Minifying the code, which removes unnecessary white space and comments, making the code smaller and faster to parse.
• Using code splitting and dynamic imports to only load the code that is needed to render the above-the-fold content of the page, which reduces the amount of code that needs to be executed.
• Using a technique called tree shaking, which analyzes the code and removes any unused functions or variables, reducing the amount of code that needs to be executed.
• Using a technique called dead code elimination, which analyzes the code and removes any code that is unreachable or not executed, reducing the amount of code that needs to be executed.

Another way to minimize the amount of code that needs to be executed is by optimizing the code itself. This can be achieved by:

• Using modern JavaScript features like async/await, which can improve the performance of the code.
• Using modern CSS features like CSS Grid, Flexbox, and Variables, which can improve the performance of the code.
• Using a JavaScript/CSS framework or library that is designed for performance, such as React, Angular, and Vue.
• Using a tool such as Lighthouse to analyze the code and identify any performance bottlenecks.

Use a preloader to load resources in the background

One way to use a preloader to improve LCP is to load resources in the background while the page is being rendered. This can be done by using a JavaScript library or preloading library. The preloading library can fetch the resources that are likely to be needed in the near future and store them in the browser's cache, so they are available immediately when needed. This can reduce the time it takes for resources to be loaded, which can improve the LCP score and provide a faster, more responsive website experience for users. Another way is using preload and preconnect links to hint the browser about the resources that will be needed, allowing the browser to start fetching the resources before they are actually needed. This technique can be done by using the tag and adding the rel attribute with the value "preload" and "preconnect".

For example:

<link rel="preload" href="styles.css" as="style"> <link rel="preconnect" href="https://fonts.gstatic.com">

It's important to note that, it's also important to review the code and optimize it, removing any unnecessary code that is not in use to minimize the resources that need to be loaded and executed.

Break up your JavaScript codebase into smaller chunks

By using code-splitting you can break up a JavaScript codebase into smaller, manageable chunks. This technique allows for only the necessary code to be loaded initially, rather than loading all code at once. By only loading the code that is required to render the above-the-fold content of the page, and lazy loading the non-critical resources, the browser can start rendering the page sooner, improving LCP. See below for methods that you can use:

• Using dynamic imports to only load the resources that are needed to render the above-the-fold content of the page, which reduces the amount of code that needs to be executed by the browser and improves the LCP score.
• Using a build tool such as webpack to automatically code-split your JavaScript codebase into smaller chunks that can be loaded on demand, based on the routes or pages of your application.
• Utilizing a library such as React Loadable or the built-in dynamic imports feature in Vue.js to handle code-splitting at the component level, which allows for more granular control over which chunks of code are loaded and when.
• Implementing a "preloading" strategy to load critical resources in the background while the page is being rendered, so that they are available immediately when needed, improving the LCP score.
• Using a library such as quicklink to preload resources as the user is navigating through your website, so that they are available more quickly when the user visits that page.

Minimize the use of third-party scripts that can slow down the page

Minimizing the use of third-party scripts on a website can help to improve the LCP score by reducing the amount of time it takes for the page to load. Third-party scripts can slow down the page by adding additional network requests and JavaScript code execution. They also add an additional point of failure and can increase the risk of security vulnerabilities

• Minimize the number of third-party scripts used on the website.
• Evaluate the necessity of each third-party script, if a script is not needed, remove it.
• Use script managers or tag managers to load third-party scripts asynchronously.
• Use a service worker to cache third-party scripts and serve them from the cache, reducing the number of network requests required to load the page.
• Use a technique like dynamic imports to only load third-party scripts when they are needed, rather than loading them all upfront.
• Use a Content Security Policy (CSP) to limit the use of third-party scripts.
• Use third-party script alternatives or build your own script that serves the same purpose.

Test your web vitals to identify and troubleshoot issues.

You can test the Core Web Vital scores for your website's pages with our website speed test. You will find the LCP score under the "Key Metrics" section. Click the "Issues" tab to identify potential isues.

How is the LCP score calculated?

The LCP score of a web page is calculated in the following way:

• The browser begins measuring the LCP as the page loads.
• As the page loads, the browser records all visible elements in the viewport and their sizes.
• The browser ends measuring when the largest element is fully loaded and calculates the score.
• The score is calculated in milliseconds and represents the time taken for the largest visible element to fully load.

There are certain edge cases where LCP may be affected by browser implementation, such as an element that changes size after being recorded, or elements that are preloaded into the cache and already present when the browser starts measuring LCP, making the loading time seem faster than it actually is.

What is a good LCP score?

A good LCP score is considered to be under 2.5 seconds. See below for what Google considers the best, average and worst LCP scores:

While 2.5 seconds is recommended, the possibilities may vary based on the complexity of the website. For example, a website with a simple layout and few resources may have a lower threshold while a website with complex layout and many resources may have a higher threshold.

LCP is a synthetic metric and it's measured under lab conditions, with a fast internet connection, so it may not always reflect the actual performance seen by real users. That's why it's important to combine LCP with other metrics such as Time to Interactive and First Input Delay, and real user monitoring (RUM) data, to have a better understanding of the performance of the website for real users under different conditions. So make sure to combine LCP with other metrics and real user monitoring data to understand how the website is performing for real users.