How to Optimize Largest Contentful Paint in WordPress: 16 Ways to Fix LCP Score

Are you looking for an easy way to optimize largest contentful paint in WordPress? If you are, keep reading this article. Here, I will show you how to fix LCP in WordPress and achieve a better core web vital score.

Having a slow WordPress website or WooCommerce store is a nightmare. They can impact your overall revenue and customer experience badly. When discussing WordPress speed optimization, the first three things that come to mind are good web hosting, a caching plugin, and an image compression plugin.

But have you thought beyond that and optimized every inch of your website?

If you haven’t, this post is going to help you. Here, I will be sharing how you can track your website’s LCP score and how to improve it.

But before going further into the tutorial, let’s learn what is largest contentful paint and how to find it.

What Is Largest Contentful Paint

Largest Contentful Paint, or LCP, is one of the metrics used to measure a website’s loading time. How LCP is calculated, is the time the web browser took to render the largest content element in the viewport.

It is one of the Core Web Vitals introduced by Google. The lower the LCP is, the better. The ideal score should be less than 2.5 seconds. You are doing a good job if your LCP score is under this limit. On the other hand, if it is beyond 2.5 seconds, you should optimize the largest contentful paint of your website for a better user experience.

Here’s detailed information regarding LCP.

To find the LCP score of a website, you can use any of the popular speed testing tools:

• Google PageSpeed Insights
• GTmetrix

I will be using Google PageSpeed Insights for the task.

The first thing you must do is, enter the domain name you need to test and click on Analyze.

Within a couple of seconds, the platform will show you the results. There, you can see the LCP score under the Core Web Vitals section.

This way, you can find the LCP of your website.

Identify the Best Opportunities for Improvement of LCP

There could be n number of factors for the delay in LCP. The web.dev team has breakdown LCP into four parts.

The 4 core LCP factors are:

• Time to first byte (TTFB)
• Resource load delay
• Resource load time
• Element render delay

To improve the TTFB, you should start using a good web hosting provider and a CDN with full-page caching. 40% of the LCP score can be enhanced with these optimization methods.

Next, you can improve the resource load delay part by removing above-the-fold resources from further optimization like lazy loading. With proper optimization, you can score 10% better.

For resource load time, compress images, CSS and JS. You can generate critical CSS and set the expiration cache. This part holds 40% of the LCP score. So, tweak these options.

When you remove render-blocking for static files like CSS, JS, and HTML and set font display as optional, you can take care of the element render delay part. It holds 10% of the overall performance.

Next, let’s move to the article’s core, where I will explain how to fix the largest contentful paint in WordPress.

How to Optimize Largest Contentful Paint in WordPress – Fix LCP

There are many ways to fix largest contentful paint in WordPress. In this article, I have combined sixteen methods you should try:

1. Reducing CSS and JS sizes
2. Prioritize above-the-fold images
3. Exclude above-the-fold images from lazy loading
4. Using Brotli compression
5. Boosting cache expiration time
6. Using the SXGs option in Cloudflare
7. Loading third-party code below the fold
8. Try Cloudflare’s serverless rendering
9. Enable DNS prefetch
10. Lazy render HTML
11. Reduce font requests
12. Optimizing images
13. Eliminate render-blocking CSS and JS
14. Reducing TTFB
15. Use font-display: optional
16. Use an optimized caching plugin settings

Below, we will take a closer look at each method. So you can understand the topic better and improve the largest contentful paint in WordPress.

Without any further ado, let’s get into the list.

1.) Reduce CSS and JavScript Sizes

The file size of CSS and JS could be one of the main reasons for the low LCP. If you can optimize them and reduce the size, you can score better. Check out the waterfall option on the GTmetrix result page to know which CSS and JS files need optimization.

Here is how you can reduce the CSS and JS file size.

• Use a lightweight theme
• Use well-coded plugins
• Minify static files
• Get rid of the page builder plugin
• Optimize Analytics
• Use an asset-unloading plugin

Below, let’s see how each affects the performance of the website.

1.1) Use a Lightweight Theme

Don’t go for themes with many fancy features. Those themes come with a lot of unoptimized JS codes. By using them, you are compromising the website’s speed.

Instead, stick with a fast and lightweight WordPress theme. I recommend themes like

• GeneratePress
• Astra
• Kadence

And so on.

These themes come with well-optimized code. So they won’t hurt your LCP.

1.2) Use Well-Coded Plugins

For a single task, you can find different plugins with different features. For example, if you are looking for a caching plugin, you have several options like WP Rocket, FlyingPress, WP Super Cache, Perfmatters, WP Fastest Cache, and so on.

While selecting plugins, ensure you choose the ones with optimized code. If a plugin is slowing down your website, you should check for alternatives. For SEO, you should avoid using Yoast, instead start using Rank Math, it is much better than Yoast and does not add bloat to your site.

