Skip to main content

AssetPreload

Encourages preloading of assets using Liquid filters, rather than HTML attributes.

Preloading helps to make sure that critical assets are downloaded by the browser as soon as possible for better rendering performance.

Liquid provides multiple filters to preload key resources so they can be converted into Link headers automatically. This enables them to be discovered faster, especially when combined with early hints that Shopify supports.

Anchor to ExamplesExamples

The following examples contain code snippets that either fail or pass this check.

Anchor to ✗ Fail✗ Fail

<link href="{{ 'script.js' | asset_url }}" rel="preload" as="script" />
<link href="{{ 'style.css' | asset_url }}" rel="preload" as="style" />
<link href="{{ 'image.png' | asset_url }}" rel="preload" as="image" />

Anchor to ✓ Pass✓ Pass

{{ 'script.js' | asset_url | preload_tag: as: 'script' }}
{{ 'style.css' | asset_url | stylesheet_tag: preload: true }}
{{ product.featured_image | image_url: width: 600 | image_tag: preload: true }}

Anchor to OptionsOptions

The following example contains the default configuration for this check:

AssetPreload:
enabled: true
severity: warning
ParameterDescription
enabledWhether the check is enabled.
severityThe severity of the check.

Anchor to Disabling this checkDisabling this check

It's safe to disable this check. You might want to disable it if you need to preload assets from external domain, and it isn't possible to move them to Shopify because they change frequently or are dynamically generated.

Was this page helpful?