'Load <link> tags async with guaranteed order

After running Google PageSpeed, recommended that I use async or defer for my CSS content

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 6 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

So I am exploring the async attribute on the <link> tag

<link rel="stylesheet" href="{{asset "css/bootstrap.min.css"}}">
<link rel="stylesheet" href="{{asset "css/font-awesome.min.css"}}">
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}">
<link rel="stylesheet" type="text/css" href="{{asset "css/highlight_styles/rainbow.css"}}">

Now if I add a async attribute to the above <link> tags, I am worried that the CSS will not load in order. Since css order does matter and order can not be guaranteed with async what are the other options?

Options I have considered:

  • Using the defer attribute guarantees the order, but it doesn't seem to be supported for the <link> Tag Documentation

  • To cat all my css together that way I can guarantee the order. However I was wondering if there was a way around this with multiple async <link> tags, as this would be a pain to do every time even with gulp/grunt.

  • I could probably write some fancy javascript to do this, but that just seems like overkill. (JS -> CSS -> JS would probably reduce any time saved).

Some references:

According to webkit order seems to be preserved for defer but not for async:

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

CSS Order Matters: Does the order of css stylesheet definitions matter?

W3C Documentation: <link> Tag only supports async and no mention of defer

htmlcssasynchronous


Solution 1:[1]

After further research it seems that a few of my assumptions were incorrect.

The link tag with type="import" can be async, but not the type="text/css"

The best alterantive I could find is to use a library called loadCSS, below is an example of how it is used:

<head>
    <script src="loadCSS.min.js"></script>
    <script>
        // load a file
        loadCSS("Styles-V6.min.css");
    </script>
</head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arian Faurtosh

Related Questions