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!
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023