Optimize critical images

WP Rocket 3.16 introduces a feature called Optimize critical images, which automatically optimizes the above the fold images of the page, so that they can be rendered faster.

This optimization is automatically enabled upon WP Rocket activation, therefore, it doesn't have any option or button in the settings page.

Heads up! The process of optimizing the images is automatic but not immediate, it's asynchronous.

In this article, you can find more information about how this feature works, how to check if it's working, how to fix common issues, and other relevant information.

Feature overview

The Optimize critical images feature automatically detects the Largest Contentful Paint (LCP) image of a page. The LCP image will be preloaded, the fetchpriority="high" attribute will be set, and the image will be excluded from the LazyLoad too.

Additionally, this option will automatically detect all the above the fold images, and it will exclude them from the LazyLoad too.

Different images for mobile and desktop

To provide an accurate optimization of the content, the mobile and desktop versions of a page will be processed independently. This means that any mobile-specific and desktop-specific images will be optimized accordingly.

This behavior depends on the Mobile Cache option which creates a mobile-specific version of the cache by default. Therefore, the Mobile Cache option, and its mobile-specific behavior should not be deactivated.

Asynchronous approach

The Optimize critical images option works asynchronously this way:

• A script needs to be injected to the page to optimize.
• When this script is executed with a visit, it will detect critical images and send them back to WP Rocket.
• WP Rocket will add the optimized markup on the next time the page is cached.

Other types of LCP elements

The Optimize critical images option will only preload the LCP element if it's an image.

However, it can't optimize other types of LCP elements such as text nodes ( div, section, etc.). To optimize those other types of LCP elements, please check the general guide about Largest Contentful Paint.

Feature benefits

With the Optimize critical images option, the browser will be informed about the important images that need to be loaded and rendered with priority.

Also, this feature will exclude the critical images from the LazyLoad to ensure they are loaded faster instead of being delayed.

Benefits for PageSpeed/Lighthouse

• With the Optimize critical images option, the Preload largest contentful paint image audit should be addressed.
• The Largest Contentful Paint image was lazily loaded audit should be resolved. This is unless your images are being lazyloaded by third party.
• This feature should also help to improve the Largest Contentful Paint metric of PageSpeed. Specifically, the Load Delay phase will be improved:
  

  

Note! You still need to optimize the LCP element as per the Serve images in next-gen formats audit, and following the additional instructions found here.

How to use the Optimize critical images feature

The Optimize critical images option is activated by default, but to make sure the whole process happens automatically and as fast as possible, it's recommended to use the Remove Unused CSS option.

If you can't activate the Remove Unused CSS feature, you should mind the following points:

1. For the script to be executed, and the process of detecting and retrieving data is successful, the type of visit made to the page needs to provide enough information about the images within the browser viewport.
   
   This type of valid visit happens when:
   
   
   • A real user visits the page with a browser within the required dimensions.
   • The page is processed by the Remove Unused CSS SaaS during Used CSS generation.
   • Or, if the Remove Unused CSS option is not active, a pre-warmup process will happen to execute the script for 10 of your site's pages.
2. After the script is executed and the process of detecting the images is completed, the cache needs to be cleared manually or automatically.
   
   After the cache is cleared at this point, the optimizations for the critical images should finally be applied to the page.

Basic requirements

These are the basic requirements for the feature to work:

1. Your server, firewall, and/or security plugin has to allow-list AJAX requests coming from the frontend and wp-admin/admin-ajax.php.
2. The IPs found in this list should be allowed in the server, firewall, and/or security plugin.
3. When used along with the Remove Unused CSS option (recommended), the same Remove Unused CSS's basic requirements should be met.

If WP Rocket can't access your site, the following admin notice will be displayed:

It seems a security plugin or the server's firewall prevents WP Rocket from accessing the SaaS features. IPs listed here in our documentation should be added to your allowlists:

- In the security plugin, if you are using one
- In the server's firewall. Your host can help you with this

Pre-warmup

To partially speed up the processing of pages, the Optimize critical images option can use a pre-warmup system, which works as follows:

• The first 10 URLs found in the mobile homepage will be sent to WP Rocket's Optimize critical images SaaS. The rest of the pages will be processed as they are visited.
• The SaaS will open those links using real browser and the data will be generated by the script.
• SaaS will visit the URLs with ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 query string added. The Add missing image dimensions option is applied to that query string, and this is required for WP Rocket to scan the images with the proper size.

Pre-warmup will not happen when:

• Remove Unused CSS is enabled, because the URLs visited by the Used CSS generation SaaS will trigger the script, and generate the data automatically.
• The access to the ?wpr_imagedimensions=1&nowprocket=1&no_optimize=1 query string is blocked.
  
• The WP_ENVIRONMENT_TYPE constant is set to local.
• The license is expired for more than 15 days.

How to check if Optimize critical images is working

