If you run a WordPress website, you can't avoid to deal with Google's Core Web Vitals. Especially one of the three metrics is worth a closer look: The Largest Contentful Paint plays an important role not only for the load time, but also for your Google ranking. If you want to know what's behind this metric and how you can improve your Largest Contentful Paint , you've come to the right place. In this article, we clarify all important questions and reveal which measures website operators can use to achieve good values.

What is the Largest Contentful Paint? 

When a website is called up, it usually takes only a few seconds for it to be completely set up in the browser. Invisible to the visitors , numerous processes take place during this time. The Largest Contentful Paint (LCP) refers to one of the last events before the website is completely loaded: It describes how long it takes until the largest element on the site is completely loaded and visible . This is usually a block of text, an image, or a video.

This makes Largest Contentful Paint one of the most important metrics for website load time. Together with First Input Delay (FID) and Cumulative Layout Shift (CLS), it also belongs to the Core Web Vitalswhich Google uses to evaluate user experience (Page Experience).

Largest Contentful Paint vs. First Contentful Paint

A term that is also often used in connection with load times and website performance and can easily be confused is First Contentful Paint (FCP). We therefore explicitly distinguish between the two metrics once again for better understanding:

• The Largest Contentful Paint measures how long it takes for the largest element, that is, the main content of a site, to load completely.
• The First Contentful Paint refers to how much time elapses before the first element on the site is displayed - regardless of what the content is.

Your LCP will almost always be slightly higher than your FCP because the main content is usually not the first element to be loaded.

Why is the Largest Contentful Paint important?

You are probably wondering why you should take a closer look at the Largest Contentful Paint? We have two good reasons for you. Both will help you gain visibility for your website (and your business) and increase your conversion rate.

1. improved user experience

Largest Contentful Paint is an important indicator of how others experience your website. While your visitors usually doesn't care how long it takes to fully load each script and element on site , they do care about how long it takes them to use the site and view the most important content. However, they do care about how much time passes before they can make sense of the site and view the most important content.

If you optimize your website so that your LCP is as good as possible (more on that later), you'll give your visitors a solid user experience. If, on the other hand, you make them wait five seconds or more for the main content of your site, they'll bounce and look elsewhere. So they're far from downloading content, subscribing, subscribing to your channels, contacting you, or buying your products.

2. optimized Google rankings

Content is and remains the most important ranking factor for Google. However, if two websites perform equally well in terms of content, the one with the better Core Web Vitals will move up in the ranking. This is because the metrics are considered official ranking factors by Google. Thereby, the LCP influences the score the most: In the Google Lighthouse performance rating, the value accounts for about 25 percent.

So solid Core Web Vitals - and especially a solid LCP - can help you achieve better search engine rankings.

How to measure the Largest Contentful Paint

You can measure your LCP in different ways. A good starting point are the tools from Google: the Google Search Console, Google PageSpeed Insights and Lighthouse. In addition, WebPageTest offers good advanced analysis options.

Google Search Console

The Google Search Console gives you an overview of the performance of your entire website. You can find information about the Core Web Vitals via the left navigation bar. If you open the tab, you get a graphical overview of your URLs and can see relatively quickly which URLs are problematic. You can then take a closer look at them in the next step.

If you don't have Google Search Console set up for your website, you can also get all the information via Lighthouse or PageSpeed Insights.

Google PageSpeed Insights

In addition to the pure LCP values, Google PageSpeed Insights also provides you with useful tips and hints on how to improve the Largest Contentful Paint. Google also tells you which specific element was used for the test. So you can see right away where you can start optimizing.

You can use the tool in three simple steps:

1. Call PageSpeed Insights on.
2. Enter the URL of the site you want to check.
3. Start the test by clicking Analyze.

After that, Google will show you all Core Web Vitals at a glance, both for desktop and mobile. You should definitely take a look at both versions.

To find the Largest Contentful Paint element, scroll down the results page to the Diagnostics section. There, in the Largest Contentful Paint element section, the largest element in the viewport is listed.

Note: The element may be different for mobile and desktop. So you should always check both here as well.

Lighthouse

With Lighthouse you test and analyze the LCP in your own browser. The tool is already integrated into the developer tools of Google Chrome.

This is how you proceed in the browser:

1. Open the URL you want to check (preferably in an incognito window).
2. Open the Chrome Developer Tools (DevTools). The quickest way to do this is to right-click anywhere on site and click on Explore in the menu that opens.
3. Then go to the developer tools to the tab Lighthouse.
4. Select whether the LCP should be tested for the desktop or the mobile view. Under Categories, a check mark for Performance is sufficient.
5. Start the analysis with a click on Generate Report.

The test takes 15 to 20 seconds, depending on the website. Afterwards, you can view and evaluate all values and, for example, also compare them with the results from Search Console (if you have set this up).

WebPageTest

WebPageTest is especially useful if you want to configure the test individually and go deeper into performance analysis. Here you can also specify metrics such as the test location, connection speed or the device itself in the advanced options.

