Unveiling Enhanced Liquid Features for Optimal Web Performance

Table of content:

• Introduction
• Default Lazy Loading for Liquid image_tag Beyond the Fold
• Introducing New Liquid Section Properties for Fine-Tuning
• Practical Use Cases and Code Examples
• Conclusion

Introduction

In our relentless pursuit of web performance excellence, we are excited to introduce two groundbreaking features to the Liquid API, designed to elevate the speed and efficiency of Shopify stores. These features address specific web performance issues related to layout position, offering improved lazy loading for images and enhanced control over asynchronous CSS loading. Let’s dive into the details of these new capabilities.

Default Lazy Loading for Liquid image_tag Beyond the Fold

Previously, Liquid’s image_tag lacked default logic for the loading attribute, leaving it to developers to implement. Now, any image_tag beyond the first three sections of a template will automatically set loading="lazy" if the attribute is not explicitly defined. This intelligent default behavior is designed to enhance user experience by avoiding lazy loading for images above the fold, ensuring a smoother Largest Contentful Paint (LCP).

To leverage this feature, utilize the image_tag filter for your images and refrain from setting the loading attribute. For example:

<!-- Input -->
{{ section.settings.image | image_url: width: 300 | image_tag }}

<!-- Output for first three sections -->
<img
  src="//cdn.shopify.../files/dog.jpg?width=300"
  width="300"
  height="393" />

<!-- Output for all remaining sections -->
<img
  src="//cdn.shopify.../files/dog.jpg?width=300"
  loading="lazy"
  width="300"
  height="393" />

This feature simplifies theme code, assuming your sections are generally large enough to keep the first three inside the fold. However, for more nuanced control, we introduce new section properties.

Introducing New Liquid Section Properties for Fine-Tuning

Understanding the contextual position of a section during rendering is crucial for optimizing lazy loading and CSS performance. We introduce three new section properties:

• section.index: 1-based index of the section within its contextual location.
• section.index0: 0-based index of the section within its contextual location.
• section.location: The section’s location, such as template, header, footer, aside, custom.<name>, or static.

Exploring Section Location

Before delving into the index properties, it’s essential to grasp the concept of section location. Sections can be rendered in various locations, such as template, header, footer, or custom groups. The section.location property signifies the section’s context or scope, aiding in targeted optimization.

Understanding section.index and section.index0

Both index and index0 are integers representing the order of the section within its location. The 1-based index and 0-based index0 ensure consistency with previous Liquid features. In scenarios where the index is nil, it applies to statically rendered sections, sections using the Section Rendering API, or when rendering in the Online Store Editor.

Practical Use Cases and Code Examples

Lazy Loading an Image Based on section.index

To selectively apply lazy or eager loading based on the section index, use the following code:

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{
  section.settings.image
  | image_url: width: 1080
  | image_tag: loading: loading
}}

Asynchronously Loading CSS Based on section.index

To tackle layout shifts due to late-arriving CSS, consider the following example:

    {% if section.index > 2 %}
  <link
    rel="stylesheet"
    href="{{ 'section-image-banner.css' | asset_url }}"
    media="print"
    onload="this.media='all'">
  <noscript>
    {{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
  </noscript>
{% else %}
  {{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{% endif %}

Considerations for Card Lists

For sections listing multiple items, employ a more complex check using both section.index and forloop.index:

{% for item in section.items %}
  {%- liquid
    if section.index > 2 and forloop.index > 3
      assign loading = "lazy"
    else
      assign loading = "eager"
    endif
  -%}

  {{ item.image | image_url | image_tag: loading: loading }}
{% endfor %}

Setting fetchpriority for LCP Optimization

For sections likely to be the LCP element, adjust the fetchpriority:

{%- liquid
  assign fetchpriority = "auto"
  if section.index == 1
    assign fetchpriority = "high"
  endif
-%}

{{
  section.settings.image
  | image_url: width: 1080
  | image_tag: fetchpriority: fetchpriority
}}

Conclusion

These new Liquid features empower developers to create faster and more efficient Shopify themes. By understanding section context and utilizing these properties, themes can be optimized for real users’ loading speed. We invite your feedback and eagerly await your success stories. Together, let’s build faster and more responsive Shopify experiences.