How to Lazy Load WordPress Images and Videos to Speed Up Your Site?

No one likes a slow website and to wait for loading your content. Statistics show that visitors tend to leave a website if it takes more than 2-3 seconds to load a site. Speed is critical, especially when it comes to great user-experience and Search Engine Optimisation (SEO).

Images in the content constitute a significant portion of web content and take the most time to load, resulting in slow page load times. That is why optimizing your images and media contents are very crucial. Compressing the images is the first step but it is not sufficient. The images used on your posts increase the total file size of your site and will affect your site performance.

The users visiting your site have to wait for all the files to download, including the images, videos or comments that aren’t initially visible, before viewing the web page. This creates a bad user experience and visitors tend to leave your site.

So what is the solution to tackle such a scenario to keep impatient visitors on your site from leaving your site before your content has fully loaded?

The simple solution is lazy loading. With lazy loading, you can load images and videos only when a user scrolls down to that specific image or video.

In this post, we’ll cover what is lazy loading & how it works, benefits of lazy loading images in WordPress and steps to easily implement lazy load images in WordPress to speed up your site.

What is lazy loading and how it works?

Lazy loading is an optimization technique to load images & videos on your website asynchronously. In simple words, loading images and other content on your web page at different times.

Lazy loading works by loading the specific resources (images, videos, etc) when the user scrolls down to that particular resource. It delays the loading of other elements until the user starts scrolling down the page.

As a result, the resources are not downloaded until they are needed.

Benefits of Lazy Loading Images in WordPress

Lazy loading seems interesting but this question might come to your mind, why should I use it?

The answer is simple. It improves your page speed and loads your webpage faster.

Let me explain how lazy loading improves your site performance.

Images and videos have become an integral part of the web’s content. These resources take the most time to load on your website. The biggest drawback they bring is – each element increases your page load time.

Lazy loading images and videos is a one-stop solution to lower initial web page load time without affecting the text content. Lazy loading kicks in when a visitor reaches your images s they scroll down your web page. So, if they never reach the images or videos, they don’t need to load them. This saves a lot of users bandwidth because they don’t have to download all your images or videos.

Thus, lazy loading optimized images and videos, improve your site load speed drastically. As Google recommends the site to load within 2-3 seconds, lazy loading will have great impact on your Search Engine Optimization and ranking. In addition, it creates a better user experience for your visitors.

How to lazy load WordPress Images and Videos?

In most of the premium WordPress themes, the theme author includes this feature. But if you are using a free theme or theme that you are using doesn’t include lazy load features, the simplest way to lazy load WordPress images and videos is to use a plugin.

There are many free WordPress plugins available in the WordPress repository to Lazy Load images. Here are few notable lazy load WordPress plugins that offer a wide range of features and flexibility.

If you are not sure how to install a WordPress plugin, you can refer to this step by step guide on How to install WordPress Plugins Easily?

Plugins to Use for Lazy Load Images and Videos in WordPress

#1. Lazy Load Optimizer

Lazy Load Optimizer is a popular free plugin which can lazy load images and iframes to improve your site page speed. The plugin uses lazysizes, a popular high performance, and SEO friendly lazy loader, to lazy load images on images of posts, pages, categories, tags, widgets, custom post types, etc.

The WooCommerce compatibility makes it popular choice if you own an eCommerce store. It can lazy load product and product category images. In addition to this, it improves Google PageSpeed Insights results by fixing the error “defer offscreen images“.

Did I forgot to mention, it is extremely lightweight and fast?

As soon as you install and activate the plugin, it implements the lazy load for images and iframes with default settings. You can tweak the default settings and configure the plugin as per your needs.

You can access the settings from Dashboard > Settings > Lazy Load Optimizer. The General tab includes the basic settings for this plugin whereas, within the Exceptions settings tab, you can exclude any sections from lazy loading by adding CSS classes or web page URI or selecting different post types.

Lazy Load Optimizer plugin Settings

Within Customizer Lazy Loading Settings ( via Dashboard > Appearance > Customize > Lazy Load Settings ), you can enable/disable spinner, add animation time and enable/disable Fade-in animation.

Lazy Load Optimizer plugin Customizer Settings

#2. Lazy Load by WP Rocket

