Preload

Preload

Use am_preload for preloading assets of any supported type.

// `as` and `mime_type` options will be automatically added for CSS, but are included here for clarity.
am_preload(
  [
    'handle'    => 'preload-styles',
    'src'       => 'css/styles.css',
    'condition' => 'global',
    'version'   => '1.0.0',
    'as'        => 'style'
    'mime_type' => 'text/css',
  ]
);

Result:

<link rel="preload" href="http://client/css/test.css?ver=1.0.0" class="wp-asset-manager preload-styles" as="style" media="all" type="text/css" />

The am_preload function patches the as and mime_type option values for common use-cases (CSS, JavaScript and WOFF2 fonts), but will throw an error if the as option is missing for any other file type.

From the spec:

The [as] attribute is necessary to guarantee correct prioritization, request matching, application of the correct Content Security Policy policy, and setting of the appropriate Accept request header.

This function will also automatically add the crossorigin attribute for fonts, which is required when preloading fonts, even if they're not actually cross-origin requests.

Preload Options

Name	Description	Required	Default
handle	The handle for the asset	•
src	The URI for the asset	•
condition	The condition for which this asset should load		'global'
version	The asset version		'1.0.0'
as	The as attribute's value (info)	•
mime_type	The type attribute's value (info)	•
media	The media attribute value used to conditionally preload the asset		'all'