Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
I am trying to improve my website speed score, and the biggest hindrance is the Largest Content Painful which is taking a long time to load as it is set to lazy loading. I am using the origin theme for my website floraflourish.com. Can you help me remove lazy loading for all content above the fold across my website please?
The LCP identified here is the first image on my homepage.
Flora Flourish LED Plant Grow Light Lamps <img src="https://cdn.shopify.com/s/files/1/0757/5860/0479/files/OneHead-4-_1.png?v=…" alt="Flora Flourish LED Plant Grow Light Lamps" srcset="//cdn.shopify.com/s/files/1/0757/5860/0479/files/OneHead-4-_1.png?v=168421…" width="1946" height="1946" loading="lazy" class="image-magnify-none" sizes="(min-width: 1200px) 495px, (min-width: 990px) calc(45.0vw - 10rem), (min-w…">
When you go to theme.liquid, and check the <head> section, can you see loading="lazy" in there?
Let me know. Thanks.
No, it isn't there.
Do you have a link to your website so I can check it out?
Ok. It seems like you have lazy loading set up for multiple images on your website.
To remove this, go to the code editor, and for each section that you're trying to edit, look for the code block section.settings.image and under there, remove loading: 'lazy'.
Here's a helpful link which shows an image example of where to look: https://community.shopify.com/c/shopify-design/disable-lazy-loading-of-above-the-fold-image/td-p/168...
Let me know if this helped. Thanks!
I've seen this guide, and it doesn't quite help. The sections I am trying to remove lazy loading for are 'featured product' and 'product information' in the origin theme. When I go to edit code, the sections 'featured-product.liquid' and 'main-product.liquid' don't have loading=lazy in them. The 'main-product.liquid' has lazy_load: false. That's about it.
The only sections with loading=lazy are image-banner.liquid and image-text.liquid which i'm not sure if are the right sections?
Also, the snippets product files have loading=lazy in them, but i don't know which to remove. And do I delete it or change loading=lazy to loading=eager?
Hope you can help pinpoint the exact file and code I need to amend.
Really appreciate it. Thank you!
It's hard to see exactly where lazy loading is on a Shopify website since blocks are used, and can be used multiple times on a website. And you wouldn't want to remove lazy loading throughout the whole website, just above the fold.
Paste this code in the two files you want to edit:
<script>
// Get the image element
var image = document.getElementById('your-image-id');
// Get the position of the image relative to the viewport
var imagePosition = image.getBoundingClientRect();
// Calculate if the image is above the fold based on its position
var loading = (imagePosition.top < window.innerHeight) ? 'data-immediate-load' : 'lazy';
// Pass the value of 'loading' to the template
var imageAboveFold = "{{ image_above_fold }}";
imageAboveFold = loading;
</script>
{% if image_above_fold %}
// Your image code without lazyload
<img src="your-image-url" loading="{{ imageAboveFold }}">
{% else %}
// Your image code with lazyload
<img src="your-image-url" loading="{{ imageAboveFold }}">
{% endif %}
This code is looking at if the image is above the fold or not and whether or not to add lazy loading.
Let me know if this works.
Thanks for this. I tried pasting it in featured-product.liquid, but I still get the LCP loading lazily diagnosis when i ran the page speed test. Furthermore, I get a weird comment showing up at the bottom right on my site. Images below.
I tried pasting it in the theme.liquid file as well, but the speed test still shows that the Largest Content Paint image was loaded lazily.
Maybe I'm placing the code in the wrong place? Could you guide me on where I should place this code exactly to get the outcome I need? Thank you so much!
Can you send me an email at [email protected]? Let's see if we can fix this issue.
Hi Zqdo,
I have the same issue with above the fold lazy loading, and was wondering if you could have a look and suggest something to try.
Here is the link to the website: www.skindevotee.com and below is the code that is parsed.
<img alt="Book a treatment with Skin Devotee Facial Studio in Philadelphia" class="image__img" loading="lazy" width="800" height="1200" src="//skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=320" srcset="//skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=700 700w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=750 750w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=800 800w" sizes="100vw" onload="javascript: this.closest('.image').classList.add('loaded')">
So I searched for this and saw that the only file that calls this exact code is in responsive-image.liquid file.I don't know how to insert the logic you provided in the above posts you mentioned to force the hero-image on the homepage to not lazy load.
Here is the code for the responsive-image.liquid
Thank you
Neil
{%- comment -%}
Pass these variables into snippet:
Required:
* image: Image object
* sizes: srcset size attribute
Optional:
* prioritize_loading: is this image rendered above the fold or otherwise prioritized? this will avoid loading="lazy"
* fallback_width: width shown to browsers that don't support srcSet
* tag_name: render something other than an `img` element, for instance `picture` or `source`
* media: custom media definition for `source`
* aspect_ratio: necessary if the image is displayed at a non natural aspect ratio
* fallback_alt: fall back alt text if non set on image in admin
* src_set_type: optional parameter used to reduce the srcset generation to speed up page perf
- 'grid'
- 'full-width'
- if unset a comprehensive src set range will be used
{%- endcomment -%}
{%- liquid
if tag_name == blank
assign tag_name = "img"
endif
if fallback_width == blank
assign fallback_width = 320
endif
if lazy
assign src_attr = "data-src"
assign src_set_attr = "data-srcset"
else
assign src_attr = "src"
assign src_set_attr = "srcset"
endif
if src_set_type == "grid"
# Assumption: even with a 2-per row grid on large screen, grid item will not be more than 700px @2x wide
assign src_set_widths_raw = "150,200,240,280,300,360,400,450,500,550,600,650,700,750,800,850,900,950,1000,1100,1200,1300,1400"
elsif src_set_type == "full-width"
# Assumption: even smallest phone will be 350px @ 2x = 700 at least
assign src_set_widths_raw = "700,750,800,850,900,950,1000,1100,1200,1300,1400,1500,1600,1800,2000,2200,2400,2600,2800,3000,3500,4000,4500,5000,5500,6000"
else
assign src_set_widths_raw = "100,150,200,240,280,300,360,400,450,500,550,600,650,700,750,800,850,900,950,1000,1100,1200,1300,1400,1500,1600,1800,2000,2200,2400,2600,2800,3000,3500,4000,4500,5000,5500,6000"
endif
assign src_set_widths = src_set_widths_raw | split: ','
assign src_set_string = ""
-%}
{%- liquid
if object_fit != "contain" and aspect_ratio != blank and aspect_ratio != 'natural'
if aspect_ratio == "portrait"
assign crop_height_ratio = 1.5
elsif aspect_ratio == "landscape"
assign crop_height_ratio = 0.666666
elsif aspect_ratio == "square"
assign crop_height_ratio = 1
elsif aspect_ratio == "portrait_alt"
assign crop_height_ratio = 1.25
elsif aspect_ratio == "landscape_alt"
assign crop_height_ratio = 0.8
elsif aspect_ratio == "landscape_wide_alt"
assign crop_height_ratio = 0.5625
endif
endif
assign image_crop = "center"
if focal_alignment != blank and focal_alignment != "center"
assign image_crop = focal_alignment
endif
-%}
{%- for width_string in src_set_widths -%}
{%- assign width = width_string | plus: 0 -%}
{% if image.width < width %}
{% break %}
{% endif %}
{%- if crop_height_ratio and focal_point != "image_presentation" -%}
{%- assign crop_height = width | times : crop_height_ratio -%}
{%- if image.height < crop_height -%}
{% break %}
{%- endif -%}
{%- endif -%}
{%- capture src_set_string -%}
{%- if src_set_string.size > 0 -%}{{ src_set_string }},{{ ' ' }}{%- endif -%}
{%- if crop_height_ratio and focal_point != "image_presentation" -%}
{{ image | image_url: width: width, height: crop_height, crop: image_crop }} {{width}}w
{%- else -%}
{{ image | image_url: width: width }} {{width}}w
{%- endif -%}
{%- endcapture -%}
{%- endfor -%}
{% capture alt %}{% if image.alt.size > 0 %}{{ image.alt }}{% else %}{{ fallback_alt }}{% endif %}{% endcapture %}
<{{ tag_name }}
alt="{{ alt | escape }}"{{ ' ' }}
class="image__img{%- if class_name -%} {{ class_name }}{%- endif -%}"{{ ' ' }}
{% unless prioritize_loading %}loading="lazy"{{ ' ' }}{% endunless %}
width="{{ image.width }}"{{ ' ' }}
height="{{ image.height }}"{{ ' ' }}
{% unless tag_name == "source" %}{{ src_attr }}="{{ image | image_url: width: fallback_width }}"{{ ' ' }}{% endunless %}
{% if media %}media="{{ media }}"{{ ' ' }}{% endif %}
{{ src_set_attr }}="{{ src_set_string }}"{{ ' ' }}
sizes="{{ sizes }}"
onload="javascript: this.closest('.image').classList.add('loaded')"
/>
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024