How can I easily implement lazy loading on my site?

Technical Q&A
1

I can’t for the life of me figure out how to implement lazy loading to my site. All the speed tests I do say I need to use lazy loading to improve my performance, but I can’t figure out why the code isn’t working. I don’t have experience coding, so I need easy to understand answers or pictures.

2

www.greynighttoys.com

3

@Greynighttoys ,

You can load the libraries by adding the following in your theme.liquid layout file between the and tags:

In its simplest expression, the snippet for the responsive image can already be found in the collection.liquid file of Slate’s Starter Theme, and is provided as an example:

{% include 'responsive-image' with
    image: product.featured_image,
    max_width: 700,
    max_height: 800
  %}

I am sharing you one blog post of shopify. You can refer and implement.

https://www.shopify.com/in/partners/blog/lazy-loading

Also Visit on these URLs, for Shopify speed optimization guide :

https://www.oscprofessionals.com/blog/shopify-speed-optimization-step-by-step-guide/

https://www.oscprofessionals.com/blog/how-to-handle-opportunity-defer-offscreen-images-in-shopify/

4

Hello mate,

We are OneExperts from OneCommerce - an eCommerce solution platform.

You can add this code to apply lazy loading for image to your theme:

In addition, lazy loading can also be applied to javascript files, but our advice is that you should only apply it if you understand the code because if applied incorrectly can seriously affect your website.

Hope this can help you solve the problem. If you need any further support, hit us up at julia@onecommerce.io for replies within minutes