How can I easily implement lazy loading on my site?

Greynighttoys · ‎01-08-2023

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.

Greynighttoys · ‎01-08-2023

www.greynighttoys.com

oscprofessional · ‎01-09-2023

@Greynighttoys ,

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

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'ls.rias.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'ls.bgset.min.js' | asset_url }}" async="async"></script>

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/

OneCommerce · ‎01-09-2023

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:

<script type="text/javascript">

const imgLazy = document.getElementsByTagName("img");

if (imgLazy.length > 0) { for (let t = 0; t < imgLazy.length; ++t) { imgLazy[t].setAttribute("loading", "lazy"); } }

</script>

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

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us

How can I easily implement lazy loading on my site?

How can I easily implement lazy loading on my site?

Community Blog Articles