Implement lazy loading for all images on dawn theme

[TrendBlend]

Hello, is it possible to implement lazy loading for all of my images in my theme? My Collections page: Collections – TrendBlend and product pages are suffering from visual instability and I want them to work smoothly. If anyone can help me with this I look forward to hearing a reaction.

Kind regards,

Stef

[Website_Speedy]

Hi @TrendBlend  

To implement lazy loading for all images in the Dawn theme on Shopify, you can take advantage of the built-in lazy loading support within Shopify’s theme code. Modern themes like Dawn typically have lazy loading capabilities enabled by default, making it easier to improve page load times. Here’s how you can ensure it’s working properly or customize it:

In the Dawn theme, images are usually set to use the loading="lazy" attribute. Shopify’s native Liquid templates handle this automatically, meaning images like product images, collection images, and other dynamic content are benefiting from lazy loading.

If you’ve added any custom image elements to your templates, be sure to include the loading="lazy" attribute to ensure they load efficiently:

Alternatively, you can also consider using a speed optimization app for Shopify to further improve core web vitals and implement lazy loading seamlessly. The Website Speedy app takes just about 5 minutes to set up and comes with a 14-day free trial, allowing you to test its effectiveness for your store.

You can install it from here: https://apps.shopify.com/website-speedy