<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>
Is there a way of preloading JS files and load them in Asynchronous way?