HubSpot CMS

Easy Lazy Loading For Hubspot

Lazy Loading Polyfil That utilizes native lazyloading


After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

6 Recommendations

View on:


<!-- HUBL & HTML -->

<!-- Standard Image -->
<img loading="lazy" 
     data-src="{{ resize_image_url(IMAGEURL, WIDTH, HEIGHT, SIZE) }}" alt="ALT TEXT" />
<!-- Responsive Image -->
<img loading="lazy" 
     data-srcset="{{ resize_image_url(IMAGEURL, 320, HEIGHT, SIZE) }} 320w,
             {{ resize_image_url(IMAGEURL, 480, HEIGHT, SIZE) }} 480w,
             {{ resize_image_url(IMAGEURL, 800, HEIGHT, SIZE) }} 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
     alt="ALT TEXT"

<!-- IFRAME -->
<iframe loading="lazy" 
        data-src="IFRAMEURL" ></iframe>

            // Lazy Loading
(function() {
// check to see if native lazy loading is available
if ("loading" in HTMLImageElement.prototype) {

  var lazyEls = $('[loading=lazy]');
    var src = $(this).data('src');
    var srcset = $(this).data('srcset');
      "src" : src,
      "srcset" : srcset
} else {

  // if native lazyloading isnt available...
  // Dynamically include a lazy loading library of your choice
  // Here including vanilla-lazyload
  var script = document.createElement("script");
  script.async = true;
  script.src =
  window.lazyLoadOptions = {
    elements_selector: "[loading=lazy]",
    //eventually more options here

Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here

Easy Lazy Loading

  1. Add this js script to your main js file
  2. Add loading="lazy" to your images and iframes
  3. Change the src and srcset attributes to data-src and data-srcset
  4. enjoy!
6 Recommendations

Chad Pierce

A Design Link

8+ Years developing on the HubSpot CMS. Javascript/HTML/CSS and design.

View Chad Pierce’s Gallery (2 Entries)

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Made with  by community members: