CODEWITHSUNDEEP
htmlcssloadingrender-blocking
user4867030
user4867030

Reputation:

What will be the best way to load CSS async?

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>

Upvotes: 1

Views: 8382

Answers (1)

Suresh Karia
Suresh Karia

Reputation: 18208

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 -

Upvotes: 4

Related Questions