Implementing Lazy-Loading for Images & Sections to Improve Shopify Page Speed

Simple, non-technical tutorial for Shopify store owners

📌 What Is Lazy-Loading?

Lazy-loading means that images load only when the customer scrolls down to them, instead of loading everything at once. This instantly reduces:

• Page size
• Initial load time
• Speed score issues
• Bandwidth usage

This tutorial will teach you how to add lazy-loading to:

• Product images
• Home page banner images
• Collection images
• Custom sections
• Entire sections using a simple script

🛠️ Method 1: Add Lazy-Loading to Existing Theme Images (Easiest)

Most Shopify images can be lazy-loaded by adding loading="lazy" to their tag.

Step 1: Open the Theme Code

1. Go to Online Store → Themes
2. Click ... → Edit code
3. Open files like:
   • product-card.liquid
   • collection-product.liquid
   • image-banner.liquid
   • featured-product.liquid

Step 2: Find an image tag

Step 3: Add Lazy-Loading

That’s it! The browser will now lazy-load the image.

🛠️ Method 2: Lazy-Load Product Images

Search for product image code inside:

• product-card.liquid
• product-grid-item.liquid

Replace your product image with:

🛠️ Method 3: Lazy-Load Banner & Homepage Images

Open files like:

• hero.liquid
• slideshow.liquid
• image-banner.liquid

Update the banner image:

🛠️ Method 4 (Advanced): Lazy-Load Entire Sections

You can lazy-load whole sections (e.g., Featured Products, Videos, Sliders).

Step 1: Wrap Section Content

Step 2: Add JavaScript (once)

Add this inside theme.liquid before