Speed up page load with Lazy Loading Images

Written by on

Page speed is important, both to your user and to Search engines. Images play a key role in many websites and are often the biggest contribution to page bloat, whether your images are compressed, or you're working with the latest image formats, there's still much to be said for the simple Lazy Load.

 Lazy loading is a term used to describe loading scripts or content if and when we need them. Without lazy loading, large web pages can load large amounts of Data that the user never sees or uses, delaying initial page load times and leading to a negative experience for the user. Page load times can have a significant affect on website goals - Doubleclick by Google found that a staggering 53% of mobile visits were abandoned if a site took more than 3 seconds to load, while The BBC found that they lost an additional 10% of Users for every additional second their site took to load.

Page speed isn’t as straight forward as how fast the site is but, how fast the user perceives the page to be. By using loaders and animations we suggest movement and that something is happening. Pinterest found that by reducing perceived waiting times by 40% they increased sign ups by 15%.

Of course, it’s not just the end user who likes our pages to be fast – Search engines do as well, in July 2018, Google released “The Speed Update” in which page speed was introduced as a ranking factor for mobile searches. 

With so much depending on page speed, from SEO rankings, to conversion rate and overall user happiness, it’s important that we optimize our web pages for speed wherever is practical and possible. A review of the site found that the initial home page load was a massive 5MB, with over 3MB of images. According to UK phone network site 4g.co.uk, at the average download speed for 3G in the UK, it would take 13 seconds to download the home page, 8 seconds of which would be images. By reducing amount of data required by images at initial page load we could improve the user experience drastically. To put this into context, using The BBC’s findings of a 10% user loss for every addition second wait time beyond the expected 3 seconds, if we started with 100 3G users, at current page speeds of 13 seconds for the home page we would be left with just 35 users. However, if we were to load images later and reduce the initial load to just 2MB, our page would load much faster at 5 seconds and we’d be left with 81 users – Roughly a 57% increase.

This is where lazy loading comes in – There are several open source lazy loading libraries available which all handle loading slightly differently. The general principle however is the same, an image tag is placed within your HTML with either and empty src attribute, or a src attribute that points to a placeholder and a data-src (or similar) attribute which points to your lazy loaded image – Once the initial page is loaded, JavaScript can take over, either loading all the images straight away or loading the images as the user scrolls, if they’re needed.

There are several points at this stage that we may question:

Why would we load placeholder’s? That’s unwanted image data

What about image SEO?

What if the user doesn’t have JavaScript enabled?

Isn’t LazyLoading becoming native?

These are valid points that have good reason for careful consideration.

So why would we want placeholder images? Well the problem with Lazy loading images is if we’re not careful, as we call our images they can cause the content on the page to shift, sometimes dramatically, causing a bad user experience. There are several ways of dealing with this: The first and most simple is to have all our lazy loaded images cropped to the same size – Then we only should load one placeholder image for everything. However, this very limiting from a design and content editor’s perspective. We could give ourselves a little more freedom by working with image size ratios and the CSS object-fit property. For ultimate freedom though we can create individual image placeholders – It’s easily to quickly dismiss this method as pointless because we’re still loading images on the

SEO is always a concern when making big changes to our site and it must be carefully considered. Per Marketing Insights company Jumpstart’s US clicksteam panel, as of February 2018 Google image search acquainted to over 22% of search on the Web in the US, while we were unable to find UK figures, this number still demands respect. So then, with image search being so important to SEO, why would we ever hide all our images? Well, in fact Google themselves promote Lazy Loading for SEO purposes, if it’s done right and use the technique on their own image search feature. Thankfully there are tools for us to mimic Googles web crawlers – By using Googles Puppeteer API we can take a snapshot of what Google sees and ensure that the Search engine is waiting for our Lazy Images to load before scraping the website for data.

As we’ve discussed, Lazy Loading relies on JavaScript to work, which is perfectly fine for 99.8 percent of Worldwide users – Per Blockmetry’s findings in 2016 – However they do note that this figure hides a lot of interesting regional geographic patterns. Exceptionally high rates of disabled JavaScript were in areas of East Asia and Africa as well as Finland. With a few simple techniques though we can provide a seamless experience for these users, without losing our Lazy Load experience for the 99.8%. By adding a “no-js” class to our <html> tag and adding a line to the top of our JavaScript file to remove it (A technique seen in Libraries like Modernizer), we can tell if the user has JavaScript enabled and display content appropriately. A combination of this with a <noscript> block containing a non lazy version of our image, directly before or after our lazy image and a CSS class that hides all lazy images if the no-js class is present we have Lazy Loading for the majority and a seamless non JavaScript fall-back.

<div class="image-container">
    <noscript>
        <img alt="My image" src="hero.jpg" class="lazy-fallback">
    </noscript>
    <img alt="My image" src="hero-blank.jpg" data-src="hero.jpg" class="lazy">
</div>

 Opening <html> tag:

<html lang="en" class="no-js">

 JavaScript:

(() => {
    document.querySelector('html').classList.remove('no-js');
})();

 CSS

.no-js .lazy,
.lazy-fallback {
    display: none;
}

.no-js .lazy-fallback {
    display: block;
}

 But is all of this a waste of time is Lazy Loading is to become a native browser feature - In short, no. While Lazy Loading is to become a native feature over the next few years, we are not there yet.

In conclusion, Lazy Loading has many benefits, whether it’s for the end user or for search engines and with a relatively small amount of work we are able to have a smoother quicker experience for 99.8% of the worlds internet users, while boosting our SEO and having a graceful fall-back for the 0.2% of users who may have JavaScript disabled. The great part about implementing Lazy Loading is it doesn’t have to be all or nothing – We could introduce Lazy Loading, one image at a time across our site and it would have no negative impact on the images we decide to leave as simple html only images.

  • Javascript
  • Css
  • Speed
  • SEO
Three Bears - Web design and development
Loading