Shopify: Liquid Snippet for Loading CSS Asynchronously

Wed, 18 Oct 2023 22:30:00 +0300

Shopify recently added section.index to the Liquid API. This is a great addition that allows you to do things like selectively load CSS based on the section index. This is useful for things like loading CSS asynchronously, which can help improve your page speed scores.

If you want to load CSS asynchronously on Shopify, you can use this Liquid snippet:

css.liquid

 {%- liquid
 assign css = css | default: false
 assign section_index = section_index | default: 3
 -%}

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

Then, you can render this snippet in your theme with this code:

PageSpeed on OKCKnet

Shopify: Liquid Snippet for Loading CSS Asynchronously