TABLE OF CONTENTS:

Enhanced Default Lazy Loading for Liquid's image_Tag

Introducing New Liquid Section Properties for Enhanced Contextual Rendering

Leveraging New Section Properties: Examples and Code

Asynchronous CSS Loading Based on Section Index

Optimizing Large Image Sections with Fetch Priority

Simplified Code (Using Default Lazy Loading):

Drawing to a Close: A Recap

We are thrilled to announce two exciting additions to the Liquid API, designed to enhance web performance:

1. Default Lazy Loading for image_tag Beyond the Fold:

Experience default lazy loading for the image_tag, specifically targeting sections further down the page. This feature optimizes the loading of images beyond the initial view, contributing to more efficient web performance.

2. New Section Properties for Fine-Tuning:

Explore the newly introduced section properties, including section.index, section.index0, and section.location. These properties offer more granular control over image lazy loading and asynchronous CSS loading, addressing specific web performance challenges related to layout position.

These innovations were strategically developed to address three key web performance issues associated with layout position:

• Lazy loading of images positioned above the fold.
• Asynchronous loading of CSS is required for elements above the fold.
• Prioritizing the fetch of the Largest Contentful Paint (LCP) image.

For a comprehensive understanding of the underlying concepts behind these issues, refer to our recent article, "How Layout Position Impacts Three Significant Web Performance Levers." In this post, we will delve into:

• The implementation of new default lazy loading for Liquid's image_tag.
• The introduction of the powerful liquid section properties.
• Illustrative examples and code snippets demonstrate the practical use of these section properties.

Enhanced Default Lazy Loading for Liquid's image_tag

Previously, Liquid's image_tag lacked default logic for the img loading attribute. Now, a significant improvement has been introduced: any image_tag beyond the initial three sections of a template will automatically apply loading="lazy" if the loading attribute is not explicitly set (refer to docs).

The current logic, subject to potential adjustments based on real user data, aims to optimize performance across all Shopify storefronts. The primary objective is to avoid lazy loading of images positioned above the fold, ultimately enhancing the user experience and preventing a slower Largest Contentful Paint (LCP).

To leverage this new feature, incorporate the image_tag filter for your images without explicitly setting the loading attribute. Below is an example illustrating the behavior:

Input:

{{ section.settings.image | image_url: width: 300 | image_tag }}

Output for the First Three Sections (subject to potential logic changes):

<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 enhancement provides a streamlined approach to theme code simplification, particularly beneficial for themes where no more than three sections inside your template or content_for_layout are positioned "above the fold." For those requiring more nuanced control or preferring to avoid potential default algorithm changes, new section properties have been released.

Each browser uses a different algorithm for lazy image loading, which depends on things like the image's type and effective connection speed. Explore Chrome's thresholds in their source code. Gain further insights into native lazy loading with "Browser-level image lazy loading for the web."

Introducing New Liquid Section Properties for Enhanced Contextual Rendering

In our recent exploration of Shopify pages, we discovered that a significant 82.4% employ lazy loading for their Largest Contentful Paint (LCP) image. One contributing factor to this commonality is the lack of contextual information available to theme developers regarding a section's location during rendering. Today, we are excited to present three new properties that address this challenge (docs):

1. section.index represents the 1-based index of the section within its contextual location.
2. section.index0 represents the 0-based index of the section within its contextual location.
3. section.location signifies the section's location, also synonymous with its context or scope.

Understanding section.location:

Before delving into the index properties, it's crucial to comprehend the concept of location. Sections can be rendered in various locations, with most residing in the template. Additionally, sections can be rendered within section groups, such as headers, footers, asides, and custom-named groups.

• When a section is within the template, its section.location is labeled as "template."
• If a section is within a section group, its section.location adopts the section group type (e.g., header, footer, aside, or custom-named).

A standard layout typically includes a header section group, the template (content for the layout), and a footer section group. However, there's one more location type known as "static" for statically rendered sections, which exist outside templates and section groups. If a legacy theme still utilizes content_for_index, the location will be identified as "content_for_index."

Understanding section.index and section.index0:

Both index and index0 are integer values representing the order or index of the section within its location. To maintain consistency with previous liquid features, index follows a 1-based approach, while index0 adopts a 0-based approach.

In other words, the index restarts within each location or context. For instance, consider a page layout with various sections in different locations:

