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
When you go to theme.liquid, and check the 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?
Thanks!
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/1689840
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:
{% if image_above_fold %}
// Your image code without lazyload
{% else %}
// Your image code with lazyload
{% 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 zqdo.tech@gmail.com? 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.
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:
Optional:
img element, for instance picture or sourcesourceif 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”
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”
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’)”
/>