Optimize critical images

The Optimize critical images feature 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.

To make sure the whole process happens as automatic and as fast as possible, use the Remove Unused CSS option.

The optimized images are part of the Priority Elements of WP Rocket.

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, and:

Additionally, this option will automatically detect the other images above the fold, 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:

    load delay phase of the lcp

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 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 wpr-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-wpr-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

As shown in this image:

script in the source code

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

Preload and fetchpriority

Once the optimization is completed for a page, the wpr-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.

Manual clearing of critical images

When you make manual changes to the CSS and images of your pages, you should manually clear the critical images via the WP Rocket toolbar menu.

To clear the images of all your site, from the top menu you can click on the button called Clear Priority Elements.

clear priority elements button

For specific pages, when visiting the URL while being logged-in, you can clear the specific images by clicking on the Clear Priority Elements of this URL button.

clear priority elements of this url button

Note: This action will clear the critical images, and all the other Priority Elements.

Videos and iframes

  • The feature will optimize images coming from the Replace YouTube iframe with preview image option.
  • In case the LCP element is the image inside of a poster attribute in a video tag, WP Rocket can preload it. However, given that the video tag doesn’t support it, it won’t use the fetchpriority="high" attribute. And, since the poster image is not an isolated image element, it won’t be lazyloaded, thus it won’t be excluded from lazyloading.
  • If their markup allows it, facade images for iframes, such as maps, will be optimized too.

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', 999 );

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 images are not optimized

    If the wpr-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 images from its own LazyLoad feature, and it should also remove the attribute loading="lazy" when it is added early in the page processing.

    However, if images are Lazyloaded dynamically, i.e. later in the rendering process, when the  Critical Image Optimization has already been run, images may still be Lazyloaded.

    In this case, you should disable all other third-party Lazyloading features.

Technical notes

  • The data collected by this feature 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.
  • You can find more technical details here.

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.