Lazy Loading Product Images on VENTURE THEME? ( Defer offscreen Images ) - Consider lazy-loading

BeautifulDesign
Explorer
52 0 8

The biggest improvement I can make on my store is: Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

I have managed to lazyload all, except product images - anyone has any input on how to easily accomplish this feat?

Thank you in advance!

Replies 4 (4)
JohnCodes
Shopify Partner
134 10 75

Hi @BeautifulDesign 

We have an article that goes into more detail on lazy loading. You can check it out here: How to Lazy Load Images on Shopify to Make Your Site Faster.

To specifically target your product images, you'll first need to identify the snippet/section file they're being loaded from. If you go into your theme's code, under templates, you'll find a file named something like "product.liquid".

In that template file, you'll often find lines of code like the ones below:

{% include file-name-here %}
{% section file-name-here %}

These are the section and snippet files your product template is using. The "file-name-here" portion of the above code correlates to actual file names that you can search for in your theme's code editor.

You'll have to go through those to see which file is the one loading your product images.

Once you've identified the correct file, then all you have to do is make some changes to the image tag so it looks something like:

<img class="lazyload" data-src="image-source"  />

 

That's a quick breakdown of how to lazy load your product images. If you'd like additional help, feel free to reach out to our team of optimization experts at speedboostr.com/contact. Best of luck!

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
oreoorbitz
Shopify Partner
205 24 115

Could you share your site's URL?

 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
eStoreSpeed
Explorer
43 6 12

Hi @oreoorbitz ,

We have a guide on lazy loading images on our youtube tutorial https://youtu.be/BADxzcJ5XRU?t=190 . It's simple when you've done it a few times.

Hope it helps!

Best,

eStoreSpeedOptimization

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
oreoorbitz
Shopify Partner
205 24 115

I know how lazyloading works.

I was talking to the original poster.

 

@BeautifulDesign Please share the URL of your site and I'll see if I can help you enable lazyloading.

 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/