How to Improve LCP - Largest Contentful Paint

Introduction

Measuring a page speed from the user’s perspective has always been a struggle. While various page performance tools can give you useful insights in regard to your performance, it does not always fully reflect the user experience. This is especially the case when we want to measure perceived page load speed for visiting users. Largest Contentful Paint (LCP), however, aims to solve this problem.

LCP is the most noticeable by the naked eye and perhaps the easiest to understand metric among the Core Web Vitals, which are the metrics Google uses to measure quality of a website to ensure visitors get great experience. Not only that, Google also stated that Core Web Vitals will be a part of its search engine ranking starting in 2021, so they are important for your SEO ranking.

In this article, I will explain what LCP is, how to measure it, and several ways to improve and optimize the LCP score of your website.

LCP essentially measures how long it takes for the largest content visible on your viewport to load. For a website, it means that content that appears above the fold will be measured for LCP. However, as the name implies, the LCP score will be affected by the single largest element.

What is defined as “Largest Content”?

Unlike other metrics, LCP does not measure the actual file size of your content element. Rather than measuring in kilobytes and megabytes, LCP measures how much space the elements actually take on the user’s actual viewport. If an image or a large block of text overflows above and/or below the fold, only the visible part will be relevant to the LCP score.

Images and Videos

So, videos, images, and texts all will be considered in the LCP score, but the actual load time of the actual biggest element, even if it is a few paragraphs of text, will be your LCP score.

However, when it comes to images, it is a bit tricky. For example, if you scale down a 400×400 pixel image to 100×100, only the 100×100 dimension will be measured.

Scaled-up images work the opposite, as only the dimension of the original image is measured. So, if you scale up a 100×100 pixel image to 150×150, then only 100×100 pixel space will be measured as the dimension/size of that image element.

Text Contents

For text elements, only the actual space that the text takes on screen will be measured. If your text elements have CSS properties such as margin, padding, or border, the space taken up by those properties will not be considered.

LCP Measure of HTML Elements

According to guidelines from Google, the following elements are considered for the Largest Contentful Paint metric:

  • Image elements
  • Image inside an SVG
  • Video elements (the cover image will be used to determine the size)
  • Background images loaded via the url() function
  • Block-level elements (p, div, h1 are among the many block-level elements. Full list can be found here.)


Interestingly, SVG is not measured for LCP. Google may add additional elements in the future as they gather more field data.

Is Largest Contentful Paint (LCP) Score Important?

As a part of the Core Web Vitals, LCP will be one of the metrics Google uses for search engine ranking. Not only that, attaining a good LCP score will ensure that the perceived loading speed of your website is fast enough for visitors not to bounce.

What is a Good LCP Score?

The recommendation of Google is that the Largest Contentful Paint should be within 2.5 seconds of page load, for both mobile and desktop. Anything above 4 seconds is bad, and it will impact your overall PageSpeed performance score as well as search rankings.

LCP-Score-Meter

How to Measure LCP Score?

Largest Contentful Paint is both a lab and field metric and measurable for both using various available tools.

Google PageSpeed Insights and Search Console (navigate to Core Web Vitals section) are the field tools and easiest to use. It will also tell you a plethora of other useful Core Web Vital metrics, such as First Contentful Paint (FCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). For debugging and in-house testing purposes, you can use Chrome Lighthouse or Chrome DevTools, as they are excellent lab tools.

One thing you must note, though, is that the PageSpeed Insights will tell only the LCP score of the webpage you are running the test on, but it won’t tell you exactly what element is the cause of your LCP score.

You can check this by loading Chrome DevTools (pressing F12 in Chrome will open it), and go to the Performance tab. Then, click on the Reload button, which will reload the page and record the performance.


When it finally loads, you can click on the LCP marker and look for Related Node in the Summary window. Hovering your mouse cursor on it will highlight the on-page element that is associated with your LCP score.

How to Improve LCP Score

It is important to understand here that there is no one-size-fits-all approach when it comes to optimizing the LCP score. One reason is because what is defined as the largest content element above the fold will differ from page to page.

This variability means that your approach to optimizing the LCP score for 75% of pages on your website has to cater to each specific need. However, in this article, I will guide you along some of the best practices as well as a general methodology on how to optimize your page to getting a good LCP score.

There are some common causes for a bad LCP score, and they can be categorized as below:

  • Slow server response times
  • Client-side rendering
  • JavaScript & CSS blocking page render
  • Slow asset load times

In the next section, I will explore different techniques that will address those causes.

How to Get Faster Server Response Times

When your web hosting server is slow to respond to the user’s browser, it takes longer to load anything else. Having a fast server response time will directly impact various page speed performance metrics, including LCP.

Server Optimization

Optimizing your web server will definitely lead to a better TTFB result, which is a measure of server response times. However, if you are running on a shared hosting service, then this is going to be difficult to perform. If you don’t want to mess around with custom server configurations, you can instead move to a better and faster web host. I have done a comparison for the fastest web hosting services, and you can read all about it here.

TTFB comparison

Comparison of the same website, on two different hosting companies

Use Cache

Caching your website as static HTML and various other assets can reduce the server resource usage, and lead to a reduction in TTFB.

This can be achieved by using a cache plugin if you are using WordPress. For WordPress website owners, WP Rocket and WP Fastest Cache are two popular cache plugins with freemium and premium pricing models.

