A performance case for {{ block.index }}

[rubenbristian]

Some time ago Shopify introduced {{ section.index }} property, which was a huge performance boost, because theme developers can now disable lazyloading of above-the-fold assets and fetch them with priority. There are more complex sections though, that require the use of {{ section.index }} along with {{ block.index }} property in order to determine what elements are actually above the fold, from within the same section. A perfect example of this is the slideshow - while you want to load the first slide's image as fast as possible, you still want to preload the other ones.

With theme blocks this is impossible, and a huge performance drawback. Basic logic like:

  if section.index == 1 and forloop.index <= 2
    assign preload = true
  else
    assign preload = false
  endif

Doesn't work anymore in the new architecture. That's one of the biggest reasons why {{ block.index }} is required. There are more, but at least do it for performance.

[mxstbr]

There is a workaround for section-level theme blocks:

{%- assign block_index = section.blocks | find_index: 'id', block.id -%}

However, that doesn't work for nested blocks. We'll take a look at this at some point!

[rubenbristian]

This workaround is perfect! At least for section level theme blocks it would fix the performance issues, if the slide is a direct descendant of the section. But it would be very useful if it would be extended to nested blocks.