Lazy Loading

Store Design
1

Hi, i want to add lazy loading in my website how can i do this

1 Like
2

Hello @sahilkochhar1

Adding lazy loading to your website is a smart way to improve page speed and performance by deferring the loading of off-screen images.

If you’re using Shopify (most themes):

Shopify already supports native lazy loading for images using the loading=“lazy” attribute.

To enable or check:1. Go to Online Store > Themes > Edit Code.

  1. Open templates or sections that output images (like product-card.liquid, collection-template.liquid, etc.).

  2. Ensure image tags include the loading=“lazy” attribute, like this:

    <img src="{{ image | img_url: '480x480' }}" alt="{{ image.alt }}" loading="lazy">

If it’s not there, you can add loading=“lazy” manually to your image tags.

You can Use:

If your images use a background-image in CSS or JavaScript (not standard tags), lazy loading requires more advanced methods like using IntersectionObserver in JavaScript.

Let me know if you have any questions!

3

AI is good but it’s not effective against some odds. Most especially on page optimization when it’s comes to Google SEO. If you want to use AI for content optimization as part of the SEO. That means you would have published it before doing the site map. But in other aspects like products video, image generation, it’s effective when advanced AI tools are used

4

Hii @sahilkochhar1 , implementing lazy loading is a smart way to boost your store’s performance and improve Core Web Vitals like LCP (Largest Contentful Paint).

Here are some steps to implement lazy loading:

1. Finding the desired theme file:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Open the template file where product or banner images are rendered (e.g., product-card.liquid, image-banner.liquid, or collection.liquid).
  1. Add the loading=“lazy” attribute:

{{ image.alt | escape }}

For Background Images (via CSS or inline styles)

Background Image doesn’t support lazy loading for background images out of the box. In this case, either:

  • Convert background images to tags where possible
  • Or use a JavaScript-based lazy loading library like lazysizes

After appying these changes on the website, check your site’s performance again to check the impact on Google’s Core Web Vitals like LCP, CLS, etc.. and get more actionable suggestions.

Alternatively, If you’d prefer not to handle these optimizations yourself, you might give the Website Speedy Shopify app a try. It takes care of key performance improvements automatically, is super easy to set up and comes with a 14-day free trial so you can see the results for yourself.

(Disclaimer: We are the developer of this app and are happy to answer any questions you may have.)