How to Enable Lazy Load to Defer Offscreen Images in WordPress

Lazy Loading images refers to waiting for images to load until they are needed, rather than loading all of them in advance. Deferring images will reduce the amount of resources needed to perform the initial page load.

Deferring or lazy-loading the offscreen images require special setup. In static html pages, you could do it simply by adding a tiny JS file name lazysizes and making a few more tweaks.

lazysizes will intelligently load images as the user scrolls through the page and prioritize the images that the user is going to encounter soon.

Katie Hempenius

Benefits of Lazy-Loading Images

Images are great and essential element to design a webpage but most of the cases, images play the vital role to make a page heavier in size and requests.

Content breakdown by MIME type
Content breakdown by MIME type (First View)

If you pay a deep look into the graph above, you can see about 46.2% of total requests and 49% of total page size is causing of images.

Let’s see what will happen during initial page load if we deffer those offscreen images. It will

  • Reduce the number of requests
  • Reduce the page sizes
  • Reduce the time to first byte or TTFB
  • Increase FCP or First Contentful Paint (Very important for mobile PageSpeed)
  • Make the page rendering 10-50x faster than before. (Approx.)

How to Defer Offscreen Images in WordPress

There are several plugins which can be used to implement lazyloading to defer offscreen images. Here, I am going to show you how to configure a3 Lazy Load, one of the most powerful image lazy loading plugins for WordPress. You can lazyload videos and iFrames as well with this awesome little plugin.

Steps to defer offscreen images in WordPress with plugin:

  1. Download a3 Lazy Load WordPress Plugin
  2. Install and Activate the plugin.
  3. Go to WordPress Settings menu
  4. Click on the a3 Lazy Load menu
  5. Turn on Lazy Load and other preferred settings according to your need.

That’s all you need to do to defer offscreen images in your WordPress website.

Conclusion

Deferring offscreen images has many benefits when it comes to performance optimization. a3 Lazy Load is compatible with any WordPress themes and plugins that follows the WordPress Codex.

However, if your website don’t work as expected with this, consider trying another plugin or contact professional service providers like WPBunny. Comment your feedback below, we will reply.

Leave a Reply

Your email address will not be published. Required fields are marked *