Largest Contentful Paint WordPress

How to Improve Largest Contentful Paint in WordPress

Largest Contentful Paint (LCP) is one of the critical web vitals announced by Google. Largest Contentful Paint measures how long it takes for the largest content element on a page to load. The largest content element could be an image, a video, or even text. A fast LCP is crucial to delivering a good user experience.

There are multiple ways to improve the Largest Contentful Paint on WordPress. Our guide will help most site owners fix the LCP issue.

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 blocks 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, follow this guide to fix the Largest Contentful Paint and pass “Core Web Vitals.”

How to Improve Largest Contentful Paint WordPress

1. Improve initial server response time TTFB

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

The first way to do this is to select a fast WordPress hosting service. If your server response time is higher (higher than 800ms), there is a high chance that your host is most probably overselling a slower server. So, keep a note and switch the host if required. Enhance the server response time to improve the speed of the web pages. 

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.

  • Rocket.net – 252ms
  • Cloudways – 302ms
  • GreenGeeks – 309ms
  • Templ – 309ms
  • A2 Hosting – 328ms

Personally, I feel Cloudways is a better option as it gives the lowest response time yet is affordably priced out of all the 10+ hosts we've tested till now. You can try Cloudways free trial and apply the coupon code 2022 to get an account free for the first three days. If you see improvements, move your sites to Cloudways or choose other fastest hosting options for the quickest TTFB.

2. Use CDN with Full Page Caching

A Content Delivery Network (CDN) is a network of servers 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 2022, 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

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

CDN with full Page Caching

If you want to reduce cost, try Rocket.net, our recommended hosting with CDN full-page caching enabled by default. Rocket.net uses Cloudflare Enterprise Network, 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 a special caching plugin for WordPress. WP Rocket does page caching to improve the load time. It also does various jobs like GZIP compression, cache preloading, and browser caching to improve 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; only the rendering process will begin.

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 straightforward 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 they prefer removing them from the render-blocking help and including it on 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, removing the unwanted plugins slowing your web pages is better.

The solutions for such type of issues could be:

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

Use the GTmetrix waterfall tab to see which script takes 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 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 lightweight plugins for better responsiveness.

7. Delay JavaScript Execution 

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

WP Rocket Delay JS

Update: WP Rocket automatically delays all the essential JS with a single click.

8. Prefetch external DNS Requests

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

Using WP Rocket, enter the external host URLs that can be prefetched and see the magic in load time. Here are the most commonly used URLs you can include on 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. Many plugins like Smushit and ShortPixels can compress and deliver adaptive images when needed. 

You can also fix the Cumulative Layout Shift in WordPress by delivering adaptive images.

Concluding

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

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

Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *