How to implement WordPress lazy load on images and videos
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. We will introduce you to Lazy Load in WordPress as a way to achieve this, with a focus on images and videos.
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 to make your images and videos 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
- Importance of Lazy Loading
- Implementing Lazy Load
- Implementing with A3 Lazy Load
- Other Great Plugins for Enabling Lazy Load
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 to improve 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 resources for the loading of media that they might not need eventually.
Lazy loading 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 in WordPress
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 is complete, 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 on 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 the 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 a 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
Lazy load can lazy load images, videos and iframes. It also 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 also 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 also lets you:
-
-
- Disable lazy load for Youtube as well as Vimeo videos.
- Display Youtube and Vimeo video titles.
- Add 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 rather 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 certainly 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 surely help you optimize your site speed to make it lightning fast. Learn more about our Speed Optimization Service.
More Resources:
