HubSpot Dev Questions: Web Performance

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.

Use lazy-loading to improve performance

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.

Lazy loading images

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.

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

}

});

Lazy loading images in HubSpot

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. 

{% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %}

<img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }}>

Popular JavaScript Libraries for Lazy Loading

The following libraries can be used to lazy-load images:

• Lazysize
  is is a full-featured lazy loading library that lazy-loads images and iframes. The pattern it uses is quite similar to the code examples presented above, as it automatically binds to the lazyload class on <img> elements, and requires you to specify image URLs in data-src and/or data-srcset attributes, the contents of which are swapped into src and/or srcset attributes, respectively. It uses Intersection Observer (which you can polyfill), and can be extended with a number of plugins to do things like lazy-load video. 

• Vanilla-lazyload
  is a lightweight option for lazy-loading images, background images, videos, iframes, and scripts. It leverages Intersection Observer, supports responsive images, and enables browser-level lazy loading.
• lozad.js
  is another lightweight option that uses Intersection Observer only. As such, it's highly performant, but needs to be polyfilled before you can use it on older browsers.
• yall.js
  is a library that uses Intersection Observer and falls back to event handlers. It's compatible with IE11 and major browsers. 
• react-lazyload
  In case you’re looking for a React-specific lazy-loading library, consider react-lazyload. While it doesn't use Intersection Observer, it does provide a familiar method of lazy loading images for those accustomed to developing applications with React.

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.