wordpress lazy load

How to implement WordPress lazy load on images and videos

wordpress lazy load

Do you want to improve the page load speed of your WordPress site? If you are reading this article, you likely do.

 

Increasing the speed of your site will improve your site search ranking, and more importantly, improve user experience.

 

Content can make your site heavy and slow to load on browsers. Site content consists of comments, images, videos, and scripts. For this article, our focus is on images and videos, and how to make them lightweight on your web-pages. Since these are usually the larger files, optimizing them will greatly affect your site speed.

Content

 

What Lazy Load is, and how it works

Lazy load means loading content only on the visible part of a browser. It delays the download of content that appears in the lower and unseen part of the browser.  

 

With lazy loading, images and videos on your web-page will not load at the same time. The ones at the top of the web-page will download and appear. Whereas the ones below the browser’s viewing area will delay until the user scrolls down to that point on the page. As a result, images and videos will not load until the user needs it.

 

Importance of Lazy Loading

The primary purpose of Lazy Loading is improving site speed.

 

Site visitors can start using your site without having to wait for all the images and videos to load completely.

 

It makes images and videos on your website to load only when needed. This saves visitors time and resource for loading of media that they might not need eventually.

 

Lazy load also saves your site resources as you would not need to send images and videos until when needed; and not at all in a case where the user decides to exit without scrolling.

 

Implementing Lazy Load

There are several plugins for implementing Lazy Loading. First, we will show you how to enable lazy loading using one of the most popular and easy to use plugins for this purpose, a3 Lazy Load.

 

To give you options, we’ve also put together a list of 5 additional WordPress plugins for this purpose. We’ll show you how to install and use each one of them. However, take your pick and stick with one.

 

Implementing with A3 Lazy Load

a3 Lazy Load is a free WordPress plugin to lazy load images and videos. Through the plugin’s settings, it is easy to define the elements to be lazy loaded. It supports copying and pasting of video URLs into posts and pages.

This plugin is compatible with WooCommerce. 

 

From your WordPress Admin Dashboard, Install and Activate the plugin.

After Installation completes, go to Settings > a3 Lazy Load.

Next, turn on all items for which you want to enable lazy loading and save changes.

Now go ahead and load any page in your site. If you scroll quickly, you should be able to see that images and videos (and any other items you select) only start loading when you start scrolling to them.

 

And that’s it! Lazy loading is enabled.

 

Other Great Plugins for Enabling Lazy Load

1. Lazy Load Optimizer

Lazy Load Optimizer is a free WordPress lazy load plugin for images. It supports lazy loading of contents inserted from external sources into the webpage. More so, it is compatible with WooCommerce.

 

From WordPress Admin Dashboard, install and activate Lazy Load Optimizer plugin.

 

Next, go to Settings > Lazy Load Optimizer.

Enable content that you wish to lazy load on the general settings page and save changes.

 

2. Crazy Lazy

Crazy Lazy is simple and easy to use WordPress plugin for lazy load implementation. 

It performs all the basic functions expected of a lazy load plugin.

All you need to do is download, install, and activate the plugin. And it’s ready-to-use. 

 

3. Lazy Load by WP Rocket

This plugin can lazy load images, videos and iframes, and replaces YouTube videos through the use of thumbnails.

 

To use this plugin, you have to download it from “plugins” section on your WordPress Admin Dashboard. Install and activate. 

 

Next, go to Settings>Lazy Load on the Dashboard.

 

Check all the items that you want to lazy load.

Save the changes you have made.

 

 

4. Lazy Load for Videos

Lazy Load for Videos works on embedded Youtube and Vimeo videos. It lazy loads the videos when users click on the preview image. It works with WordPress Multisite and other plugins as well.

 

Download Lazy Load for Videos plugin from your WordPress Admin Dashboard. Install and Activate.

 

Go to Settings>Lazy Load for Videos on the Dashboard.

 

On the “General/Styling” page, you can customize the settings to achieve what you desire for your site.

Be sure to check the ‘’Responsive Mode” to improve responsiveness on all devices.

Then save changes that have been made.

This plugin supports other customization like:

      • Disable of lazy load for Youtube and Vimeo videos.
      • Display of Youtube and Vimeo video titles.
      • Addition of custom CSS.

 

 

5. WP YouTube Lyte

WP YouTube Lyte enables you to add lazy-loaded Youtube videos. If you wish to lazy load only videos from Youtube, this is a great solution for you. This plugin is responsive on all devices.

To use WP YouTube Lyte, you need to download, install and activate it on your site.

 

Click on Settings>WP YouTube Lyte on the Dashboard.

 

Go through all customization options on the “Main” settings page and tick as appropriate.

Be sure to enter your YouTube API key. It enables the plugin to function optimally.

Then click on “Save Changes”.

 

Conclusion


WordPress Lazy Loading is one excellent method for optimizing your site speed. By controlling the loading of images and other media, you can greatly increase your site speed and improve resource usage.

This article has shown you how to implement Lazy Load, as well as give you options of plugins to use.

However, Lazy Loading is just a one speed optimization technique. Our team of experts can help you optimize your site speed to make it lightning fast. Learn more about our Speed Optimization Service.