Exclusions from Optimizing or Lazy Loading

Optimole is a versatile tool used for optimizing images. However, there might be cases when you want to exclude images from optimization or lazyloading. Such cases typically involve logos, sliders, galleries, navigation icons, etc. To achieve this, you can utilize Optimole's Exclusions integrated service or, alternatively, a dedicated filter.

🔌 Enable the Feature

To enable this feature, navigate to WP Dashboard > Optimole.

1: Open the Settings tab.

2: Expand the Advanced accordion and open the Exclusion panel.

3: Use the optimizing/lazyload exclusion types to add filters.

🚀 User Site and Image Impact

As mentioned in the feature's description, the use of exclusions allows you to prevent the optimization or lazy loading of images that are essential for your website.

In the below example, we have implemented two types of exclusions: one to exclude SVG files from optimization (which means that Optimole will no longer lazyload them as well) and another to exclude images with names containing the words "neve-recipes-06" from lazy loading:

Optimization Exclusion - extension

As a result, the PNG image will no longer have the same URL structure (as it's excluded from optimization), and as a consequence, the lazy loading parameter is also set to false, whereas the JPG image has the basic optimized URL structure, and the lazy loading is also true.

Lazy Loading Exclusion - filename

In the below example, following the lazy loading exclusion that we previously set, based on the filename containing certain words, the first JPG image is optimized and also lazily loaded (data-opt-lazy-loaded="true"), whereas the second one is optimized but not lazily loaded.

📝 Note: Exclusions can be configured based on Image extension, Image filename, Page URL, and Image class.

Lazy Loading Exclusion - class

Another way to exclude images from lazy loading (and even from optimizing) is by using CSS classes.

To do this, navigate to the post/page where there are images that you want to exclude from lazy loading, select them, expand the Advanced accordion, and insert a CSS class name:

After this, go back to Optimole's settings > Advanced > Exclusions and insert the corresponding condition. In our case, is Image class contains class-not-lazy-load:

Click on Add filter, then on Save changes, and go check the image.

As a result, our image that had the class-not-lazy-load class had the data-opt-lazy-loaded set to false.

Lazy Loading Exclusion - Page URL

Apart from the above exclusion types, you can also choose to exclude an entire page from lazy loading/optimizing, and it can be done in two ways: Page URL contains (in this case, you can add a word or more), and Page URL matches (in this case, you have to paste the entire URL or the path of a certain page, slashed at both ends - /959b8-about/).

🔄 Benefits and Trade-offs

Benefits

Avoid compatibility issues - this feature can help you fix some compatibility problems with some themes or plugins or even compatibility issues between some images and optimization techniques/lazy loading scripts.
Increased performance - excluding certain images can lead to faster page load times, as these images won't be optimized or lazy loaded.
Customized experience - exclusions allow you to decide how the optimization process functions to suit your needs.

Trade-offs

Increased bandwidth usage - images that aren't optimized may consume more bandwidth when loading.
Slower page load - excluding lazy loading for images can result in slower initial page load times, especially if there are multiple images on a page.
Maintenance issues - using exclusions requires you to keep track of the excluded images.

🧩 Use Cases

The feature can be very advantageous for multiple use cases, such as:

Critical Images - Images that are fundamental to the functionality or aesthetics of your website, such as logos or header images, should be excluded. Ensuring these images load immediately enhances the overall user experience.
Interactive Elements - Images used within interactive elements like image sliders, carousels, or lightboxes may need to load instantly to provide seamless user interaction. Delayed loading can disrupt the intended user experience.
Advertisement Banners - Ad banners that need to be displayed without delay to generate revenue or promote important content should be excluded from lazy loading to ensure they are visible to users as soon as they access the page.
Fixed Backgrounds - Images set as fixed backgrounds in certain sections of your website often need to load instantly to maintain the intended design, especially during scrolling.

Bypass Lazy Load for First Images - doc

🗂Useful Resources

You may find useful these guides:

Exclusion Filter

Apart from using the in-built feature, we provide an optimization exclusion filter, which implies exclusion from lazy-loading as well. You can copy and paste this code snippet into the plugin's file or, better, into the child theme's functions.php file and replace the sample URL with the one you need:

add_filter('optml_dont_replace_url', function( $old, $url ) {
     if ( $url === 'https://example.com/wp-content/uploads/2018/09/1.jpg' ) {         
         return true;    
     }    
     return $old;  
}, 10, 2);

Still looking for an answer? Contact us!

Enable the Feature	User Site and Image Impact
Related Settings	Use Cases
Benefits and Trade-offs
Useful Resources
🎥 Video - Exclusions From Optimizing or Lazy-loading in Optimole