Skip to main content

preload_tag

string | preload_tag: as: string
returns string

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 stylesheet_tag. If you want to preload an image, then use image_tag.

The input to this filter must be a URL from one of the following filters:

The preload_tag filter also requires an as parameter based on the kind of resource being preloaded.

{{ 'cart.js' | asset_url | preload_tag: as: 'script' }}

Output

<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410" as="script" rel="preload">
Anchor to HTML attributes

HTML attributes

string | preload_tag: as: string, attribute: string

You can specify HTML attributes by adding a parameter that matches the attribute name, and the desired value.

{{ 'cart.js' | asset_url | preload_tag: as: 'script', type: 'text/javascript' }}

Output

<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/cart.js?v=83971781268232213281663872410" as="script" type="text/javascript" rel="preload">
Was this page helpful?