Optimize More! – Images

FAQ

Why using Lozad.js?

Lozad.js is a highly performant lazyload library, written by Apoorv Saxena in pure JS with no dependencies.

How to enable lazy loading CSS background images

To be safe, lazy loading css background image will not run automatically, so it requires some effort from your end. You just need to add extra “lazyload” class to each container which has background image in your favorite page editor, or simply put (one of) the container class/id in the include list field, it will automatically add an extra “lazyload” class to the container.

Why is there preload featured image feature?

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.

Preload featured images not working?

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.

Add Missing Image Dimensions not working?

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, it should still put the width and height attributes with empty values (in most case, this will prevent us from having Missing Image Dimensions warning in Google Page’s Speed Insights.