The results are also a bit more comprehensive with WebPageTest: The tool shows you exactly how your website loads, which elements are loaded and how fast the whole thing goes. The report contains many other metrics besides the LCP values - including a waterfall diagram. What that is exactly and how to evaluate it properly, you can read in our article Optimize WordPress: How to analyze your website in 7 seconds.

What is a good LCP value?

Google pretty much dictates how the LCP is scored:

• A Largest Contentful Paint of under 2.5 seconds is considered good and desirable.
• Values between 2.5 and 4 seconds are still satisfactory, but can be optimized.
• If the LCP value is above 4 seconds, it is considered poor and should definitely be improved.

Where does a weak LCP come from? 

The Largest Contentful Paint of each website can be broken down to four sub-elements, which together add up to the full LCP time:

• Time to First Byte (TTFB): This is the time from the user's request to the server's first response, i.e. to the first loaded data byte. Ideally, the TTFB should make up about 40 percent of the LCP time.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Resource Load Time: This value describes the time required to load the LCP element itself. Because, as with the TTFB, this involves a network request, this process may also take up around 40 percent of the entire LCP time.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Each of these subelements is influenced by other factors - the list of possible causes for a weak LCP is thus practically infinite. In most cases, however, one (or more) of the following four reasons is behind it:

• Your server is responding too slowly (TTFB).
• JavaScript and CSS block the page load (Resource Load Delay).
• You have a lot of large resources or visually demanding content on your site that takes a long time to load (Resource Load Time).
• Client-side rendering ensures that it takes longer for the LCP element to be fully rendered (Element Render Delay).

How to improve the Largest Contentful Paint

You now know what the Largest Contentful Paint is made up of and what can be the reason if the value is bad. Now let's take a look at what you can do if you want to improve the Largest Contentful Paint for your WordPress website. These are the most important tips and actions:

Rely on fast WordPress hosting

The basis for a good LCP is short loading times, or more precisely a short TTFB. High-performance hosting can make all the difference. Therefore, check if your current hosting might be slowing you down unnecessarily. If so, you should consider switching to a specialized managed WordPress hosting that is tailored exactly to your needs.

If you host your website at Raidboxes, you can expect an all-round WordPress infrastructure that pays off: After a migration on our servers, WordPress websites usually load up to four times faster - and that without any additional optimizations.

Enable caching

If you want your WordPress website to have a good LCP and load fast, there's almost no way around a decent WordPress caching. It improves the server's response time by caching frequently used files and retrieving them faster the next time. You can either use a plugin for this or choose a hosting with server-side caching, such as the one offered by Raidboxes.

Eliminate render-blocking JavaScript and CSS

Every website consists of HTML elements, JavaScript and CSS. The latter controls the rendering of the website, JavaScript is responsible for the dynamic elements (e.g. animations or forms). If JavaScript and/or CSS are loaded before the LCP element, although they are not yet needed, they complicate and slow down rendering.

You should therefore remove unnecessary JavaScript and CSS and keep the files as compact as possible. Also, you can move both to the bottom of site or delay the scripts so that they don't block the main content. The easiest way to do this is via plugins like Autoptimize or WP Rocket.

For more on JavaScript and CSS, see our article on reducing CSS, HTML, and JavaScript.

Optimize images

The larger the images on your website, the more likely you are to have a bad LCP. You should therefore always compress your images as well as possible. However, make sure that the quality loss is not too high. If you can determine which is your LCP element and it is an image, you can reduce its size selectively. This way the browser needs less time to download it and your LCP value is reduced.

What is the perfect size and in which format you should upload the images best, you can read in the article WordPress Image Sizes: How Images Work in WordPress & Best Practices for Your Website. Additionally, you can also find an overview of 6 popular image compression plugins in our magazine.

Prioritize the largest element

The largest element on a site should be easy to find and loaded as early as possible. By default, however, this is usually not the case with images, for example. However, you can use the fetchpriority attribute to tell the browser that certain elements should be fetched with a higher priority.

It might look like this:

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

(Note: paste this command in WordPress as a block "Code" and select HTML under the block options at "long eye"), then it will be formatted appropriately

But be careful: You should not prioritize more than one or two images forward, otherwise the signal will lose its effect. Conversely, you can also lower the priority of images. This is useful, for example, for images in carousel sliders that are located at the beginning of site but are not directly visible at the start. Prioritizing them lower frees up bandwidth for essential resources.

Conclusion: Improve response time and optimize code

The bottom line is that Largest Contentful Paint can be a crucial factor when it comes to your Google ranking and user experience. So it's worth taking a closer look and understanding this metric.

The more detailed you get into the Largest Contentful Paint, the clearer it becomes that there are an almost infinite number of smaller and larger screws you can turn to optimize the LCP. Some of them can be found more quickly, others require deeper technical know-how. So this article only gives a first overview and you can concentrate on two things for the start:

1. Speed up the response time of your server.
2. Optimize your website's code to render the LCP element as quickly as possible.

The most important factor for the response time is your hosting. With a powerful WordPress hosting, like the one we offer at Raidboxes, you won't have to worry about long waiting times for server response. So it might be worth switching.