Remove Lazy Loading for all above the fold content on Origin theme

beckstam
Shopify Partner
6 0 0

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.

beckstam_0-1684636522687.png

 

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…">

Replies 10 (10)

Zqdo
Shopify Partner
803 32 63

When you go to theme.liquid, and check the <head> section, can you see loading="lazy" in there?

 

Let me know. Thanks.

banned
beckstam
Shopify Partner
6 0 0

No, it isn't there.

Zqdo
Shopify Partner
803 32 63

Do you have a link to your website so I can check it out?

banned
beckstam
Shopify Partner
6 0 0
Zqdo
Shopify Partner
803 32 63

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!

banned
beckstam
Shopify Partner
6 0 0

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!

Zqdo
Shopify Partner
803 32 63

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.

banned
beckstam
Shopify Partner
6 0 0

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!

 

beckstam_0-1684893063979.png

beckstam_1-1684893131662.png

 

 

Zqdo
Shopify Partner
803 32 63

Can you send me an email at zqdo.tech@gmail.com? Let's see if we can fix this issue.

banned
Sash
Tourist
4 0 1

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&amp;width=320" srcset="//skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&amp;width=700 700w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&amp;width=750 750w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&amp;width=800 800w" sizes="100vw" onload="javascript&colon; 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&colon; this.closest('.image').classList.add('loaded')"
/>