Preloading resources (CSS & JS)

  • gabe

<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). Note that this option is rarely needed because CSS & JavaScript files are loaded in the right order and preloading the wrong file, can lead to broken functionality especially with JavaScript files. It has been implemented mostly for advanced users who know what they are doing.

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).

What about the CSS/JS files that aren’t enqueued? How can I preload them?

Sometimes, there are CSS/JS files that aren’t enqueued and are either hardcoded via action hooks such as “wp_head” or “wp_footer” or they are loading from JavaScript files (the JS files load first, then they have functions that dynamically load other CSS/JS files). As an example, we will consider LayerSlider, the WordPress plugin. There’s a chance Google PageSpeed Insights would also report it like in the print screen below:

To preload the resource, you can use the following snippet inside your functions.php file from your active theme (ideally the Child theme if you have one) which will be inserted by WordPress within the HEAD section of your website:

add_action('wp_head', function() {
  ?>
  <link rel="preload" as="style" data-no-minify="1" href="<?php echo site_url(); ?>/wp-content/plugins/LayerSlider/static/layerslider/skins/v5/skin.css" />
  <?php
});

Remember: If you have enabled Minify CSS in any plugin, including Asset CleanUp, please exclude this file from being minified/altered and have its path changed so the preload will still work. The data-no-minify attribute for WP Rocket (which is one of the most used caching plugins) has been applied to the snippet in case the LINK “preload” tags are taken into consideration besides the LINK “stylesheet” ones.

More resources about preloading CSS & JavaScript files:

Was this post helpful?