Use CDN

Serving your visitors using a Content Delivery Network (CDN) will further reduce the slow server response time as you can serve content from the nearest CDN server to the visitors, eliminating a few more milliseconds of load time from each asset. Your font assets will need to load faster if your largest content is a text block, and the same goes for image assets. So CDN definitely helps here.

By combining your static cached assets together with CDN, you can get a pretty fast performance out of your site.

Among the CDNs, Cloudflare has a free tier if you are just starting out. BunnyCDN is another paid CDN that I can recommend for its advanced features and very wallet-friendly pricing. They also have a 14-day (or 1,000 GB data transfer) free trial so that you can test it out before committing to their paid plans.

Improve Asset Load Times

Improving the loading times of the assets on your website will also have a direct and noticeable impact on the LCP score. As mentioned before, using cache and CDN can help with the loading times. But what about third-party assets from external sources? In this section, we explore the methods and techniques to improve the load times of both.

Lazy Load

Lazy loading is a common method used by many, but it is not a good fit for LCP score if your largest content is an image.

Essentially, lazy load is to avoid loading unnecessary images below the fold. As a user scrolls, the images start to load. This is one good way to improve page speed.

However, if your largest content above the fold is an image, then it is an entirely different story. The reason behind this is that the web browser has to download lazy load script, parse, and execute first, only to find out that the images are in the viewport of the user, so they need to be loaded. This whole process results in images taking much longer to appear.

The bottom line is that if you are to improve your LCP score when the largest content is an image, just make sure that image is excluded from lazy loading.

DNS Prefetch & Preconnect

Your website may need to connect to assets from third-party services, such as Google Map or an embedded tweet from Twitter. In such cases, the waiting time for responses from such third-party origins can impact your LCP. To reduce this, we can use DNS prefetch and preconnect to establish a connection with the defined address as soon as possible.

The code looks like this:

<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">

If you use any caching plugins that support this, you may also be able to enable DNS prefetching in the plugin’s settings.

Preload

Preload tells the web browser to request an asset as soon as possible. It is tempting to use preload on any assets that you deem important. However, in the case of optimizing for a better LCP score, it is better to preload only critical assets you need to render the above-the-fold contents. Another thing to note is that if your LCP is an image, it is a good strategy to preload the main image so that it will load earlier and faster And for further information on preload, check out this link: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

However, things are different if your LCP is a block of text. In such a case, if you preload your font assets, it actually hurts your LCP. Basically, because the browser is busy loading your font asset before painting the text content, your LCP score will be bad.

I recommend not preloading your fonts, but using font-display: swap for your LCP text, which tells the browser to paint the text content first using the default browser font. Right after the font you are using is loaded, it will be swapped. You get a flash of unstyled text (FOUT), but this will improve your LCP.

font-display

From font-display.glitch.me

Compress or Optimize Images

Unoptimized images are likely the most common source of bad LCP scores, as they can badly affect the loading time. A single unoptimized and uncompressed image can easily add a minimum of 1-3 seconds to load time, depending on file size.

There are two ways to handle image compression and optimization. One is by using image compression plugins such as Smush, Imagify, or ShortPixel, which will automatically compress images. Another great image service that supports WebP and on-the-fly image compression is Optimole. And the second way is to compress the images before uploading them using one of many compression online tools.

Having said that, my favorite method is to use a next-generation image format like WebP that maintains quality while compressing up to 90%. WebP is created by Google, and most modern web browsers support the format. If the browser does not support the WebP format, then the default image will be used as a fallback. The good news is that most modern browsers now have support for WebP format.

The easiest way to serve images as WebP format on a WordPress site is to use a CDN that supports image conversion on the fly. Cloudflare in their paid plans and BunnyCDN mentioned above support this, although BunnyCDN is likely more affordable.

You may also use WebP Express plugin which will convert the images to WebP on the fly.

Sliders

If you are using a slider plugin, most likely JavaScript is used to help with loading your slider images. It would usually result in poor loading time of images and ultimately hurting your LCP score.

It is really a trade-off in this case between LCP score and design aesthetics. But you might want to consider using a hero image instead of a slider. Or if a slider is a must-use, then you may want to test different slider plugins to see which one hurts your LCP score and other Core Web Vitals scores less.

Minify Assets

Minifying CSS, HTML, and JavaScript files will reduce the file size and load time of those assets. You can do so automatically by using plugins. Many caching plugins also come with features to minify your assets.

Deferring JavaScripts

Deferring render-blocking JavaScripts will also load the above-the-fold content quickly and reduce your LCP score.

Wrapping Up

While being a deceptively simple metric, the LCP is a very effective metric in measuring the delightful user experience. Since this is a part of Core Web Vitals that will have a direct impact on search engine ranking in the near future, it is important to optimize your Largest Contentful Paint score to be as low as possible.

If I have to give you a summarized answer on how to improve LCP, in short, I would say fast hosting, preload the main image, use CDN, reduce JavaScript as much as you can, and on top of all that, DO NOT lazy load your image, as it definitely hurts LCP

Page Speed Optimization Course

Are you ready to learn more about advanced website page speed optimization techniques? Head over to my course here and deep-dive into all the amazing knowledge of website performance optimization!

FREE page speed recommendations for YOUR site

Send me your site URL, and I will personally check your site and give you a few recommendations for free.