What Are Lazy Loading Images and How to Implement Them on Your WordPress Website

  • By Darrel Wilson
  • Last Updated: November 2, 2019
What Are Lazy Loading Images and How to Implement Them on Your WordPress website

There is no doubt that images improve your website. From showcasing your products and past projects to helping you tell a story through your articles, images make your website more visually appealing and interesting.

However, images are also one of the main culprits for slow loading times. A website that loads slowly loses visitors, readers, customers, and revenue so finding ways to speed it up is crucial. One way to speed up your website is to optimize the images. Another way to help with page load times is by using lazy load.

In this post, I’ll explain what lazy loading is, how it helps your site, what it can be used for and show you a few different plugins that will help you implement this functionality on your site.

What is Lazy Loading

Lazy loading is a technique that keeps the browser from loading parts of a web page until they come into view. This means that when someone visits your site, the images will only load right before the visitors scroll down the page far enough to see the images.

How Lazy Loading Helps Your Site

As mentioned earlier, lazy loading helps speed up your site. The technique makes web pages smaller and requires less data to be transferred from server to browser.

What Can You Use Lazy Load For

Lazy load can be used for images and this is the typical way most websites use it. However, lazy load can also be applied to videos and comments. A popular example is Youtube. Youtube doesn’t load comments until you scroll down to see them which allows you to consume video content faster.

Another popular example of lazy load is found on Buzzfeed. This popular website uses lazy load to make their famous list articles load as fast as possible.

Lastly, lazy load is also used on websites that use infinite scroll. Infinite scroll loads more articles only when you reach the bottom of the page. You’ve probably encountered this technique on Pinterest or Pocket.

Five Best Lazy Loading Plugins for WordPress

Below, you’ll find the best lazy loading plugins for WordPress that you can start using today to speed up your website.

Lazy Load

The first plugin on the list, Lazy Load, is the most straightforward plugin out of the bunch. All you have to do is install it, activate it, and you’re good to go. The plugin uses jQuery.sonar to only load an image when it’s visible in the viewport.

BJ Lazy Load

The next plugin, BJ Lazy Load, is another popular plugin that will replace all of your images, videos, and even thumbnails with placeholders until visitors scroll down far enough to see them. This plugin is also easy to use as there is no configuration required.

a3 Lazy Load

a3 Lazy Load can be used for images as well as for videos and iframes. You can decide which elements should be lazy loaded in the plugin settings so some configuration is required to make sure you’re getting the most out of this plugin.

This plugin gives you the ability to include not only posts and pages but also widgets, gravatars, and post thumbnails. When it comes to videos and iframes, it will lazy load images in posts, pages, widgets, Facebook Like boxes with profiles, Like buttons and Google Maps. It’s also compatible with WooCommerce and WordPress AMP plugin.

LazyLoad by WP Rocket

The authors of this plugin have also developed WP Rocket, a popular caching plugin for WordPress. This plugin stands out because it doesn’t use any JavaScript to implement the lazy load technique which makes it really lightweight. As far as features go, you can lazy load images, iframes, thumbnails, widget content, avatars, and smileys. This is another install, activate, and you’re done plugin as it has no configuration settings.

Lazy Load for Videos

Lastly, if you use more video content than images, then the Lazy Load for Videos is the plugin you need. This plugin replaces embedded Youtube and Vimeo videos with a clickable preview image and loads the actual video only when a visitor clicks on the preview image.

A few other notable features include:

  • The ability to convert all videos into a playlist and automatically add your branded video or product teaser to every video
  • The ability to hide Youtube annotations
  • The option to choose a custom color for your Vimeo player
  • You can hide Youtube player controls
  • Add schema.org markup to your Youtube and Vimeo videos
  • Works with WordPress Multisite
  • And more

Three Tips to Keep in Mind When Using Lazy Load

Now that you know how to implement lazy load on your site, there are a few tips you need to consider when it comes to using lazy load for images. It’s worth mentioning that using lazy load excessively can have a potential negative impact on SEO as it delays content loading not only for your visitors but also search engines.

This is important if you decide to implement lazy loading on actual content as well as on the images. However, if you use lazy load the smart way, your SEO rank shouldn’t be adversely impacted. Here are a few tips that will help you use lazy load properly.

Decide Which Images You Want to Lazy Load

The first tip is to decide which images will you lazy load. If your WordPress theme uses a lot of background images, then you don’t want to lazy load them as this can have a negative impact on your design.

As such, lazy loading images that are found in CSS as the background property shouldn’t be lazy loaded. Instead, you want to lazy load images that are found in posts, pages, and widgets. Using a plugin such as a3 Lazy Load is perfect for this scenario as it allows you to choose which images will be lazy loaded.

If, on the other hand, you’re using a simple theme, then a straightforward plugin such as BJ Lazy Load or Lazy Load will be perfect for your needs.

Decide on Placeholders

Once you know which images you want to lazy load, you need to decide what will you use as the placeholder images. You need to be careful here as the image loading time depends on how big the images are so whatever you choose will be what the visitors see until your original image is fully loaded.

For example, you could create image placeholders that use nothing but a colored background in your brand colors. Alternatively, you could use a blurred version of the original imaged saved in low quality.

Avoid altering the page layout

Lastly, be sure to test the plugin you’ve chosen and see if it affects the layout of your page or post. In some cases, an image might be shown as having 0px dimensions which could alter the page layout and text position.

You can avoid this by including correct image dimensions with the placeholders to ensure that image elements remain the same during and after the loading.

Final Thoughts

Using lazy load for your website images is one of the easiest ways to speed up your website. Use the tips in this article to find the best plugin to implement it on your site and enjoy a fast loading website.

Like This Article?

I have tons of great free content and giveaways! Join 10,000+ others and get access to coupons, freebies, and other great wordpress tips and tricksfor your wordpress website!

Leave a Reply

Hi, Sign Up For Freebies And Wordpress News!

Hi, Sign Up For Freebies And Wordpress News!

Join My Mailing List For Tips, News, And Discounts!

You have Successfully Subscribed!