use lazysizes to load images in my landing pages.

Excursionist
91 1 7

Hi All,

I've created a bunch of landing pages for my products, which contain a lot more info and images.
I tested them out on Googles pagespeed insights, and it cam back recomending to lazyload those images below the fold.
I did the images on one page and it dramatically improved the loading speed from 70 to 84 for mobile and 100 for desktop.

I went from using this code for each image:

 <div class="grid__item medium-down--one-half post-large--one-quarter">
        <img src="https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg" alt="nice alt text" />
</div>

to this code at the top of each page:
 {% assign img_url = image_object | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

and this for eachimage:

 <div class="grid__item medium-down--one-half post-large--one-quarter">
 <img class="lazyload fade-in"
             src="{{ image_object | img_url: '300x' }}"
             data-src="https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg
             data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
             data-aspectratio="{{ image_object.aspect_ratio }}"
             data-sizes="auto"
             data-parent-fit="contain"
             alt="nice alt text">
         </div>

Now before i go ahead and change all the 15 other landing pages, could anyone tell me it that is correct? It seems to work, but would like confirmation from someone who lnows more than me.

I'm not sure what the '300x' is doing in the image url.

Thanks in advance,

Timmo.

0 Likes
Tourist
16 0 0

Where can you find the file/files that loads the images? 

0 Likes
Shopify Partner
1838 173 597

The library used to lazy load images in most Shopify themes is called lazysizes. In most if not all Shopify free themes, it will be found in lazysizes.min.js or as part of the vendors.js file in your Assets folder.

I turn coffee in to code - since 1998
0 Likes
Tourist
16 0 0

Sorry for the stupid questions, I am only one week into using Shopify. Kind of got thrown into it. But my question is, where do I find where the individual image are being called. For example I would like to lazyload all the pictures that load on the home page. I understand that this will probably involve editing multiple files, but I dont even know where to begin. The most luck I have had so far is editing the collection-grid-item.liquid file, but the images are not lining up correctly and I am not even sure if its having the desired effect. Google speed insights says its helping, but not with all images. 

 

Any help is appreciated!!

 

Here is the non-live site:  https://cfstq4gn0c5psfis-15396793.shopifypreview.com/

Here is the: collection-grid-item.liquid file 

 

{% for image in product.images %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endfor %}

 

{% unless collection_image_size %}
{%- assign collection_image_size = '450x450' -%}
{% endunless %}
<div class="collection-grid-item__overlay" style="background-image: img class="lazyload fade-in"
src="{{ collection_image_url| img_url: '100x' }}"
data-src="{{ collection_image_url }}"
data-widths="[200,540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
alt="{{ image.alt | escape }}">
{% if collection.empty? %}
{% comment %}add default state for collection block in theme editor{% endcomment %}
{% assign collection_image_url = '' %}
{% else %}
{% if collection.image %}
{% capture collection_image_url %}{{ collection | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
{% elsif collection.products.first %}
{% capture collection_image_url %}{{ collection.products.first | img_url: collection_image_size, crop: 'top' }}{% endcapture %}
{% endif %}
{% endif %}
<div class="collection-grid-item">
<a href="{% if collection.empty? %}#{% else %}{{ collection.url }}{% endif %}" class="collection-grid-item__link">




{% if collection.empty? %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>

<img class="lazyload fade-in"
src="{{ collection_image_url| img_url: '300x' }}"
data-src="{{ collection_image_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
alt="{{ image.alt | escape }}">

<div class="collection-grid-item__title-wrapper">
<h3 class="collection-grid-item__title">
{% if collection.empty? %}
{{ 'homepage.onboarding.collection_title' | t }}
{% else %}
{{ collection.title }}
{% endif %}
</h3>
</div>
</a>
</div>

0 Likes
Shopify Partner
1838 173 597

Well your first and foremost issue is resolving this here

 

rTcTXqa

 

That's also why the images aren't lazy loading - you can see the errors are related. Why these errors occur is anyones guess without delving deep in to debugging which is made even more difficult considering the dozen or so apps I see the store is using (and all the JS mess they introduce).

 

Your base theme Debut does have lazysizes and those work out-of-the-box. What has been done beyond that either through installed apps or theme customisations to break that functionality is beyond a quick look "ah, here's the problem and there a fix" :-(

I turn coffee in to code - since 1998
0 Likes
New Member
3 0 0

Hello everyone,

 

Sorry for digging this up, but this has been bothering me for a while and I can't find the answer.

 

In Tim_Brennan message:

I went from using this code for each image:

 <div class="grid__item medium-down--one-half post-large--one-quarter">
        <img src="https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg" alt="nice alt text" />
</div>

to this code at the top of each page:
 {% assign img_url = image_object | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

and this for eachimage:

 <div class="grid__item medium-down--one-half post-large--one-quarter">
 <img class="lazyload fade-in"
             src="{{ image_object | img_url: '300x' }}"
             data-src="https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg
             data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
             data-aspectratio="{{ image_object.aspect_ratio }}"
             data-sizes="auto"
             data-parent-fit="contain"
             alt="nice alt text">
         </div>

 

By what is supposed to be replaced "image_object" if the image is not coming from the theme editor but from files/upload with the following link https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg ? Obviously it is not working using https://cdn.shopify.com/s/files/1/2508/7946/files/image.jpg!

This actually made me give up updating my theme, a little help would be greatly appreciated.

 

Thanks

0 Likes