Optimize More! - Images

More configurable.

Lazy loading css background images requires some effort from your end. Add an extra lazyload class to each container which has css background image in your favorite page editor. Or, simply put (one of) the container class in the include list field, the plugin will automatically add an extra lazyload class to the container.

This actually a good practice to add extra performance boost to your WordPress site. On WordPress single post and WooCommerce single product pages, featured images usually appear on above the fold section, so it's better to preload them to avoid render blocking issues, just like any assets which required in above the fold section. We can adapt this single post and single product behaviour in pages too. Set your hero / above the fold images as featured images to programatically, and automatically, preload them on all pages.

It calls images set as featured image in the native WordPress post/pages, using get_post_thumbnail_id() and wp_get_attachment_image_src(). Make sure you already adds them. If you are using Elementor or other Page's builders, simply edit the pages with the native WordPress editor to set the featured image.

By default, this plugin will be grab the url and preload the full image size and woocommerce_single for WooCommerce single product pages. You can change that using filter if your theme is uses different image size. See example below.

Here are some examples: add_filter( 'preload_featured_images_image_size', function( $image_size, $post ) { if ( is_singular( 'post' ) ) { return 'large'; } elseif ( is_singular( 'product' ) ) { return 'full'; } else { return $image_size; } }, 10, 2 );

Example if you want to include svg to your image CDN: add_filter( 'opm_cdn_file_types', function($opm_cdn_file_types) { return $opm_cdn_file_types . '|svg'; } ); Example if you want to completely change the default file types: add_filter( 'opm_cdn_file_types', function($opm_cdn_file_types) { return 'png|webp|svg'; } );

This depends on you theme or overal site's setup and how you upload your images. If it fails to grab the width and height of your images, you can specify the default image width and height fallback values that best suit your website situation in the provided fields.