Improve your page speed with lazy loading images

It's no secret - pages that load faster, rank higher in SEO, have lower bounce rates and drive better engagement with your site visitors. The web asset that is notorious for slowing down your site... images. Even if you optimize and size your images correctly, they can still cause performance issues, especially on longer pages that have lots of images— like a pillar page or even a blog page, for example. This is where the "lazy Loading" technique on HubSpot comes in to save the day. 

In this post, we'll discuss what lazy loading is, why it might be a significant feature on your website, and how to add it to your pages to help improve your page speed and SEO ranking.

*This post was originally written by Tayla Fagan and published on 9 April 2021

What is lazy loading?

Lazy loading is a technique used by web pages to optimize load time. With lazy loading, a web page loads the required content first and waits to load any remaining page content until the user needs it. Lazy loading reduces the time it takes for a web page to open because the browser only loads a fraction of the content on the page at a time.

The process is referred to as "lazy" because it delays loading until needed — the same way we might put off certain tasks. But unlike when we put off washing the dishes — in this case, laziness is a great thing.

Where you've seen lazy loading in action

You’ve likely seen lazy loading before. Let’s look at Google Images for an example. If you search for photos of astronauts (as I'm sure you do regularly), Google will bring up a bunch of images for you on a single results page. It wouldn't make send to load all these images on the page at once because you won’t scroll too far down before you find the one you want. So Google thought, "why waste precious loading time and data on astronauts they'll never see?"

For hidden content, Google loads placeholder images to substitute the actual images. These placeholders take a lot less time to load than the fully rendered content. The actual images quickly load when their placeholder comes into view (i.e. when you scroll down). While lazy loading is most commonly used on images, we can apply it to any page element, like text, videos, or other embedded content.

When to use lazy loading

Lazy loading is great for long web pages with lots of images, gifs, and/or videos. Use it for content that's not critical to your user experience on the first load. There are no strict guidelines for what pages need lazy loading, so try to test your site’s performance and user engagement with and without lazy loading to make this call for yourself. 

Applying lazy loading to your page content has many potential advantages:

1. It helps your page load faster. This improves the visitor experience, increases the number of engaged visitors and conversions, and helps your SEO.
2. It reduces data usage since the browser loads a fraction of the total page content per visit. This saves on data costs for both you and for your visitors: You’ll pay less for loading fewer items, and your users won’t need as much data to load your web pages.
3. It saves energy needed to load content, which preserves battery life. It also keeps computers from overheating and sounding like jet engines.
4. It keeps visitors on your page if you continue to offer relevant content. A prime example of this is infinite scroll. Social media sites do this all the time to hold our attention.

Google uses page speed as a mobile search ranking factor which means there has never been a better time to improve your site speed.

Related article:  Site speed and performance: What you can do with HubSpot CMS

How to implement lazy loading for your images on HubSpot CMS

There are different ways to add lazy loading to your site, depending on whether you want to interact directly with your website’s code. Some CMS might also apply lazy loading to your web pages automatically, like HubSpot.

If you’re using a custom module that contains an image field, loading options will be shown by default but can be hidden by a developer if they would prefer that option not be shown in the editor. When the loading options control is shown, the default option is set to “lazy”.

If you’re adding an image within a rich text module, these images will be set to lazy load by default. To turn off lazy loading, select the module, click on the pencil icon to edit, click on the “advanced” tab of the image editing popover, then select “default”.

_{Lazy loading for images is now available to all HubSpot customers but there are some browser incompatibilities in older browsers. Feel free to contact us if you want this to work in all browsers.}

Note for developers: This implementation on the image field and module uses the loading attribute, which uses native browser-based lazy loading. This update should not conflict with custom-coded implementations that enable lazy loading.

Lazy loading is a great option for improving your page performance and keeping visitors on your site. If you choose lazy loading, be sure to test your site with this new feature before you launch. If done right, lazy loading will play a crucial role in skyrocketing the success of your business website. 

Interested in learning more about the CMS Hub and how HubSpot can be helpful for your entire organization? Download our free "Complete guide to using HubSpot".