How to Improve LCP and Site Speed Automatically With WP Rocket 3.16

Disclosure: CyberNaira content is reader-supported. We may receive financial compensation if you purchase products or services on the merchant website but at no additional cost.

For years, WP Rocket has not been doing a great job optimizing the critical images found above the fold. It is one of the areas the plugin needs improvement in. 

If an image needs to be preloaded and rendered early on the page, you need to manually exclude it from lazy loading or use a helper plugin. This task is very challenging for anyone, especially non-coders or web developers.

It has been frustrating for website owners who need to improve LCP and site speed, especially the large, above-the-fold website elements. 

But the good news is that WP Rocket has released a new feature called “Optimize Critical Images,” which automatically optimizes the Largest Contentful Paint elements on a page without lifting a finger.

So, critical images within the user viewport, like the CSS background hero and featured images, can be preloaded as soon as the page starts rendering. This results in a better page experience across mobile and desktop, good Core Web vital metrics, and improved page speed. 

If you’re new to WordPress optimization, let’s quickly explain LCP and how it affects performance. 

What is LCP? Largest Contentful Paint.

LCP (Largest Contentful Paint) is the time it takes the largest elements on a page, such as a block of text or media asset, to load and be visible in the device viewport from the time a user initiates a page load request. LCP is one of the Core Web Vitals metrics for measuring a page’s performance, speed, and perceived user experience. 

If that’s all grammar, let’s break it into a more beginner-friendly version.

Imagine you receive a gift wrapped in a box and open it to see what’s inside. LCP measures the time it takes to see the gift from the moment you unwrap the box. 

If the gift box is easy to unwrap, it shouldn’t take long to see what’s inside. Depending on the individual, if the box takes too long to unwrap, it may cause unnecessary anxiety or a tense atmosphere.  

The same thing happens on the web. A web page that takes forever to load essential elements frustrates its users and might even cause severe consequences if the user needs access to important documents quickly.

A good LCP score is under 2.5 seconds; anything above that threshold must be improved. If you’re having difficulty fixing your site’s high LPC score, the rest of this article is for you. 

How Largest Contentful Paint Affects Site Performance

A poor LCP score can negatively impact your site’s performance, user experience, SEO, and overall usability. If it takes longer for above-the-fold resources to load, a user might get impatient and leave the web page while it is still loading. 

The faster a user can interact with a web page, the higher engagement, conversion, and lower bounce rates. A faster LCP, under 2.5 seconds, makes the webpage feel more responsive and fast-loading for users.

Search engines like Google consider page speed to be a ranking factor. If a page is perceived as too slow to load for its users, it will affect its SEO rankings. 

The impact of page speed on SEO is significant in a competitive niche with lots of good content. Google uses every ranking signal, including speed, to weigh content relevancy and SERP position to search queries in a highly competitive niche.  

A 2.5 LCP score indicates a fast-loading web page; between 2.5 and 4 seconds signifies the web page could be improved to achieve a better score. A web page measuring 4 seconds and above requires urgent attention and optimization. 

If most of your site URLs measure above 2.5 seconds LCP, you must pay attention to the rest of this article.

Test Your Site LCP Scores 

To improve your LCP performance score, test your website pages using reliable testing tools. Several tools are available to assist you in analyzing, measuring, and providing deep insights into your website’s Core Web Vitals metrics.  

These tools show the on-page LCP elements that need to be preloaded early into the viewports. They also give expert-level recommendations, potential size savings, and links to additional resources for insights and guidance. 

So, the first thing to do is to head over to your Google search console account. Click Core Web Vital (Under Experience Report) on the menu list to review the data. You will see a list of URLs Google considers not loading quickly enough to provide a better user experience. 

You can directly analyze affected URLs from the Search Console using the Google Pagespeed Insights testing tool. Other Core WebVital metrics testing tools exist:

• Webpage Testing tool 
• GTMetrics.
• Pingdom

Test all affected pages and record their worst and best performance scores. After installing WP Rocket on your website, you will need these reports later to compare with the current result. 

How WP Rocket Optimizes LCP and Website Speed.

If you have not installed WP Rocket, you should do so now to optimize LCP and other Core Web Vital metrics to improve page speed, user experience, and SEO. 

