What will be the best way to load CSS async?
I have nine different CSS files. My website will not load until browser downloads all the CSS files. Most of CSS not even needed for home page. In JavaScript you can do like <script async>,
but for stylesheets, what will be best solution?
I have searched found following articles Code Pen
They recommend to use
<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>
Answer
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 -