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.
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.
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:
- Download a3 Lazy Load WordPress Plugin
- Install and Activate the plugin.
- Go to WordPress Settings menu
- Click on the a3 Lazy Load menu
- 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.
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.