Enhancing Web Performance with New Liquid API Features

In the ever-evolving landscape of web development, optimising performance is a continuous challenge to ensure you stay on top of Core Web Vitals and provide a great experience for your customers.

New Features for Web Performance:

Default Lazy Loading for Liquid image_tag:

In a significant enhancement, the Liquid image_tag now incorporates default lazy loading for images found past first three sections of a template/page. This improvement aims to optimise the loading attribute for images, preventing unnecessary lazy loading above the fold, which can lead to a suboptimal user experience and slower Largest Contentful Paint (LCP) and impact your site speed performance.

To implement this feature, we can now simply use the image_tag filter for images without setting the loading attribute. The Liquid API will automatically set loading="lazy" for images in sections beyond the initial three. This streamlines theme code and improves performance without manual intervention.

While this default behaviour caters to many scenarios, we also now have the ability to flexibly fine-tune lazy loading using the newly introduced Liquid section properties.

New Liquid Section Properties:

To address web performance issues related to layout position, Shopify has introduced three new section properties:

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: Represents the section's location or context, which can be template, header, footer, aside, custom.<name>, or static.

These properties provide contextual information about the location and order of a section. Understanding these properties is crucial for optimising lazy loading and asynchronous CSS loading based on a section's position.

Understanding Section Location:

Before diving into the details of section.index and section.index0, it's crucial to understand the concept of section.location. Sections can be rendered in various locations, including templates, header/footer section groups, or as static sections. The section.location property specifies the context in which a section is rendered, enabling us to make informed decisions based on its location. Armed with these new section properties, we can implement targeted optimisations for lazy loading and CSS loading.

Use cases:

By leveraging the location or index of a section, we can do things beyond a simple lazy vs eager loading attribute. Other exampled could include:

1. Dynamically setting an image's fetchpriority attribute to fetch an image quicker if it's above the fold (or lower it's priority if it's off the page)
2. If you have a collection product grid and know you have three products per row and the first row generally renders above the fold, you can query both the section.index to ensure it's at the top of the page, and then the forloop.index of the product grid to lazyload images on the second row onwards.

‍
The introduction of these new Liquid API features by Shopify provides us with more powerful tools to enhance the web performance of our client's storefronts. By incorporating default lazy loading for images and introducing section properties, Shopify empowers developers to make informed decisions based on the context and location of each section. These features not only simplify theme code but also contribute to faster loading times, ultimately improving user experience and conversion rates. As developers explore and implement these features, Shopify looks forward to receiving valuable feedback and success stories from the community.