Boost Your Webflow Site Performance with Advanced Lazy Loading and Blurred Image Placeholders

Photo by Ash Edmonds on Unsplash

Implementing Advanced Lazy Loading with Blurred Placeholders in Webflow

Step 1: Generate Blurred Images

• Use a tool like BlurHash or any other service to create low-resolution, blurred versions of all your images.

Step 2: Add Blurred Images and HTML Code to Webflow

• For each image on your site, do the following:
• In your Webflow Designer, select the Add Elements panel (the “+” icon on the left sidebar).
• Under the Components section, drag and drop an HTML Embed component to the place on your canvas where you want the image to appear.
• Click on the HTML Embed component you just added to select it, then click on the cog icon to open the settings.
• In the “Embed Code” text area, paste your <img> HTML code. The structure of your HTML for each image should look like this:

<img class="lazy" src="blurred-image.jpg" data-src="high-res-image.jpg" alt="Image Description">

• Replace "blurred-image.jpg" and "high-res-image.jpg" with the actual source paths you're using for your blurred and high-resolution images.

Step 3: Implement Lazy Loading

• Enable the native lazy loading feature in Webflow for each image element on your site.
• To do this, select the image or element you want to lazy load.
• In the Settings panel (the gear icon), scroll down to the Load section.
• Click on the drop-down menu and select Lazy.

Step 4: Add Custom Code to Replace Blurred Images

• You need to add some custom JavaScript code to your Webflow project to replace the blurred image with the original one once it’s fully loaded.

Add the following JavaScript code:

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.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

This JavaScript code can be added in Webflow by going to your site settings, then the Custom Code section, and adding the script in the Footer Code section.

If you have hundreds of images, consider automating the process of generating blurred images and implementing this process, as doing it manually could become time-consuming.

Thanks for reading! I am Daris Ali Mufti a UI UX Designer based in Jakarta Indonesia. Still a lot to learn! any insights, differing opinions, or advice are always welcome. I am always open to having a dialogue with others and recognize that I am not an industry expert just yet.