You can check if the images of a page are optimized by the Optimize critical images feature by checking the changes in the source code of the page.

Presence of the feature script

As a first part of the process, a script called lcp-beacon.min.js will be added to the page.

In the source code of the page, the script can be found with following markup:

<script data-name="wpr-lcp-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script>

As shown in this image:

If a page contains the script, it means the optimization has started.

Preload and fetchpriority

Once the optimization is completed for a page, the lcp-beacon.min.js will be removed, the LCP image will be preloaded, and it will use the fetchpriority="high" attribute.

So, for this type of markup of the original images:

<img href="image.jpg" class="image-class" alt="image title">

WP Rocket will:

• Create a <link> tag inside the <head>, with a rel="preload" attribute.
• Set the fetchpriority="high" attribute:
• To the <link> tag.
• To the original image element, only if it uses an <img> tag.
• Add the data-rocket-preload attribute to identify WP Rocket as its originator.

Therefore, the resulting <link> tag will be added with the following markup:

<link rel="preload" data-rocket-preload as="image" href="image.jpg" fetchpriority="high">

Depending on the type of markup an image uses, the resulting <link> tag will have some differences, as shown below:

• When using <picture> tags, each one of the images in the <source> tags will have their own <link rel="preload" > tag.
• In the <link rel="preload" > tag of responsive images, the srcset attribute will become imagesrcset, and the sizes attribute will become imagesizes.
• There will be a <link rel="preload" > tag for each one of the images set in the url property of the layered backgrounds.

Exclusion from LazyLoad

Also, when the optimization of a page is done, the LCP image, as well as the above the fold images, will be excluded from the LazyLoad option.

Therefore, the lazyloaded class won't be present in the markup of the original images.

Automatic clearing of critical images

The following scenarios will trigger automatic clearing of the critical images:

• When permalinks are changed, all images will be purged.
• When the theme is switched, all images will be cleared.
• When updating the post, the post-specific images will be cleared. This doesn't apply for the images in the related pages.
• When the Clear Used CSS and/or the Clear Used CSS for this URL buttons are clicked, if Remove Unused CSS is active.

Manual clearing of critical images

• Click on the button called Clear Critical Images.
• Use the Clear Used CSS button, if Remove unused CSS is active.

For specific pages, when visiting the URL while being logged-in, you can clear the specific images by:

• Clicking on the Clear Critical Images of this URL button.
• Using the Clear Used CSS of this URL option, if Remove unused CSS is active.

Videos and iframes

How to deactivate this feature

If you're having issues with this option, and you need to deactivate it, you can install and activate the following helper plugin:

📥  Download (.zip): WP Rocket | Disable Critical Images Optimization
Developers: You can find the code for this plugin on GitHub.

Alternatively, you can add to your site the following snippet:

add_filter( 'rocket_above_the_fold_optimization', '__return_false' );

Known conflicts

• Additional layers of cache that don't differentiate between device type
  
  If the site is using additional layers of cache that don't differentiate between mobile and desktop devices, this optimization may have problems when detecting the images, and applying the optimization.
  
  As a result, it's possible that the mobile-specific images appear optimized in the desktop version of the page, and the other way around.
  
  Sadly, the only known solution is to deactivate any layers of cache that don't use specific cache for device type.
• LCP images for mobile are served in desktop, or otherwise
  
  This problem can happen if the Mobile Cache option and/or its mobile-specific cache were manually deactivated (if this helper plugin is not being used).

Troubleshooting

• The script is not added
  
  When updating from previous versions to WP Rocket 3.16, the cache is not automatically cleared.
  
  For the script to be first added to a page, the cache of the whole site or specific page should be cleared.
• The images are not optimized
  
  If the lcp-beacon.min.js script was correctly added to the page, but the images are not optimized yet.
  
  The solution is to clear the cache of WP Rocket and any other cache layer(s) running on the site.
  
  If clearing the cache doesn't help, it could be that the script wasn't executed yet. In this case, make sure a visit is being made within the required dimensions.
  
• The critical images are still lazyloaded
  
  WP Rocket will exclude the images from its own LazyLoad feature. 
  
  You would need to disable all other third party lazyloading features and remove the  loading="lazy" attribute when it's being added on page.

Technical notes

• The lcp-beacon.min.js script will only collect data after a visit was made with a browser with the following dimensions:
• Mobile devices with display area smaller than 393x830.
• Desktop devices with display area bigger than 1600x700.
  
  For visits made outside of the above dimensions, WP Rocket will consider that the type of device used is too large or too small, and the script will not be executed.
• The lcp-beacon.min.js script can't be executed on headless browsers.
• The data collected by the script is stored in the wpr_above_the_fold table.
• The Action Scheduler task called rocket_job_warmup, will be created to fetch the mobile homepage and send each of the 10 URLs to the pre-warmup process.

For any other problems and questions, please contact WP Rocket's support team.