Lazy Loading feature on the website is not functioning properly

[isuru]

Hi there,

We have an e-commerce website (https://www.alamourthelabel.com/) that uses a lot of high-resolution images throughout the website. I am the new developer for this company taking over the previous role. Trying to get my head around all the apps and template files at the moment. I have noticed the lazy-loading is not working properly even though they have implemented it properly.

The previous developer has,

1. Added the lazysizes.js library to the theme assets folder and include it in the theme.liquid
2. Updated the image tags by swapping src with data-source and adding the “lazyload” class

For some reason, lazy loading is not working properly as expected.

PageSpeed Insights Score Report

Any help from a Shopify expert would be greatly appreciated. Thank you!

[isuru]

I would be really appreciated it if someone can someone please respond to this inquiry. 🙂 

[flareAI]

Hello @isuru,

I am Gina from flareAI app - get free sales from Google. Hope you are having a good day.

It's great to hear that the previous developer has already taken steps to implement lazy loading for the images on the website. However, it's not uncommon for lazy loading to not work as expected, especially on websites with a lot of images.

Here are a few things you can do to troubleshoot and potentially fix the lazy loading issue:

1. Check if the lazysizes.js library is loading properly
You can use the browser's developer tools to check if the lazysizes.js library is being loaded properly. Open the developer tools and go to the "Sources" tab. Look for the lazysizes.js file in the list of loaded assets. If it's not there, then the library may not be properly included in the theme.liquid file.

2. Check the image tags
Make sure that all the image tags have the "lazyload" class and the "data-src" attribute instead of the "src" attribute. It's also important to note that some image tags may have been added dynamically by apps or plugins, so make sure to check those as well.

3. Check for conflicts with other apps or plugins
It's possible that another app or plugin is conflicting with the lazy loading implementation. Try disabling other apps or plugins one by one and see if that fixes the issue.

4. Test on different devices and browsers
Lazy loading may work differently on different devices and browsers. Make sure to test the website on different devices and browsers to see if the lazy loading is working properly.

5. Consider using a different lazy loading library
If all else fails, consider using a different lazy loading library. There are many other lazy loading libraries available, and some may work better for your specific website.

By following these steps, you should be able to troubleshoot and potentially fix the lazy loading issue on the website.

Gina

[oscprofessional]

Hello @isuru 

One of the most common recommendations I found is “Defer offscreen images” (LazyLoading). This is an indication that all of the site’s image assets are loading at once.

So you can use a lazy load for these images.

• To defer the loading of offscreen images on your Shopify site, you will have to modify your Theme (theme. liquid file) to leverage the lazySizes library. Here's how:
• Download the lazy sizes Javascript library from here and upload it to your theme's /assets folder. 
• Note(once check ‘lazy sizes Javascript library’ in assets repo. has available or not)
• Add the following lines to your theme. liquid just before the </head> tag

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

• Change the image tags in your theme by adding the class "lazyload" to the image tags and changing the src attribute to the data-src attribute. 

{% for img in product.images %}
{% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload" 
src="{{ img | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[720, 1080]"
data-aspectratio="{{ img.aspect_ratio }}"
data-sizes="auto">
{% endfor %}

By fixing these issues, your website speed score can definitely improve.

If anything needs to be included or clarified then feel free to ask.  We will surely help you. 

Have a nice day!