Largest Contentful Paint explained: How to measure and improve LCP

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) is a metric introduced by Google as part of the Core Web Vitals to evaluate a website's loading speed and, consequently, its user-friendliness. LCP measures the time from the start of page loading to the complete rendering of the largest visible content on the screen. This content can be an image, a video or a large block of text.

LCP's importance lies in its direct impact on the user experience. When a page's largest visible content loads quickly, users feel more satisfied and stay longer on the website. Additionally, search engines such as Google favour websites with good LCP scores, which can lead to better rankings in search results.

Overall, Largest Contentful Paint (LCP) provides a realistic estimate of when a page's essential information is accessible to the visitor. The various performance metrics each have their own significance and use cases, which together help to provide a comprehensive insight into a website's loading time and user-friendliness.

Which factors influence LCP?

Largest Contentful Paint (LCP) is influenced by various factors that affect both server-side and client-side aspects of website performance:

Server response time

A slow server response delays the moment the first byte of the web page is sent to the browser, which extends the overall load time. The choice of web hosting provider and the quality of the infrastructure (e.g. dedicated Dedicated Server vs. shared web hosting) have direct effects on the server speed.

Render-blocking resources

JavaScript, CSS scripts and stylesheets that are not loaded asynchronously or with defer block the rendering of the web page until they are fully loaded and processed. Large and complex CSS or JavaScript files take longer to load and process.

Large image and video files

Images that are not compressed or provided in an efficient format (e.g. WebP) slow down loading. If images and videos are loaded immediately instead of being deferred until they enter the user's visible area (Lazy Loading), this increases the load time.

Client-side rendering

If extensive JavaScript operations must be performed before content can be rendered, this delays the LCP. Large and complex DOM structures require more time to render.

Network requirements

The physical distance between the geographical location of the server and the user's device can increase latency. Slow internet connections lengthen the time it takes to load content.

Caching and CDN usage

Without effective caching, resources must be reloaded on every page visit, which increases load time. The use of a Content Delivery Network (CDN) can reduce load time by distributing content across servers that are geographically closer to the user.

How can LCP be measured?

There are various methods and tools to measure LCP precisely:

Browser developer tools

In the Chrome browser, LCP can be measured as follows:

• Open the Developer Tools (right-click on the page > "Inspect" or press F12).
• Navigate to the "Lighthouse" tab and run a Performance audit.
• In the "Performance" tab, LCP can be measured and analysed directly by reloading the page and starting the recording.
• The LCP value is displayed in the waterfall chart, together with a marker indicating when LCP occurs.

Online tools

Using Google's own PageSpeed Insights online tool, the LCP can be measured as follows:

• Open the tool at https://pagespeed.web.dev/
• After entering the URL, a Core Web Vitals report is generated that includes both field and lab data for the LCP.

Some other online tools, such as the Uptrends Webspeed Test, also display measurement data for the LCP:

• Open the tool at https://www.uptrends.com/tools/website-speed-test
• After entering the URL, a performance report is produced that also includes data for Core Web Vitals such as the LCP.

Difference between field and lab data for LCP

Field Data (field data) are data collected from real users under real-world conditions, for example via the Chrome User Experience Report (CrUX). These data are particularly valuable as they reflect the actual user experience. In contrast, Lab Data (lab data) are collected under controlled conditions, for example using tools such as Lighthouse. These tests are reproducible and provide consistent metrics, but they are not always representative of all user experiences.

Find out which web host performs best for LCP in our performance test:

How can LCP be improved?

LCP can be optimised by implementing various measures:

Optimising server performance

• Use of a Content Delivery Network (CDN): A CDN distributes content across multiple servers worldwide, reducing load time by allowing users to fetch content from a server that is geographically closer.
• Server-side optimisations: Enable server-side caching to serve repeated requests faster. Optimise database queries to reduce response times. Enable Gzip or Brotli compression to reduce the size of transmitted data.

Minimising render-blocking resources

• Optimise CSS and JavaScript: Inline critical CSS: Only inline the CSS required for the initial page render to speed up rendering.
• Asynchronous and defer loading of JavaScript: Load non-critical JavaScript files asynchronously or with the defer attribute to avoid blocking rendering.
• Avoid large CSS and JavaScript files: Split files into smaller, more modular parts and load only what is necessary.

Optimising images and other large content

• Image compression: Compress images losslessly or with loss (lossy) to reduce file size. Scale images to the actual required dimensions to avoid oversized files.
• Modern image formats: Use modern image formats such as WebP, which offer smaller file sizes at the same quality.
• Lazy loading: Implement lazy loading for images and videos so they are only loaded when they enter the user's viewport.

Improving client-side rendering

• Reduce DOM size and complexity: Simplify the DOM—avoid unnecessary elements and deep nesting to speed up rendering.
• Efficient use of web fonts: Only load the required font weights and sizes and use prefetching to reduce load times.
• Prioritise visible content: Prioritise elements that should appear first to ensure they load quickly.

Caching and browser optimisations

• Browser caching: Set correct cache headers to keep resources in the browser cache and avoid repeated downloads.
• Service workers: Use service workers to store page content in the cache and enable instant load times on repeat visits.

Largest Contentful Paint (LCP) is a crucial metric for evaluating a website's loading speed and user experience. Through targeted optimisations, such as improving server performance, minimising render‑blocking resources and efficient image compression, LCP can be significantly improved. Continuous monitoring and optimisation of LCP values helps to increase user satisfaction and achieve better rankings in search engines.

Find out about the fastest web hosts in Germany and how they perform for Largest Contentful Paint (LCP).

Our article is based on our own experience and research as well as information from external sources.

Sources & further links on the topic:
https://www.uptrends.com/tools/website-speed-test (Uptrends Webspeed Test)
https://pagespeed.web.dev/ (Google PageSpeed Insights)
https://developers.google.com/search/docs/appearance/core-web-vitals?hl=de (Information on Core Web Vitals from Google)