You’ll need to purchase a license, as the WP Rocket plugin is premium only. However, you have a 14-day money-back guarantee policy, so it’s risk-free. If the plugin is not what you’re looking for, you can request a non-negotiable full refund.  

Away from that…

The new feature in WP Rocket 3.16 for optimizing LCP critical images in the viewport is automatic. WP Rocket recommends using the Removed Unused CSS option in its plugin setting to enable the whole process to work by default, faster, and automatically.

Here is the Remove Unused CSS setting

However, if, for whatever reason, you can’t activate or use the Removed Unused CSS feature in the plugin, WP Rocket says you should mind the following points:

Though the WP Rocket Optimize Critical Images function works automatically, it requires basic requirements to function properly out of the box. 

• Your web server, security plugin, and/or firewall features must allow AJAX requests to be listed from the front end and wp-admin/admin-ajax.php.
• A list of WP Rocket IP addresses on this page must be allowed on your server and web security features. 
• If combined with Removed Unused CSS, ensure the exact requirement found on this page is reached. 

If your web server meets these conditions, you don’t need to do anything. WP Rocket works smoothly on most web hosts except those that restrict the running of third-party cache and performance plugins. 

Nevertheless, you will be notified if the WP Rocket Optimize Critical Images features can not run on your server. 

In this case, you might need to consult your web hosts for a possible solution or migrate to a better host like Cloudways. 

I was using WP Rocket version 3.15 when the updates came. After the updates to 3.16, I received this notification signifying the optimized critical images feature has been applied and completed.

However, you need to know a few things about how WP Rocket optimizes critical LCP elements and how they work or react on your website. 

As the name says, the feature only acts on high-priority “images” above the fold, not optimizing other LCP resources like text blocks. By default, the option only preloads the LCP elements if the asset is an image file. 

If you have other content types above the fold area and need to prioritize fetching for such, WP Rocket has helpful documentation on improving LCP that might help.

Putting WP Rocket Optimize Critical Images to Test

This website has benefited immensely from using WP Rocket, so the addition of automatic optimization of LCP elements like images makes it even sweeter. 

I have written several articles on WP Rocket performance and speed optimization, sharing my experience using this site’s plugin. You can find those articles to learn more about the plugin’s potential impact on your website.

So, I will unlikely see a noticeable performance improvement even after updating to WP Rocket 3.16 because most pages are already blazing fast and pass Google Core Web Vitals metrics. 

But, in your case, if you have poor website pages that need to be optimized for LCP and other CWV metrics, especially if images are mostly the culprit. Then, you should follow the WP Rocket setting discussed on this page. 

After applying the settings, test any web page that is poor or needs improvement in LCP metrics. Here is how my homepage measures both on mobile and desktop after updating to the 3.16 version of the WP Rocket plugin. 

Mobile Page Speed Insight result.

Desktop Result for LCP – Page Speed Insight test Result. 

Still, if you want to know if the WP Rocket optimizes critical image feature is working on your site, regardless of your LCP score from any testing tool – follow these recommendations. 

Load the page in a web browser. After it completely loads, right-click on your computer mouse and select “view page source” from the options. This will load the page’s HTML source code in another open tab. 

Press CTRL + F on your keyboard on a Chrome browser, and type fetchpriority="high" in the search box. If this attribute is set for the LCP image on the page, the images have been preloaded, and the fetch priority is set to high, excluding the image from being lazy loaded. 

The WP Rocket “Optimize Critical Image” feature works on your sites as expected. 

Here is my website homepage source code containing the fetchpriority="high" attribute tag for the Largest Contentful Paint element, an eBook cover image. 

You can do this for every image you want to know if WP Rocket’s critical image optimization feature works.  

Conclusion.

WP Rocket has been a fantastic WordPress cache plugin for years. 

However, the plugin has evolved beyond cache; it has incorporated other optimization mechanisms such as file optimization, database cleanup, heartbeat control, and CDN integration with RockteCDN, Cloudflare CDN, and others. 

With the LCP Critical Images optimization updates in version 3.16, WP Rocket has again proven it is the number one WordPress cache, speed, and performance plugin. 

If you haven’t tried WP Rocket, why not do so now? Let me know if you need help getting a part of the plugin to work for your blog.