1.3) Minify Static Files

With the minification feature, you can eliminate unwanted whitespaces in your CSS and JS files. With a dedicated caching plugin, you can complete this task. Try using WP Rocket, Perfmatters, WP Fastest Cache, or any related ones.

1.4) Get Rid of Page Builders

You can create stunning designs with page builders like Elementor or Divi Builder. But since the plugins come with many CSS and JS files, the performance scores can be affected. Try to get rid of every page builder plugin.

If you can’t get rid of them, enable the performance mode in the plugins. Popular page builders plugins like Elementor and Divi have a performance optimization feature.

Instead, you can use block-based plugins which are based on WP Gutenberg blocks. I would recommend you use GenerateBlocks, Spectra, and Kadence Blocks plugins.

1.5) Optimize Analytics

If you use Google Analytics to track how visitors deal with your website, consider using a lightweight Analytics code or self-host the analytics code. With the Perfmatters or Flying Analytics plugin, you can complete this task easily.

1.6) Use an Asset Unloading Plugin

Using a plugin like Perfmatters, you can limit the usage of additional CSS and JS files. You can decide where the code needs to be loaded. This is a good option for optimizing the LCP of a website.

For example, if you use a social media sharing plugin on your website, you do not need to load the plugin files on all WordPress pages. So, limiting the plugin files loading to single posts/pages is a good option.

The Perfmatters plugin could be an excellent option for this task.

2) Prioritize Above the Fold Images

The images above the fold should be optimized for a better LCP. The FlyingPress plugin can help you achieve this task. It comes with a built-in option to prioritize and also preloads above the fold images.

To improve the performance, give high fetch priority for every above the fold image and use WebP as the image format.

This will help you optimize the LCP score of your website.

3) Exclude Above the Fold Images from the Lazy Load

Above the fold section in any website is the portion visible to visitors without additional scrolling. Hence, as the name says, above-the-fold images are available in the specified area.

When visitors land on a website, they will see these images without scrolling to the bottom. In most cases, websites will display the logo and a featured image (if configured) above the fold.

It can affect your LCP score.

The above-the-fold images need to be rendered instantly. Once visitors land on the website, it would be the first thing they see. So, instead of adding a lazy load class to above-the-fold images, we need to exclude them from lazy loading.

Using Permatters, you can complete this job.

Once you have enabled lazy loading, you can choose how many leading images must be excluded from the feature. Once you have modified the settings, save it.

From now on, the lazy loading feature won’t affect every above-the-fold image.

4) Start Using Brotli Compression

Brotli is a far better compression method than GZIP compression. It will reduce the size of your static files even smaller. Several web hosting providers allow Brotli compression on their servers by default. Are you using Brotli compression or still stuck with GZIP, check compression method here.

Kinsta and Rocket.net are two of the famous web hosting providers in the market that has the Brotli compression method in-built. You can contact your hosting partner to see if they have the feature.

If your web hosting provider does not provide this feature, you can use Cloudflare. Under the Speed > Content Optimization tab, you can see the Brotli compression option.

Once you have enabled the option, you are good to move forward.

5) Boost Cache Expiration Time

This is an excellent option to boost the LCP time. Whenever someone lands on your website, if you are using any CDN website like Bunny.net, Cloudflare, or Stackpath, the provider will serve the cached files.

To optimize the LCP score, you can increase the cache expiration time.

Here’s how you can do it via Cloudflare. Search for the configuration option called Browser Cache TTL. Under Cloudflare’s Caching settings, you can find this option.

By default, it will be configured as 4 hours. But from the dropdown, you can modify the value and use up to 1 year!

While you run a content website, setting up one year would be feasible. On the other hand, if you represent something like an online store, use one month or something.

6) Use SXGs in Cloudflare

SXGs stands for Signed Exchanges.

Google highly recommends this to boost the LCP if you get many visitors directly from the search engine. What SXGs does is it prefetches the domain hence increasing the website’s loading speed.

Under Cloudflare’s Speed settings, you can find the SXGs option.

You should be using a premium subscription to Cloudflare to use this feature. There are no extra customization options. Once you have enabled it, you are good to go.

7) Load Third-Party Code Below the Fold

If you are loading your Analytics and AdSense JS codes in the header, it can affect the LCP.

Instead, you can load every third-party code below the fold.

Once you have moved all the code below the fold, Another recommended option would be delaying the Third-Party Code loading.

You can use Perfmatters for this task.

You can add the JavaScript file names in the box and save the settings. You can delay the scripts you mentioned in the box or the entire ones.

Pick an option according to your preference.

8) Try Cloudflare’s Serverless Rendering

This method is advanced, and I only recommend it if you know what you are doing. Once you have completed this process, your dynamic WordPress website will be converted to a static one and deployed with Cloudflare pages.

For the task, you will be using a plugin called Static Files.

For a detailed tutorial, check out this page. On the other hand, for examples, check out this page.

Again, I only recommend this method if you are an experienced developer. The process will help you boost the score of the largest contentful paint in WordPress.

9) Enable DNS Prefetch

If you rely too much on third-party domains, the prefetch DNS option will be handy.

For example, if you require files from third-party websites like Google Fonts, Google Analytics, Google AdSense, Adobe Typekit, and so on, this can affect the LCP.

Any WordPress performance optimization plugin can help you with DNS prefetch. Here’s how you can use Perfmatters for prefetching and preloading.

Once you have entered the domains in the field, save the settings. This way, you can ensure the LCP won’t be affected much.

10) Lazy Render HTML

You can lazy render any HTML element on your website to improve the page loading speed. For example, you can lazy render #comments, #footer, #sidebar, or anything you like.

On TechNumero, we use the FlyingPress WordPress plugin to lazy render the comments and footer section. Since the plugin comes with minimal configuration options, all you need to do is, enter the HTML elements you need to lazy render and save the settings.

That’s it! From now on, the HTML elements you mentioned in the settings will be lazily rendered, saving you LCP performance.

11) Reduce Font Requests and Preload Fonts

You can score better in LCP test results by adequately optimizing your fonts. Here are a couple of options to optimize the fonts.

• Use Web Safe fonts over Web fonts
• Host fonts locally on your server in case of Web fonts
• Prefer not to use third-party fonts like Google Fonts, Adobe Fonts
• Mention the font size and weight clearly in the CSS code
• Set Font display as optional
• Preload fonts to optimize them
• Don’t use FontAwesome icons, instead use SVGs

Using these font optimization methods, you can improve your largest contentful paint in WordPress.

A WordPress performance plugin like Perfmatters or FlyingPress can help you with this task. Both tools support third-party font localization. Here’s how you can do it with Permatters.

Inside Perfmatters options, go to the fonts section. There, you can see the settings to host your Google font locally or on the CDN provider.

Enable the Local Google Fonts option, and save the changes. You can also clear the local fonts you have hosted on your server from the same page.

In the next section, you will learn how to boost the largest contentful paint in WordPress by optimizing images.

12) Optimize Images

You should optimize your images (if you haven’t) to get a better score at the largest contentful paint in WordPress. When you handle a content blog, you will probably add many photos to your articles. For example, you are writing a how-to tutorial on a broad topic.

To make the article clear and perfect, you should add a screenshot of every step you have explained. If you have added 20 images to your article, when a visitor loads that page, all content and images must be loaded simultaneously.

Since you have a lot of images, it will take longer to load the article, hurting the largest contentful paint in WordPress and user experience.

Hence, optimizing images in WordPress is crucial to save load time and improve page speed. Here are some tips you can use to optimize your images.

• Compress images
• Use WebP format if possible
• Mention image dimensions
• Use smaller size images on mobile screens

Let’s take a look at each option.

3.1) Compressing Images

I highly recommend compressing the images before/after uploading them to your website, even if you are using an image compression plugin. Without losing the quality of the image, you can reduce the file size. If you are looking for a hosted solution for compressing images, you can use the following:

• TinyPNG
• TinyJPG
• ShortPixel Image Compressor

While using these tools, you will be compressing these images first. Then, upload to the website and embed inside blog posts. On the other hand, if you prefer WordPress image compression plugins, you can check out these options:

• ShortPixel
• EWWW Image Optimizer
• Smush

A dedicated plugin will be the best option if you need to compress the images on the go. Once you have uploaded the media to your WordPress website, the plugin will automatically complete the task.

Another option could be to use a premium CDN like Bunny, FlyingCDN, or Cloudflare. These all provide over-the-air image optimization and quick delivery.

You can either keep the original image files (which will increase the disk storage use of your hosting plan) or altogether remove them.

According to your preferences, you can decide on one option.

3.2) Converting Images into WebP Format

If you need to optimize the images, consider using WebP format. You can either convert your images to WebP and upload them to the website or convert them to WebP after uploading with a dedicated plugin.

Most of the latest image optimization plugins offer free and auto WebP image conversion.

Since WebP images are smaller, increasing the website’s speed and boosting the largest contentful paint in WordPress is an ideal option.

3.3) Mentioning Image Dimensions

The next thing you should consider to optimize the images is mentioning a specific image dimension. You can easily do this when you add photos to your blog post.

Or, if you need to add particular image sizes to your website, use the Perfect Images WordPress plugin. The plugin is lightweight and will help you with the largest contentful paint in WordPress optimization.

3.4) Using Small-Size Images on Mobile

Cloudflare and BunnyCDN come with an image resizing option. Once enabled, you can ensure the images are served to your website visitors according to their screenshots.

You do not need to do anything manually. After enabling the feature, you are good to move forward.