Lazy Load by WP Rocket is another alternative plugin to lazy load images and iframes. The plugin works on all kinds of images in post content and thumbnails including widget text, avatar, smilies, and iframes.

It also includes the settings for lazy load videos (especially YouTube videos) and even replaces them by preview thumbnail. This mechanism reduces HTTP requests and improves site loading time. It is light-weight and doesn’t use any JavaScript library such as jQuery.

The plugin is simple to configure. You can configure the settings within the plugin from Dashboard > Settings > Lazy Load.

Lazy Load by WP Rocket Settings

#3. a3 Lazy Load

a3 Lazy Load is the most popular and downloaded lazy load WordPress plugin with over 100k+ active installation. This plugin claims to work best in spite of heavy content on your site with better performance.

Unlike other plugins, this plugin is packed with tons of advance lazy load features and offers great extent of flexibility.

You can customize the settings for this plugin under Dashboard > Settings > a3 Lazy Load.

a3 Lazy Load General Settings

Within the settings, you can enable lazy load of images in specific sections such as images in content, widgets, post thumbnails, Gravatars and even skip some images by defining CSS classes.

a3 Lazy Load Images Settings

This plugin is not just limited to images lazy loading. It also supports lazy loading for videos and iframes.

a3 Lazy Load Videos and iframes Settings

The plugin also offers the flexibility to exclude by URIs and different page types.

a3 Lazy Load Exclude Settings

Last but not least, the plugin provides the flexibility to optimize the script, spinner loading effect, loading background color and field to define the image load threshold.

a3 Lazy Load Additional Settings

#4. Smush

Smush is the most popular image compression and optimization WordPress plugin with 1+ million active installations and 5-star rating. We have been using this plugin to optimize the images. You can configure the setting from your Dashboard > Smush > Settings.

In addition to image optimization, the plugin also includes a feature to lazy load different media types such as JPEG, PNG, GIF, and SVG. The lazy load feature works across all images and the plugin provides an additional feature to select the output location. Within the plugin, you can lazy load images on content, widgets, post thumbnails, and Gravatar.

Smush Media Type and Output Locations Settings

You can also choose an animation type and set the animation duration.

Smush Display & Animation Settings

If you don’t want lazy loading on specific posts type, you can turn them off or add their URLs. You can also define Classes & IDs if you just want to exclude specific images.

Smush Include and Exclude Settings

Once you have applied the changes and visit your site, your site will start lazy loading your images and videos.

In addition to lazy load WordPress images and videos, you can also lazy load comments to speed up your site. Comments section sits below the post content at the bottom and it is not necessary to load them initially. Lazy loading comments can eliminate page size and external HTTP requests (in case you are using third-party comment plugin like Facebook or Disqus) and speed up your web page loading speed.

How to lazy load WordPress comments?

Lazy Loading WordPress comments is quite easy as the above process with plugins. You have to choose the plugin depending on what type of comments you’re using on your site.

There are different plugins available for lazy loading WordPress comments, Disqus comments, and Facebook comments.

Thankfully, the developer Joel James has created three different plugins that you can use depending on the comments you are using.

The process to configure is simple and shares the common interface as it is developed by the same developer. Here I’ll show you how to configure Lazy Load for Comments plugin.

Once you install and activate Lazy Load for Comments plugin, go to Settings > Discussion and scroll down till you see Lazy Load Comments option.

Lazy Load for Comments Settings

Now, you can configure how you want your comments to load on your site.

  • On Scroll: The comments will lazy load automatically when the user scrolls down to the comment section. It doesn’t require any manual action from the user.
  • On Click: If you select this option, your comments will only load after the user clicks on the “Load Comments” button. It requires manual action to see the comments.

Choose the option you prefer and save the settings. Now your comments will lazy load. Here’s a preview of how it looks if you select the On Click option:

Lazy Load for Comments on Click Settings

Final Thoughts

I hope you understand what is lazy loading, how it works and the major benefits of using on your site. Lazy Loading technique is used by most of the web content created to speed up their site load time and enhance user experience.

Using the plugin, lazy load WordPress images, videos, and comments is the simplest approach. With plenty of free plugins available to achieve this, you can go with anyone of the plugins mentioned above.

So, are you using lazy loading on your site? Do let us know in the comments section.

Leave a Reply