Online store performance and site speed optimization
Hi all,
I know that lazy loading can be achieved by adding the code loading="lazy" to the image tags. However, I'm not sure how/where to add the code to our 'Featured Products' section on our home page. If I've found the correct part of the code, our 'Featured Products' section appears as follows:
<a href="{{ section.settings.link }}" class="link-img-hover"{% if section.settings.image == blank %} style="display: block;"{% endif %}>
{% if section.settings.image != blank %}
<img src="{{ section.settings.image | img_url: 'x1024' }}" class="img-responsive" alt="{{ section.settings.image.alt }}">
{% else %}
If someone could let me know how to add the loading="lazy" code, that would be great!
Many thanks ; )
Hi, it is easy, add it to the img tag, eg
<img src="{{ section.settings.image | img_url: 'x1024' }}" class="img-responsive" alt="{{ section.settings.image.alt }}" loading="lazy">
this tells the browsers to use native lazy loading, depends on the user browser if it is supported
let me know if you have more doubts
thanks
Thanks so much Savga for responding so quickly!!
I'll add the code now ; )
Thanks again!
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023