by A Cowell | Updated Nov 9, 2021
Are your HubSpot pages reporting slow speeds? Chances are you have already used a tool like Google’s PageSpeed Insights. Even if you have already optimized the file size of your images, the large volume of images are impacting your load times. Luckily, there is a solution that doesn't involve picking which images you want to cut from the page. A solution we commonly employee on sites built on the HubSpot CMS is...
...to defer offscreen images through lazy loading. I already know what you’re thinking, what in the hell is lazy loading?!
What is Lazy Loading?
If you aren’t super in-tune with your front-end development side, that is 100% okay. You’ve made it this far, so I won’t bore you with the details you don't care about and just provide a high level overview of what lazy loading is... and how to implement.
Lazy Loading is a protocol which the images on your page do not populate until you’ve scrolled to the section of the page where the image is located. Instead, it uses a low quality place holder until the scroller gets to the image. Meaning, these images won’t actually load in full on your page and take up initial page load time. When done correctly, you can gain notable improvements in your page load times.
If you’d like to read the nitty-gritty and technical aspects then please jump over and read this article by Google.
How to Implement Lazy Loading in HubSpot
First off, in order for this to be successful, you need to make sure where you are adding your images are in a rich text or WYSIWYG module, and not the image module. You need access to the source code section for this. Now, you are going to want to replicate this code in the editor.
Code to copy here:
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
To explain what these are for, the src element is the attribute that will load in a low quality placeholder image when the page initially loads, the "data-src" and "data-srcset" are your actual image you want visible when the image is in the viewport. Make sure you use the "class='lazy'", without this, your javascript code which you will be adding later will not render and your images will not load.
What I do, is upload a really low quality image of the image that will show as the final result in the place of the "src" attribute. The full, good quality image goes in the "data-src" and "data-srcset" attributes. Here is an example of what that looks like:
What it will look like preload:
...and post load:
Second, you are going to want to add the script to enable the feature for lazy loading in HubSpot. First, click on the gear icon in the top right to go to settings , then navigate to the Website > Pages section. We add the code to the site footer so it loads with the last priority to compromise site speed even less.
Code to use here:
<script>
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 a more compatible method here
}
});
</script>
It is important to remember, you only want to enable lazy loading for images a visitor will need to scroll down to see (will not be in the the viewport on page load). In fact, images right below the fold that a prospect can access quickly should be omitted from lazy loading.
The Proof - See How Lazy Loading in HubSpot Actually Works?
As you can see, adding lazy loading in HubSpot, our site speed score jumped by 8 points!
Before lazy loading was implemented:
Post lazy loading:
It may not seem like a Herculean leap, but it gave our website the boost needed to move out of the yellow “ok" site speed rank, to the green “good” site speed rank. However, our images were already small to begin with before implementing lazy loading. If you have large images, you could see drastic improvements by compressing your large images and implementing lazy loading in HubSpot.
How to check your site's load times
There are a number of site speed tools, the aforementioned Google PageSpeed Insights is one of the most common. Several other tools are Webpagetest.com, Pingdom Tools, and the Google Chrome Inspect tool. The inspect tool in chrome allows you to run a waterfall report via the "Network" tab to see what DOM elements are taking up the most load time. Overall, webpage load times play an important roll in a prospect's experience of your brand and is an increasingly important factor that search engines evaluate in their ranking algorithms.
If you run into any issues activating Lazy Loading on your HubSpot site you can activate a 30-minute working session with one of our HubSpot Specialists for free. During this session, you can ask any HubSpot-related questions you can think of. The time is yours to use how you want. Learn more about your free 30-minute working session. It's yours for the taking.
