How to Set Up Lazy Loading in WordPress

The page loading speed of your website plays a crucial role in several ways. It helps you to get more conversions, reduce the bounce rate, get better search engine ranking, deliver a better user experience, and so on.

We published an in-depth post introducing you to the best techniques to increase the loading speed of your site. Lazy loading was one of the techniques mentioned in the post. In today’s post, you will learn more about lazy loading, why it’s important, and how to use lazy loading on your WordPress site.

Let’s get started with a short definition of lazy loading.

What is Lazy Loading?

Despite the name, lazy loading has nothing to do with laziness or sluggish behavior. Instead, it is an excellent way to improve the loading speed of your website.

Lazy loading delays the loading of some specific elements on your website. It makes these elements lazy in the sense that these are not loaded until they are visible in the browser window. They just remain in their place and don’t load unless the visitor scrolls towards them.

For instance, it is highly likely that you display the comments at the end of your blog posts. And the visitors will get to the comments section only after reading the post content. That means you don’t need to load the post content and the comments at the same time.

Lazy loading enables you to delay the loading of your comments section. The comments will only load when the visitors towards the end of the post. Doing this will improve the loading speed of the page.

How Does Lazy Loading Work?

Despite its enormous impact, the working method of lazy loading is quite simple. It works in three easy steps –

1. In the first step, the browser loads the web page without downloading any image or videos. Instead, it only loads the text for the page.
2. Next, the JavaScript code from the plugin decides which images and videos should be downloaded and loaded for the initial view.
3. Finally, as the visitor scrolls through the page, more images and videos get loaded depending on the browser viewpoint and the plugin settings.

How to Use Lazy Loading in WordPress

Like many other things in WordPress, you can add lazy loading to your website by installing a third-party plugin. While there are several lazy loading plugins for WordPress, we recommend BJ Lazy Load. It is regularly updated and works with the latest version of WordPress.

Once you install and activate the plugin, you will find its settings in the BJ Lazy Load > Settings page. you can choose to apply lazy loading to the content, text widgets, post thumbnails, gravatars, images, iframe content, and so on.

It is also possible to set up a placeholder image that will be displayed until the actual image gets loaded. You can select that image in the “Placeholder Image URL” field.

On some instances, you may want to exclude some images from the lazy loading effect. To do that, add a special class to those images. Then, provide the class name in the “Skip images with classes” field.

The “Threshold” option allows you to choose the distance between the viewport and when the element gets loaded. For instance, if you use 200, the image will get loaded with the viewport is equal to or less than 200px away from the element.

There is another option to enable a low resolution preview image before loading actual image. This can be useful if you want to display HD photos without having any impact on the page loading time.

Other Ways to Use Lazy Load

There are several other options to use lazy loading on your WordPress site. First of all, a large number of premium WordPress themes come with this feature by default. If you are creating a new site from scratch, just make sure you are choosing a theme that includes lazy loading, and you won’t have to use an additional plugin on your site.

In case you want to add lazy loading to your existing WordPress site without using a plugin, that is possible too. In that case, you need to add some additional code to the functions.php file. You will find detailed instructions in this post.

It is also possible to use other plugins to use lazy loading on your WordPress site. Some popular choices include Lazy Load by WP Rocket, a3 Lazy Load, Lazy Load, Speed Up Lazy Load, Crazy lazy, etc.

Pros and Cons of Using Lazy Loading

Using lazy loading definitely has its advantages, but there are some drawbacks as well. Let’s take a minute to check out the pros and cons of using lazy loading.

Pros

Improved Page Loading Time: The main reason why people use lazy loading is to improve the page loading time. This is especially useful for media-heavy websites that use lots of high-quality images or videos in their posts.

Improved User Experience: The improved loading speed will have a positive impact on the user experience. Visitors won’t have to wait a long time for the page to load, while lazy loading will also reduce their bandwidth usage.

Cons

Crawling and Indexing Issues: If your content doesn’t get loaded until the visitor scrolls, it can be challenging for the search engines to properly crawl and index your content. The solution is to use lazy load for image, video, and multimedia content only. Doing this will improve the page speed and let the search engines explore all the text content on the page. However, if you plan to use lazy load on the text, you can use the Fetch as Google tool to find out if it causes any problems.

Final Words

Lazy loading is an excellent technology to improve the loading speed and deliver a better user experience from your WordPress site. I hope this post helped you to understand the concept and make it clear why and how to use lazy loading on your site.

So, what do you think about lazy loading? Is it a must-have for any WordPress site? Let me know in the comments below.