How can I easily implement lazy loading on my site?

Greynighttoys
Tourist
5 0 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.

Replies 3 (3)

Greynighttoys
Tourist
5 0 1
oscprofessional
Shopify Partner
15895 2377 3082

@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/

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

OneCommerce
Shopify Partner
253 19 108

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:

 

<!-- Swift Optmize -->

<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