How to Add Lazy Load to Image & Video in WordPress
Last Updated: September 8, 2020 in Guides
Images and videos contribute a lot in making your website look better along with diverse content. However, almost they have high capacity and take the most of your website capacity.
According to httparchive.com, images occupy about 45% in the website capacity, and videos do likewise about 25%. They probably slow down your website speed even when they are optimized. In that case, the Lazy Load technique will help you to solve this and improve the website speed.
What is Lazy Load?
When someone visits your website, their browser usually downloads all the site’s content then display all of them on screen. It will take a quite long time to process this if your website has a significant number of either images or videos.
Lazy Load forces the browser load one-by-one part of the page. The upper one will be loaded first, and the rest parts are loaded just when the user scrolls down the mouse to see those parts. This effect brings us a feeling that the site is loaded faster.
Technically, Lazy Load is a chain of acts as following:
- Force browser NOT to download every image/video by replacing the
srcfunction bydata-srcin all the image/video tags (<img>or<video>). - When the user goes to the section which has image/video, it allows the browser to load that image/video only by using a JavaScript library to reverse
data-srcto besrc.
This sounds easy but if you do it manually by coding, you MUST find all the src codes in all the PHP files then replace them. Each image or video will have its own tag with an src. As a result, if your website has a large number of images or videos, this manual way will cost you much time.
So, how to add Lazy Load to your images or videos in your WordPress site in the best way?
Add Lazy Load to Your WordPress Site
As I told, replacing code manually seems inconvenient and also impossible if you have a lot of images and videos on your site. You need a better way.
There are two ways: (1) use a code to auto-replace all the src to be data-src then reverse as needed; (2) use a plugin.
Actually, these two ways are the same. A plugin just is a tool to help you auto-replace the code as well. In both cases that you know nothing about coding or you are a coder, you had better use a plugin. There are many developers out there who chose to use a plugin for Lazy Load. So does my team. We usually use the Lazy Load by WP Rocket plugin. Now, I will show you how to use it.
Step 1: Install and Activate the Plugin
Lazy Load by WP Rocket is a free plugin and available on wordpress.org. You can install it directly from your dashboard.
Step 2: Configure the Plugin
After installing and activating, go to the Settings menu > Lazy Load.
You will see three options that are Images, Iframes & Videos, Replace Youtube videos by thumbnail as above. Check all the boxes to activate the Lazy Load on all the images and videos.
Finally, scroll down and press Save Changes.
So, you’ve finished all you need to add Lazy Load to your images & videos on your WordPress site. It’s quite easy for everyone.
Besides, WP Rocket has many other features to speed up your website. You can refer to this tutorial about how to use this plugin.
Final Words
There are a lot of plugins that help you to add Lazy Load to your images or videos on your site. Just consider and choose the one you want.
Besides that, if you want to optimize the UX on your site more, you may refer to add lazy load to comment, CSS, and other sections. A lot of free plugins are available for you to do it. Let’s get rocked!