Apart from the CDN I mentioned above, ShortPixel could be a good addition to your website to optimize the image. The plugin comes with a feature called Adaptive Images, which will help you serve images based on the visitor’s screen size.

Once you have combined the image optimization plugin with any CDN provider, you are good to go.

If your website attracts mobile visitors, this option would be an excellent addition. You can improve the overall largest contentful paint in WordPress this way.

13) Eliminate Render-Blocking CSS and JS

Eliminating render-blocking CSS and JS files can help you boost the largest contentful paint in WordPress.

You can complete this task with a WordPress performance plugin like Perfmatters or FlyingPress. To optimize the CSS delivery, enable the critical CSS option available in the caching plugin’s settings.

In some cases, using critical CSS can break your website. So, ensure your website is in perfect shape before continuing. You can check the website from an incognito window to see the changes.

For the JS optimization, use the defer option.

Save the configuration once you are done with the settings.

14) Reduce TTFB

TTFB directly impacts the largest contentful paint in WordPress. If you care about improving the TTFB (Time to First Byte), you should avoid all shared hosting providers. Instead, stick with cloud web hosting providers.

Two of the web hosting providers I recommend are:

• Cloudways
• Rocket.net

You can also use a CDN provider to improve the TTFB, such as Bunny.net. This way, the global audience will get a blazing-fast experience while going through your website.

Reducing TTFB will help you fix high largest contentful paint in WordPress.

I would also recommend you use Cloudflare DNS or other premium DNS. A fast DNS also helps reduce the time to first byte. You should check our full guide on the best DNS providers.

15) Use Font Display: Optional

When fonts are not loaded properly in the front end, they will add extra delays. And these delays directly impact the largest contentful paint in WordPress. To solve this issue, you can use the below snippet in your theme’s style.css file.

font-display: optional;

Hence, when you add extra fonts to the website through the style.css file, the code will look like this:

@font-face {
font-family: "Proxima Nova Regular";
font-weight: 400;
font-style: normal;
src: url("fonts/proxima-nova-regular.woff2") format("woff2");
font-display: optional;
}

Adding the font-display: optional snippet can solve the font delay issue and improve the LCP.

16) Use the Best Caching Settings

The right caching plugin and the perfect caching configuration would help you optimize the largest contentful paint in WordPress. Some of the popular WordPress caching plugins in the market are:

• WP Rocket
• FlyingPress
• W3 Total Cache
• WP Fastest Cache
• WP Super Cache

And so on. Check out our detailed post on the best WordPress optimization plugins for other options.

FlyingPress is the best plugin to optimize the largest contentful paint in WordPress. WP Rocket is also an ideal option, but in my tests, FlyingPress scored better.

To help you better understand which plugin is best, here’s a comparison table:

Optimization	FlyingPress	WP Rocket	WP Super Cache
Remove Unused CSS	Dedicated file	Inline	Inline
CDN Integration	Yes	Yes	Yes
Optimize Images via CDN	Yes	Limited	Limited
Critical CSS	Yes	Yes	Yes
Preload Critical Images	Yes	No	No
Font-display: swap/optional	Yes	Yes	No
Lazy Render HTML Elements	Yes	No	No
Serve Small Images to Mobile via CDN	Yes	Limited	Limited

That’s it!

These are the top sixteen ways to boost the largest contentful paint in WordPress. All the methods I mentioned in this article are easy to follow.

Why Fix the Largest Contentful Paint

Here are a few advantages of a better largest contentful paint in WordPress:

• Better for SEO: Since speed directly affects SEO, a good LCP performance is essential for SEO.
• Improved Speed: A website optimized for speed is a plus. If you run an online store, a faster website will help you sell more goods and make better conversion rates.
• Better User Experience: A faster website ensures the user experience is up to mark. Hence, a good LCP score is better for a better user experience.
• Reduce Bounce Rate: An increased bounce rate can hurt your website badly. It tells search engines that visitors aren’t finding your website useful. With a better LCP performance, you can reduce the bounce rate.

Google is considering page speed as one of the 200 ranking factors. So if you need to rank higher in SERPs, and outrank your competitors, spend time tweaking your website’s performance.

Frequently Asked Questions

Next, let’s see a few frequently asked questions regarding speed optimization and LCP.

Conclusion

As I mentioned at the beginning of this article, Google is considering website speed as a ranking factor. So if you need to outrank your competitors, your website needs to be optimized for speed.

Apart from fast web hosting, a lightweight theme, a caching plugin, and a fast CDN can help you speed up your website. This article covered the best ways to improve the overall core web vitals score.

I have tested these options and got a better largest contentful paint in WordPress for my other projects. Based on your requirements and preferences, try the methods individually and fine-tune them to fix the largest contentful paint in WordPress.

Is there any other method we can use to optimize largest contentful paint in WordPress?

Let me know in the comments.