How do I stop images above the fold on my home page from lazy loading? Dawn 13.0.1

Store Design
,
1

Webpagetest.org reports 2 images above the fold on my homepage are being lazy loaded. They are displayed from a featured collection. How do I prevent them from lazy loading? Dawn 13.0.1

killerpresets.com

2

I would make a theme duplicate, then go to sections/featured-collection.liquid, find the following code:

{% render 'card-product',

and modify it like so:

{% liquid
        assign lazy = true
        if section.index == 1 and forloop.index <=  section.settings.columns_desktop
          assign lazy = false
        endif
      %}
      {% render 'card-product',
        lazy_load: lazy,

This, basically will prevent first row of product cards from loading images lazy if it’s the first section on the page.

3

Thanks for replying. I couldn’t get this to work in WebPageTest results so I want to make sure I modified it correctly as shown below?

lazyloading.png
lazyloading.png737×343 8.79 KB

4

Nope, you’re changing it around line 116( https://github.com/Shopify/dawn/blob/a1173a39a0b45f98b7fa6d0e9a14bcb609d2d9f6/sections/featured-collection.liquid#L116) – this code shows placeholder products if no collection or empty collection.

You should modify around line 89 (https://github.com/Shopify/dawn/blob/a1173a39a0b45f98b7fa6d0e9a14bcb609d2d9f6/sections/featured-collection.liquid#L89)

Sorry I was not specific enough in my first post.

Updated recipe below:

Go to sections/featured-collection.liquid

Look for:

{% render 'card-product',
   card_product: product,

Change to:

{% liquid
        assign lazy = true
        if section.index == 1 and forloop.index <=  section.settings.columns_desktop
          assign lazy = false
        endif
      %}
      {% render 'card-product',
         card_product: product,
         lazy_load: lazy,

This should prevent first row of product cards from loading images lazy if it’s the first section on the page.

5

Thanks for the reply! Still getting the same message from WebPageTest. Here’s a shot of what I think is supposed to be correct placement of your code. I really appreciate your help.

lazy loading 3.jpg
lazy loading 3.jpg1318×587 92.3 KB

6

Sorry mate, again my mistake – the code should work if the section is first on the page, however, yours is the second one.

So you may try change the condition, like so

if section.index < 3 and forloop.index <=  section.settings.columns_desktop

Unfortunately, in liquid code you can’t properly predict whether element will be above fold or not, so this guesstimate is the best we can really do and sometimes it can backfire – force image loading even if they are below fold.

The alternative here is to add a setting to the section settings like “No lazy loading for the first XXX images” and fine tune it manually.

Since we are editing theme code anyway…

The changes would be like this:

From:

{% schema %}
  ...
  "settings": [

To:

{% schema %}
  ...
  "settings": [
    {
      "label": "Force loading first XXX product images",
      "id": "force_load",
      "type": "range",
      "min": 0,
      "max": 16,
      "step": 1,
      "default": 0,
      "unit":"pc"
    },

And from:

{% render 'card-product',
   card_product: product,

To:

{% liquid
        assign lazy = true
        if forloop.index <=  section.settings.force_load
          assign lazy = false
        endif
      %}
      {% render 'card-product',
         card_product: product,
         lazy_load: lazy,

Then in section settings set this to whatever the test is complaining about…