<link rel=”preload”> instructs the browser to add the asset (CSS/JS) to the browser’s download queue as high priority. There are two options in which CSS/JS can be preloaded via Asset CleanUp:

1) Preload Type: Basic (CSS/JS)

This option will place the LINK preload attribute within the tag of the website and reference the existing stylesheet. It’s useful if you want the browser to download certain CSS/JS files as soon as possible (High Priority).

The generated link tag will be something like this:

<link rel="preload" as="style" href="/wp-content/plugins/woocommerce/assets/css/blocks/style.css?ver=1" />

The actual stylesheet for this file (rel=”stylesheet”), is loaded via the LINK tag (either within HEAD or BODY tags of the page):

<link id="handle-name-here-css" rel="stylesheet" href="/wp-content/plugins/woocommerce/assets/css/blocks/style.css?ver=1" />

For full support of this preload option, please check this link: https://caniuse.com/link-rel-preload

Note that if the browser doesn’t support it, it just won’t apply it. The functionality of the website won’t be affected.

2) Preload Type: Async (CSS only) – Pro version

If you want to force the browser to make a request to the resource without blocking the document’s onload event, which will load the CSS asynchronously and should increase your page speed score, you can choose the second option of preloading the stylesheet resource. The existing LINK tag will be altered like in the following example:

<link rel="preload" href="/wp-content/plugins/woocommerce/assets/css/blocks/style.css?ver=2" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/plugins/woocommerce/assets/css/blocks/style.css?ver=2"></noscript>

As the loading is done via JavaScript, there’s a fallback where the NOSCRIPT tag is used in case JavaScript is disabled for any reason, so the stylesheet resources will still be loaded as well as a fallback for browsers that do not natively support rel=”preload” provided by Filament Group: https://www.filamentgroup.com/lab/async-css.html

Is there a way of preloading JS files and load them in Asynchronous way?

You probably noticed that JS files only have “Yes, basic” as preload options. That’s because of their native support for “async” and “defer” attributes. You can enable preloading for a specific JavaScript asset, then apply “async” (you need the Pro version active for this option).

More resources about preloading CSS & JavaScript files:

Was this post helpful?