Adding multiple crisp, high-quality images can lead to slower store performance. Even with resized and compressed images, your product pages can suffer from slower loading times.
But don’t worry—there’s a simple, effective solution: lazy-loading your description images.
What Causes Slower Product Pages?
When you add images to your product descriptions in the Shopify admin, they are embedded using the <img /> tag but rendered via Liquid:
{{ product.description }}
Since the image tags aren’t directly accessible in the code, it can seem like you're limited in how you can optimize the images. So, how can you lazy-load the description images when you don’t have direct access to the code?
Ok, so how do I address this issue?
Simple, we can use Shopify's native replace function to replace all <img tags with <img loading=”lazy”.
The step by step process looks like this:
- Go to Online Store > Themes > Actions > Edit Code;
- Find product-template.liquid file;
- Press CTRL +F (or CMD + F on Mac) and search for the code below:
{{ product.description - You'll find one or more pieces of the code above in your product-template.liquid file. Delete the entire line and replace all of them with the following:
{{ product.description | replace: “<img”, “<img loading='lazy'” }} - Save.
For reference, this is how it looked on my client's theme.
Before:
After:
Conclusion
Native lazy loading through the loading attribute is a relatively new feature, so it may not yet be fully supported on every device or browser. You can check the current compatibility across different browsers here.
However, if you want more control, you can use this same technique to lazy-load images via JavaScript. By applying the replace function, you could easily add a data-attribute and connect it to something like vanilla-lazyload, a lightweight JavaScript library. This method also works for videos and iframes, allowing you to optimize more than just images.
At Jhango, we specialize in designing and developing fast, visually stunning websites. With our expertise in optimizing website performance, you can trust us to improve your Shopify store’s loading speed and overall user experience.
For more information or to get started, contact us:
🌐 www.jhango.com
📞 +91 8369487891
📧 sales@jhango.com
