Let’s be honest, we’re all been there: you’re surfing on the web, visiting different websites and trying to find something interesting to read. You finally find a page that offers that one blog post or piece of news you’re super interested in. But when opening the page, it loads very slowly or some of the elements load slower than the others. You feel inpatient and will look for content on other websites so you leave the page. You may forget such incident rather quickly but the owner of that specific website, however, misses a traffic footprint and a potential advertising target. Impatient visits mean lost earnings for both publishers and advertisers. That’s why page speed is essential when it comes to retention of users.
So, no matter the purpose or content of your website, slow web pages will always turn visitors away. When it comes to user experience on the web, fast loading, also known as site performance, is essential both terminology wise and in practice. According to HubSpot, the average amount of time it takes a web page to display visible elements is around six seconds. Even this span of time may sound like a long time to some.
What might actually impact the loading time of a web page? One general and very possible reason is the page size and more specifically, the amount of content on the web page and the file sizes of each piece of content. A large number of images, videos and other media content can slow down the page speed causing longer loading times. Fortunately, there are several technological solutions that will allow publishers to improve their page speed and relatively increase quality and conversion rates. In this blog post we introduce you to one such solution, lazy loading. Lazy loading doesn’t require cutting content and it improves your site performance, limits bandwidth usage and even gives your site’s SEO a boost. To simplify, lazy loading means deferring the loading of the assets until the time they are actually needed. On the web, this means downloading the content only once the user has gotten close enough to where in the HTML document the asset displays.
So, as mentioned, a large number of images as well as large image file sizes may impact the loading time of a web site. There are different ways to add lazy loading to your site, depending on how eager you are to interact with your website’s code. Some browsers might also automatically apply lazy loading to your website.
Using browser-level lazy-loading
The common browsers, such as Chrome and Firefox support lazy-loading with the loading attribute. The attribute can be added to <img> elements as well as to <iframe> elements. The value of “lazy” tells the browser to load the image immediately if it’s in the viewport, and to fetch other images when the user scrolls near them.
Browser compatibility
<img loading=lazy> is also supported by the most popular browsers; Chrome, Edge, Opera and Firefox. For Apple’s Safari the implementation for WebKit is in progress. Browsers that do not support the loading attribute simply ignore it without side-effects.
Example:<img src="image.png" loading="lazy" alt="…" width="200" height="200">Using Intersection Observer
So, what actually is an Intersection Observer API? According to the definition at MDN, Intersection Observer API “provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.”
To polyfill lazy-loading of <img> elements, developers most commonly use JavaScript to check if they're in the viewport. If they are, their src and sometimes srcset attributes are populated with URLs to the desired image content. If you've written lazy-loading code before, you may have accomplished your task by using event handlers such as scroll or resize. While this approach is the most compatible across browsers, modern browsers offer a more performant and efficient way to do the work of checking element visibility via the Intersection Observer API.
Example of how to use Intersection Observer in JavaScript to lazy-load images
document.addEventListener ("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll ("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry)
{ if (entry.isIntersecting) {let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
}
});
Within HubSpot, lazy loading options are available for image fields in custom modules to be used in HubL tags. They are also available in HubSpot’s default image module. When you’re building a new custom module, you can choose to enable browser built-in lazy loading on image fields by adding an image field to your custom module and navigating to the Content options section in the Inspector panel. In this section, you will see both the Image loading and Available loading options select menus. When this option is enabled, you can either show or hide controls to the content editor enabling them to change the loading speed in the page editor.
Example:{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}
<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }}>
And in the Content Editor, you will see the “Image Loading” option if the “Show all controls” was selected.The following libraries can be used to lazy-load images:
In case you’re interested in learning more about web performance and lazy loading solutions, we recommend you to visit the Google Developers page for blog posts and case studies or HubSpot’s blog for more HubSpot-specific developer content.