preload_
Generates an HTML <link> tag with a rel attribute of preload to prioritize loading a given Shopify-hosted asset.
The asset URL is also added to the Link header
with a rel attribute of preload.
You should use this filter sparingly. For example, consider preloading only resources necessary for rendering above-the-fold content. To learn more about preloading resources, refer to Performance best practices for Shopify themes.
Tip: If you want to preload a stylesheet, then use <a href="/docs/api/liquid/filters/stylesheet_tag"><code><span class="PreventFireFoxApplyingGapToWBR">stylesheet<wbr/>_tag</span></code></a>. If you want to preload an image, then use <a href="/docs/api/liquid/filters/image_tag"><code><span class="PreventFireFoxApplyingGapToWBR">image<wbr/>_tag</span></code></a>.
The input to this filter must be a URL from one of the following filters:
The filter also requires an as parameter
based on the kind of resource being preloaded.
Code
{{ 'cart.js' | asset_url | preload_tag: as: 'script' }}Output
Output
<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410" as="script" rel="preload">HTML attributes
You can specify HTML attributes by adding a parameter that matches the attribute name, and the desired value.
Code
{{ 'cart.js' | asset_url | preload_tag: as: 'script', type: 'text/javascript' }}Output
Output
<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410" as="script" type="text/javascript" rel="preload">