Preload Styles and Scripts to Improve Load Times

In a world of heavy websites that take up way too much bandwidth, there has never been a more important time to make sure your website loads as quickly as possible (it also affects SEO and conversion rates). One way to improve your website’s load time is to preload stylesheets and scripts that you don’t absolutely need right away, so that the browser can focus on displaying content to the user as quickly as possible.

If you have a largely content-driven, HTML website, this should be pretty easy. However, if you’re running a single-page web app, it may be a little trickier to know what you can preload and what you’ll need right away—it all depends on the project. Either way, the way to do it will be the same and that’s what I’ll be going over.

Overview

The only thing we need to do is to tell the browser what resource we want to preload using a link tag, and then asynchronously load a JavaScript file (which is also preloaded) that will do the actual loading.

In your document’s <head> tag, you’ll preload stylesheets like this:

<link rel="preload" href="/css/fonts.css" as="style">
<link rel="preload" href="/css/main.css" as="style">

Note the rel="preload" and the as="style" attributes. For JavaScript files, you’ll use as="script" instead:

<link rel="preload" href="/js/main.js" as="script">

This only tells the browser what we want to preload and it’ll begin downloading them in the background as the rest of the webpage loads. You can also preload “image”, “media”, and “document” assets as well.

Next, we’ll need to do the heavy lifting that will allow us to actually use the preloaded assets.

Asynchronous JavaScript

In the previous example, we marked the “main.js” script to be preloaded, so now, at the end of your <body> tag, lets load the script asynchronously:

<script async src="/js/main.js"></script>

This JavaScript file will be responsible for loading the other styles, and this <script> tag will make sure it loads asynchronously, thus not blocking the loading of the rest of the webpage.

main.js

function loadStyleTag(path) {
    var tag = document.createElement("link");
    tag.href = path;
    tag.rel = "stylesheet";
    tag.type = "text/css";
    tag.media = "bogus";
    tag.onload = function () {
        tag.media = "all";
    };
    document.getElementsByTagName("head")[0].appendChild(tag);
}

loadStyleTag("/css/fonts.css");
loadStyleTag("/css/main.css");

This file is pretty straight-forward. We define a function loadStyleTag() that creates a new link tag for the specified script and appends it to the document’s <head>. This all happens after the webpage has loaded, so everything you put here is something that’s not going to block the page load.

No JavaScript

Since we are relying on JavaScript to use stylesheet assets, we need to handle the case where the user has JavaScript turned off so your website isn’t broken for them. Somewhere in your <head> tag, add a <noscript> section that loads the stylesheets normally:

<noscript>
    <link rel="stylesheet" href="/css/fonts.css">
    <link rel="stylesheet" href="/css/main.css">
</noscript>

Conclusion

While you need to be selective about what you choose to preload so the user experience isn’t drastically affected (e.g. long flash of unstyled content), this is yet another tool you can leverage—at your discretion—to help improve your website’s load times.

For this website, I chose to preload my main stylesheet as well as the one that handles the loading of web fonts. Since those resources are cached, the user may see a brief flash of unstyled content the first time they visit, but subsequent page loads should be fine. To me, my purely content-based HTML website, I think it’s an okay trade-off to be able to “let the user in quicker” so to speak.

For more detailed information on the Preload spec, this article on Smashing Magazine goes a lot more in-depth.

HostGator $3.96

$3.96 for web hosting – used by jonbeebe.net. Get started today.