How To Use Lazy Load Effect On Images In WordPress

Your average web page weight is 3719 kB. 78% if this weight is made up of images and videos according to HTTP Archive. This is a lot of bytes for an average browser to download and process. Using images and videos has trended for a while now and many websites will increase their use in the future to cut through the competition and stay ahead. When it comes to sharing media and incorporating media files to a website design nothing beats WordPress. It makes it easy to integrate images and videos into posts, pages, and into the theme background. Unfortunately, these heavy resources make web pages download costs your user experience. They have to wait for large files to download including invisible so that they can view the page. Too simply and speed up the process you need WordPress lazy load. 

What is Lazy Loading?

Lazy loading refers to an optimization technique used to load visible content while delaying downloads appearing below the fold. This technique is highly favored by Google and should be considered when posting posts as pages with embedded videos and high-resolution images.

How it Works 

  • The web page DOM is built by the browser without downloading images and preloading videos
  • To determine which images to download and which videos to preload, you will rely on JavaScript. This will be based on the content that is initially visible when the page loads. 
  • Added videos downloads and rendering are delayed until the visitor scrolls down the page and additional content comes into view

The results are that images won’t be downloaded or videos loaded until they are needed. This improves the web's performance in terms of speed, especially when using high-resolution images and embedded videos. 

Like many other website performance problems, WordPress lazy load has a plugin to fix the problem. Many plugins can help you with your WordPress lazy load of images and videos. However, very few meet their expectations. 

Improving Page Load Speed with Lazy Loading Plugins

Four plugins are trusted to speed up the delivery of a web page and these include BJ Lazy Load, Lazy Load XT, a3 Lazy Load, and Lazy Load. Let’s explore them to see how they perform. To get the right results when testing these plugins, ensure that you have tested the speed before and after installing them.

Improve WordPress speed with BJ Lazy Load

BJ Lazy Load is among popular plugins used for lazy load. It has more than 70,000 WordPress websites actively using it. It has a total of 60 reviews with an average rating of 4.1 out of 5 stars.

Installing and setting up this plugin on your WordPress website is a breeze. All you need to do is find the plugin using the built-in WordPress plugin installer, install it, and activate it. 

When the plugin is activated, a new menu item will be added to Settings > BJ Lazy Load. By default, all lazy loading options are selected. You need to leave these settings alone unless you encounter technical issues on the front end of your website when the plugin is activated. One unique option that this plugin has and is not found in other similar plugins is its ability to add a URL for an image. This is used as a placeholder for lazy-loaded images and videos before image and video resources are downloaded. Using this option requires a small file and no high-resolution image. 

I would recommend creating the same solid color image as that of your site’s background if you want to achieve the lightest possible footprint and seamless results and save it in png format.

The plugin also allows you to specify an HTML class that will be excluded from lazy loading. This allows you to apply that class to any images or videos you want to exclude in the lazy load. The last thing is to specify the closest an image or video gets to the viewport before downloading. You can now go ahead and test the speed load. It will surprise you to see that the page loads extremely fast, while the size of the page has increased. What causes this? Theoretically, when a lazy load is activated, the pages are supposed to decrease since few images are downloaded with the initial page load.

How Does WordPress Serve Up Images?

By default, WordPress presents a range of file sizes to the browser using the srcset attribute of the IMG element used to embed the image. The smallest version of the WordPress image is then selected by the browser using a list of available sizes. This means that WordPress will automatically offer several smaller versions of that image to your visitors even when you upload a large file. Based on the amount of pixel space available for the image to occupy, the browser will grab the smallest suitable image and fit it there. 

How Does BJ Lazy Load Change WordPress Behavior?

The default WordPress behavior is overridden by BJ Lazy Load and the srcset attribute is replaced with a data-lazy-srcset attribute. This attribute works in conjunction with the plugin scripting. This leads to the full resolution image being downloaded and rendered, instead of the reduced version. This may not be ideal, therefore you need to optimize before uploading them to WordPress and you won’t see the same issue again. 

Final Words 

To ensure that your visitors have a pleasant experience when interacting with your website, you need to improve on your website’s loading speed. At the same time images play a great role in breaking text monotony. Therefore you need to optimize your images or use the lazy load to help improve your web page loading speed.