What will be the best way to load CSS async?

Question

I have nine different CSS files. My website will not load until the browser downloads all the CSS files. Most of CSS is not even needed for the home page. In JavaScript you can do like <script async>,

but for stylesheets, what will be the best solution?

I have searched and found the following articles Code Pen

keithclark.co.uk

They recommend using

  <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

or

 <head>
        <!-- head content -->
        <link rel="stylesheet" href="style.css" media="bogus">
    </head>
    <body>
        <!-- body content -->
        <link rel="stylesheet" href="style.css">
    </body>

The question might sims interesting but one thing is for sure that we must not load our css async because its nature is to override rules by cascading. the name itself suggests that it is **Cascading** style sheet. http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css — Suresh Karia, Jan 27 '17 at 05:23
I am getting alert from google [pagespeed](https://developers.google.com/speed/pagespeed/insights/) tool "Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking script resources and 13 blocking CSS resources. This causes a delay in rendering your page." — , Jan 27 '17 at 15:04

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

By default, CSS is treated as a render blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

-- Google Developers

By default, CSS is treated as a render blocking resource.
Media types and media queries allow us to mark some CSS resources as non-render blocking.
The browser downloads all CSS resources, regardless of blocking or non-blocking behavior.

CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.

However, what if we have some CSS styles that are only used under certain conditions, for example, when the page is being printed or being projected onto a large monitor? It would be nice if we didn’t have to block rendering on these resources.

CSS "media types" and "media queries" allow us to address these use cases:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

By using media queries, we can tailor our presentation to specific use cases, such as display versus print, and also to dynamic conditions such as changes in screen orientation, resize events, and more. When declaring your style sheet assets, pay close attention to the media type and queries; they greatly impact critical rendering path performance.

Let's consider some hands-on examples:

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">

The first declaration is render blocking and matches in all conditions.
The second declaration is also render blocking: "all" is the default type so if you don’t specify any type, it’s implicitly set to "all". Hence, the first and second declarations are actually equivalent.
The third declaration has a dynamic media query, which is evaluated when the page is loaded. Depending on the orientation of the device while the page is loading, portrait.css may or may not be render blocking.
The last declaration is only applied when the page is being printed so it is not render blocking when the page is first loaded in the browser.

Source - Render blocking CSS -

there's a new browser feature called Preload (aka rel=preload) that allows us to start fetching our CSS but prevent it from blocking. At the moment it's only supported on Chrome but it can be polyfilled on other browsers.See recommended usage in the [polyfill docs](https://github.com/filamentgroup/loadCSS#recommended-usage-pattern). Your code for this will look something like this: — , Jan 31 '17 at 16:24
I'm finding that when I use the rel="preload" technique Muhammad's talking about, the stylesheet is downloaded more efficiently. But when I test my pages in the dev tools performance tab, the chart shows the browser is parsing the stylesheet twice. Not necessarily a killer, but an unexpected behaviour that may affect your page performance. — And Finally, Oct 19 '17 at 10:17

What will be the best way to load CSS async?

1 Answers1