How to enable lazy load in WordPress

Are you interested in learning how to enable lazy load for images in WordPress? If so, we can help.

Lazy loading means that a given image on your website (regardless of its size or resolution) will only load if a user scrolls down and gets to it, not during the initial page loading process.

It has been around for some time now and has been adopted by a lot of high-profile websites, that use a lot of images on a single page.

In this article, we will show you how to enable lazy load with the two most popular lazy load WordPress plugins.

If you are not yet optimizing for speed – you should

It is simple – a slow-loading, sluggish website drives your visitors and customers away. There have been multiple studies on the subject the last few years. Here are a few key takeaways:

• 47% of consumers expect a web page to load in 2 seconds or less.
• 40% of people abandon a website that takes more than 3 seconds to load.
• A 1 second delay in page response can result in a 7% reduction in conversions.
• A whopping 79% of customers will not purchase again from a website that is slow to load.

The slowest loading elements of your WordPress-based website are your images. In case you have a lot of them integrated into your articles, they can have a serious impact on your overall page load time.

There are multiple approaches to optimize your images for the web so that they can load more easily. For instance, you could employ a CDN (Content Delivery Network). With a CDN, static content is cached on multiple servers over the globe. This allows for your users to load the images from a server that is much closer to them.

The downside is the fact that even if you are using a CDN service, this will not change the way a web page is loaded by the browser. All of the images on the page will be loaded at the same time. This happens both for images the users currenly sees and for those that are further down the page.

Therefore, the overall speed will be affected. The optimal solution for this is to delay their appearance with lazy load.

How does lazy load work?

When your website is opened by a user’s web browser, rather than loading all of the images at once, lazy load will download just those images that will be visible on the screen of the user. The rest of the images will be replaced with a placeholder image file.

While the user reads and scrolls down the website, all of the currently visible images will be downloaded and displayed in the viewing area of their screen.

While you can enable lazy load on your WordPress website manually, a much faster and cleaner way is to use a plugin.

How to enable lazy load with BJ Lazy Load

You have to download and enable the BJ Lazy Load WordPress plugin.

After you activate the plugin, go to the Settings » BJ Lazy Load page and configure its settings.

The lazy load functionality can be used for: content, text widgets, post thumbnails, gravatars, images, and iframes. In addition, you can also set the placeholder image by uploading your custom placeholder.

The lazy load WP plugin has one more fantastic option – you can set it to show a low-res version of a given image, instead of a placeholder. In order to make this, you just have to regenerate your image sizes. This way, low-res versions of the images you’ve uploaded will be generated.

Remember to press ‘Save Changes’, so that your custom settings are stored.

How to enable lazy load with a3 Lazy Load

The a3 Lazy Load plugin is the second most popular plugin for lazy load, just behind BJ Lazy Load. This, however, does not mean that it is somehow inferior in any way.

Once you install and active the a3 Lazy Load plugin, you will have to adjust some settings. Go to the WordPress settings menu and look for a3 Lazy Load there.

Once inside you will have the option to enable or disable lazy load completely. If enabled, you can customize which images should be lazily loaded and should lazy load be enabled for embedded videos, too.  You can also specify special CSS classes, which will be ignored by the a3 Lazy Load plugin.

If you are not sure which options you need enabled and which – disabled, our recommendation is to leave them all on. Then, check your website and see how it will affect it. This way, you will know exactly what you need to change.

Once you are ready with the configuration, click on “Save Changes” and leta3 Lazy Load do it’s magic.

Conclusion

As already stated, you should do your best to optimize the speed of your website. Starting with lazy load is a great first step. Both BJ Lazy Load and a3 Lazy Load will allow you to enable lazy load for images with just a few clicks. And no matter which plugin you choose, your visitors will notice the difference right away.

If you want to take things further and give your WordPress website even more juice, you should check our 13 tips to improve WordPress site speed.