Images are an essential element in all websites. It is always best if you have them to present your website smartly, at the same time, you have to make sure your site loads faster. It’s a challenge for all websites in the world. In this critical situation, you must find an alternative way to load your images that does not affect page load time. Lazy loading can be a great help in this case. Today, we will learn how to lazy load images on WordPress sites.
Your website speed matters to your visitors. No one likes to enter a site that takes too long to load. Study says that a one-second delay in page response can result in a 7% reduction in conversions (r-1). Lazy loading images is one of the most useful optimization technique that helps immensely to load your WordPress site faster.
What is Lazy Loading?
Lazy loading is an image optimization technique that loads the images on the viewport and delays downloading and rendering images that are below the fold. In this system, the web browser builds the web page DOM without downloading and preloading videos on the page. The images and videos are only visible when the visitor scrolls down to them.
How Lazy Loading Works
You literally don’t need any images that you don’t see. What’s the point of loading them all at once? Lazy loading stops loading the images your visitors are not on. Lazy loading is like preloading images & videos as they appear on the viewport while delaying the rest. This is how actually lazy loading works.
How to Lazy Loading Images on WordPress Sites?
Enabling lazy loading on a WordPress site is easy. You just need to install a plugin to do this. For this tutorial, we will use a3 Lazy Load. It’s a lightweight and easy to setup plugin. You don’t have to go through a lot of steps to start lazy loading. Let’s get started.
Step 1: Install & Activate a3 Lazy Load WordPress Plugin
First of all, you need to install the a3 Lazy Load WordPress plugin. You can go to Dahsboard>Plugins>Add New, then search a3 Lazy load plugins and click install.
Once you have installed the plugin, you need to activate the a3 Lazy Load plugin to make it work. You just have to hit the activate button. And, you are done.
Step 2: Decide What Images to Lazy Load
You can decide which images and where to enable lazy load. By default, all options will be open. You can close them one by one.
Step 3: Exclude Images from Lazy Loading
If you want some images to be excluded from lazy loading, you can also do that. Enter image class names in the “Skip Images Classes” box or if the image has no class name by adding the exclusion skip-lazy class name or data-skip-lazy attribute to the image. Examples, by class <img class=”skip-lazy”> , by attribute <img data-skip-lazy>. If you want more than one images to be excluded, separate class names by commas
Step 4: Lazy Load Videos and Iframes
This plugin also lets you lazy load video and iframes. By default, this option is on. You can decide to turn this off in the settings. There’s an option to exclude specific items from the lazy loading. Lazy loading does not work for shortcodes.
Apart from these, you can tweak many other options given inside this plugin’s settings. Lazy loading starts working just after installing and activating the plugin. Tweaking the available options is just up to you.
Some Free WordPress Lazy Load Plugins
These are some of the widely used free WordPress lazy load plugins available on the WordPress plugin directory.
Want to check your website’s loading speed?
Read our article to know 7 best online tools to check website speed for free.
When it comes to loading your web page faster, every byte counts. As images make up most of a website’s weight, loading all your web page’s images at a time affects the load time severely. And, when you can barely imagine websites without images. Unless you manage them wisely and find a way like lazy loading to serve them that helps you load the website faster, your site is in danger.