Lazy Loading Of Images For Better Perceived Performance

Better Perceived PerformanceThere are two major groups of performance optimizations that can be implemented on websites (if we set aside network optimizations). The first reduces the weight of a page — compressing HTML files and optimizing images are examples. The second doesn’t change the amount of data that the site sends to browsers. Instead it involves taking control of when elements on the page load to improve users’ perceptions of load times.

Lazy loading is an example of optimizing perceived performance. Modern sites tend to be image heavy — designers favor large full-bleed images that inflate the size of their pages. For long pages, that means a significant amount of image data has to be downloaded before the page becomes usable.

In reality, we don’t need to download everything on the page at once. Most of it will not be viewable by the user until they scroll. We can improve perceived performance by only loading assets that are placed above the fold in the first instance. As the user scrolls, we can load images just before they are about to appear in the browser’s viewport. This process is known as lazy loading, and for image-heavy sites, it can make a significant difference to perceived performance.

Lazy Loading Images On WordPress

Implementing lazy loading on WordPress is as easy as pie. There are a number of excellent plugins that will do the job. My favorite is BJ Lazy Load, largely because it doesn’t usually require any configuration — install it and you’re good to go. In addition to images, BJ Lazy Load will also handle the lazy loading of content iframes and video embeds from sites like YouTube and Vimeo.

Lazy Loading Images On Other Websites

If you don’t use a content management system with a lazy loading plugin — static site users, for example — implementing lazy loading is a more involved process, but it’s not all that difficult.

There are several alternative JavaScript implementations of image lazy loading, but the easiest to get up and running with is Lazy Load Plugin For JQuery. There are full instructions on the site, but I’ll outline the simplest case here.

Of course, you’re going to need to include JQuery, so add the following to your page before the code for the lazy load plugin.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

In your page’s section or at the bottom of the body section is usual.
Next, you’ll need to load the Lazy Load plugin. Download it from the site and upload it to your site’s folder wherever you keep other scripts. Add the following to your pages with appropriate changes. Remember, this needs to go after JQuery is loaded.

<script src=“scripts/lazyload.js"></script>

Then you’ll have to edit the image tags.

<img class="lazy-load" data-original="img/example.jpg">

As you can see, instead of the usual “src” attribute, we put the location of an image in a “data-original” attribute instead. The plugin will lazy load images that are members of a specific class. The class name can be whatever you want, but it’s best to make it something meaningful.

Finally, we add the code that triggers the lazy loading.

$(function() {
$(".lazy-load").lazyload();
});

Note that we’ve added the name of the class we’ve chosen to the code, so the script knows which images we’d like to lazy load.

After following these instructions, when you reload your site’s pages, images will load only as the enter the browser window. There are dozens of settings to tweak with this script, and you’ll find full details on its documentation page, which I encourage you to take a look at.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED