How to Reduce Largest Contentful Paint in WordPress

Using Cloudways or Rocket.net with WP Rocket, you can fix the Largest Contentful Paint in WordPress.

The above-selected combination provides a hassle-free experience to improve the LCP for site owners who want to fix it by themselves.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the largest content elements like image or text block visible in the viewport. The Largest Contentful paint should occur within the first 2.5 seconds of the page starting to load.

If your search console shows an LCP Score above 2.5 seconds or 4 seconds, the page took more than 2.5 seconds or 4 seconds to check the visible elements.

How to measure Largest Contentful Paint?

The Largest Contentful Paint can be measured in the lab (like PageSpeed Insights) or the field (Chrome user data)

If your WordPress site has a low LCP score, follows this guide to fix and pass “Core Web Vitals”

How to Improve Largest Contentful Paint WordPress

1. Improve initial server response time

Server response time is the factor that measures and gives critical insight on how fast the pages on your website send the first data byte to the end-user device. To improve Largest Contentful Paint, the server response time should be reduced. Keep the response time as little as possible to improve the speed of your webpages.

The first way to do this is to select a fast WordPress hosting service.  If your server response time is higher, there is a high chance that your host is most probably overselling a slower server. So, make sure you keep a note and switch the host if required. Enhance the server response time for improving the speed of the webpages. 

At Hostingstep, we are known for real-time testing of hosting services, and below are the top five hosts with the low initial server response time.

Personally, I feel Cloudways is a better option as it gives the lowest response time among all the 10+ hosts we’ve tested till now.

2. Use CDN with Full Page Caching

A Content Delivery Network (CDN) is a network of servers present across the globe. Once you set up an account, the CDN caches your site contents (images, CSS and JS) throughout the global locations to improve the response time.

However, it isn't going to help you a lot, and I call it “traditional CDN hosting.” In 2021, one should go for Full Page Caching as it caches the entire content (HTML, images, CSS, and JS) in their global location. No matter wherever your visitors come from, the CDN takes care of delivering your site as fast as possible.

Traditional CDN

StackPath is our recommended hosting for full page caching as it does the job pretty neat and you just need to enable the “URL Caching” option. 

CDN with full Page Caching

If you want to reduce cost, try Rocket.net, our recommended hosting that comes with CDN full page caching enabled by default. Rocket.net uses Cloudflare Enterprise Network, which comes with access to all their global PoP locations and image optimization features like Polish and Mirage.

3. Use WP Rocket to cache your site assets 

WP Rocket is the superior caching plugin for WordPress. WP Rocket do page caching to improve the load time. It also does various jobs like GZIP compression, cache preloading, and browser caching to improve the site performance.

WP Rocket Hostingstep

WP Rocket automatically configures 80% of the options based on your host’s compatibility; thus, you can see improvements in page loading time by just using them.

4. Eliminate Render-blocking from CSS & JavaScripts

A web page starts rendering on any of the browsers only after gathering several elements such as JavaScript, CSS Stylesheets, HTML Imports, and HTML. Firstly, all the webpage elements will be downloaded, then only the rendering process begins.

The size of the HTML documents is small and gets downloaded faster by the browser. But it has to wait until the JSS and CSS scripts are loaded or downloaded for the rendering to begin. 

In clear terms, it means that the browser already receives HTML content, and the waiting time for other resources such as JSS & CSS scripts is also known otherwise as Render-Blocking resources.

When this occurs, the Largest Contentful Paint score increases to the maximum extent, and the loading time of your webpage increases. There are specific ways designated to help you eliminate the render-blocking resources. 

Some of such ways are:

  • Identify the critical scripts or resources. And the, prefer removing them from the render-blocking help and include it onto the HTML page with specific tags.
  • Select the non-critical resources as well and mark them with deferring attributes. It will direct the browser for script file execution only after HTML documents are completely parsed or loaded.
  • Some codes are infused in the scripts or critical resources that are not useful for your web pages. Consider removing these codes to optimize and improve LCP.
  • Next, optimize the CSS delivery using specific tools to remove their render-blocking aspects for improving the LCP.

WP Rocket provides an excellent option to eliminate the render-blocking CSS and JS issues on the go. Below are the simple options you need to use in WP Rocket.

Eliminate Render Blocking CSS
Eliminate Render Blocking CSS
Eliminate Render Blocking JS
Eliminate Render Blocking JS

5. Remove Slow Loading Plugins 

If you are still lagging with your desired Largest Contentful WordPress expectations, then it is better to remove the unwanted plugins that are slowing your web pages.

The solutions for such type of issues could be:

  • Eradicate the plugins that are performing slow and are unnecessary.
  • The necessary plugins can be either optimized or replaced with a similar alternative.

Use GTMetrix waterfall tab to see which script is taking time to load. Replace or remove the plugins that are least needed. Follow this minute method to eradicate the final loopholes from your website and webpage that will eventually enhance your LCP metrics.

6. Optimize JavaScript Inclusions

Javascript is one of the essential aspects of web pages or websites that requires optimization. For implementing this idea, here are some of the methodologies that you can implement:

  • Choose the WordPress themes that have fewer JavaScript functions embedded within them.
  • I prefer not to implement heavy widgets onto your website or web pages. 
  • Integrate only the light-weight plugins for better responsiveness.

7. Delay JavaScript Execution 

WP Rocket helps you to delay the loading of JavaScript files until the user interaction. This is a highly recommended method to reduce initial load time. 

WP Rocket Delay JS

8. Prefetch external DNS Requests

DNS Prefetching can make external files load faster, and it’s beneficial to improve the Largest Contentful Pain score in Mobile check of PageSpeed Insights. 

Using WP Rocket, enter the external hosts URLs that can be prefetched and see the magic in load time. Here are the most commonly used URLs you can include in your site.

9. Optimize, Compress and deliver adaptive images

By default, your images come with a lot of backend information, which increases the file size. There are many plugins like Smushit, ShortPixels that can compress and deliver adaptive images when needed. 

By delivering adaptive images, you can also fix the Cumulative Layout Shift in WordPress.

Concluding

Improving Largest Contentful Paint is not an choice but a mandatory requirement to pass “Core Web Vitals”. Google announced Core Web Vitals will be a ranking factor from May 2021.

In this post, I explained the simplest methods to improve LCP without the need for any developer. Do you have any suggestions? Ask in comments.

Leave a Comment