AssetPreload: For better performance, prefer using the preload_tag filter.

Technical Q&A
,
1

Hi All,

When i do “shopify theme check”, I am suggesed “AssetPreload: For better performance, prefer using the preload_tag filter.” for bellow line of code:

However i am unaware of how I can use preload_tag to generate this code.

If anyone has faced the same problem and have a solution, please provide me some insight.

Thanks in advance.

2

Just in case you haven’t already seen this

You’d need to ensure you add the fonts to your ‘assets’ folder within the theme and then insert code i.e.

{{ ‘pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2’ | asset_url | preload_tag: as: ‘font’ }}
{{ ‘pxiEyp8kv8JHgFVrJJfecg.woff2’ | asset_url | preload_tag: as: ‘font’ }}

3

Bonjour

Fais comme ça !

{%- unless settings.type_body_font.system? -%}

{{ settings.type_body_font | font_url | preload_tag: as: ‘font’, type: ‘font/woff2’ }}

{%- endunless -%}

{%- unless settings.type_header_font.system? -%}

{{ settings.type_header_font | font_url | preload_tag: as: ‘font’, type: ‘font/woff2’ }}

{%- endunless -%}

4

The above solution also requires the “crossorigin” attribute to function in this manner.

{{ settings.type_body_font | font_url | preload_tag: as: ‘font’, type: ‘font/woff2’, crossorigin: true }}