Best practices for lazy loading images in Shopify product pages?

Shopify Discussion
1

Hey devs,

I’ve been optimizing image-heavy Shopify product pages lately, especially for users in places like Riyadh Park Mall, where shoppers often browse on mobile networks while inside large malls.

I’m currently exploring lazy loading strategies to improve performance and reduce LCP scores. Has anyone here implemented native loading=“lazy” or used JavaScript libraries like Lozad.js or lazysizes within Shopify themes (e.g., Dawn or custom themes)?

Would love to hear which approach gave you the best balance between user experience and speed — especially for product grids or collection pages with 20+ items.

Thanks in advance!

2

Hi,

Hope this will help

-Add loading=“lazy” to all tags

Code example

-Also you can use lozad library

Script example

Best Practices for Lazy Loading Shopify Product Pages

  • Use loading=“lazy”
  • Add width & height
  • Prioritize first image
  • Lazy load thumbnails, related items
  • Use modern image formats
  • CDN-cached images