• Header group
• Announcement banner section
• Nav bar section
• Static section
• Template
• Image with text section
• Another image with text section
• Featured articles section
• Footer group
• Footer section

Here are the corresponding location, index, and index0 values:

Section	Location	Index	Index0
Announcement banner	Header	1	0
Nav bar	Header	2	1
Static section	Static	nil	nil
Image with text	Template	1	0
Another image with text	Template	2	1
Featured articles	Template	3	2
Footer	Footer	1	0

Important Note: Both index and index0 are nil under specific circumstances:

• For statically rendered sections.
• For sections rendered using the Section Rendering API,.
• When rendering the Online Store Editor,.

The Online Store Editor opts for fast rendering by re-rendering only the updated section. In this context, providing a consistent index becomes challenging, leading to both index and index0 being forced to nil. It's crucial to utilize these features for non-visual purposes, such as optimizing loading speed for real users.

Leveraging New Section Properties: Examples and Code

Before delving into the examples, it's crucial to note that lazy loading should be applied selectively, focusing on images below the fold or those becoming visible upon user interactions. For consistently visible images, such as main product images, eager loading is recommended.

Lazy Loading Based on section.index

The default behavior sets loading to lazy for images after the first three sections. The following example overrides this behavior, setting it to lazy after the first two sections:

liquid

{%- liquid

  if section.index > 2

    assign loading = "lazy"

  else

    assign loading = "eager"

  endif

-%}

{{

  section.settings.image

  | image_url: width: 1080

  | image_tag: loading: loading

}}

Asynchronous CSS Loading Based on section.index

Late-arriving CSS causing layout shifts is a common issue. To use the async CSS hack while limiting its impact, apply it to sections further down the page using section.index:

liquid

{% 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

When dealing with sections listing multiple items using a forloop, a more intricate check is needed. Consider the following example:

liquid

{% for item in section.items %}

  {%- liquid

    if section.index > 2 or forloop.index <= 3

      assign loading = "eager"

    else

      assign loading = "lazy"

    endif

  -%}

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

{% endfor %}

Adapting this logic based on the theme's desktop column configurations is advisable. Testing variations and assessing performance using tools like WebPageTest can refine the approach for optimal results.

Optimizing Large Image Sections with Fetch Priority

Caution: The fetch priority feature is potent but should be used cautiously after thorough testing, as misuse can lead to performance degradation.

Certain sections, especially image banners with large images, are likely to be the Largest Contentful Paint (LCP) element. Considering this, setting fetchpriority="high" for these sections, especially if they are among the first in a template, can potentially expedite LCP rendering.

Advanced Implementation:

liquid

{%- liquid

  assign loading = "eager"

  assign fetchpriority = "auto"

  if section.index == 1

    assign fetchpriority = "high"

  elsif section.index > 2

    assign loading = "lazy"

  endif

-%}

{{

  section.settings.image

  | image_url: width: 1080

  | image_tag:

    loading: loading,

    fetchpriority: fetchpriority

}}

Simplified Code (Using Default Lazy Loading):

liquid

{%- liquid

  assign fetchpriority = "auto"

  if section.index == 1

    assign fetchpriority = "high"

  endif

-%}

{{

  section.settings.image

  | image_url: width: 1080

  | image_tag: fetchpriority: fetchpriority

}}

Use the simplified version if you leverage default lazy loading, ensuring optimal performance while expediting LCP for crucial sections.

Drawing to a Close: A Recap

As we wrap up, we are delighted to introduce these latest liquid features, designed to streamline the development of faster themes. The direct correlation between faster themes, accelerated store performance, and heightened conversion rates is undeniable. Your feedback and success stories are invaluable to us, and we eagerly anticipate hearing more about your experiences with these enhancements. Thank you for being a part of our journey towards optimizing the Shopify theme development experience.

Contact Us

Should you ever find yourself in need of further guidance, remember that at Webinopoly, we are here to be your reliable companions. Our dedication to navigating the intricate world of e-commerce remains unwavering. Our team of skilled professionals is available around the clock, poised to assist with any inquiries and offer tailored solutions that perfectly align with your unique requirements. Whether you're embarking on a new journey or continuing on your established path, consider us your steadfast partners in your pursuit of success. Settling for anything less than exceptional support would be a disservice to your ambitions. Let Webinopoly take the lead in transforming your journey into an unmatched and extraordinary experience!