Menu
In HTML5 script tags can be loaded async via async=true
<script src="index.js" type="text/javascript" async="true"></script> Is there any equivalent for CSS resources? something like:
<link rel="stylesheet" type="text/css" async="true" href="style.css"> The rationale is to make the browser to load the css, and cache it, for later requests, but let the rest of the process unblocking. On, say, a splash screen.
745
To load CSS Files asynchronously in both Chrome and Firefox, we can use “preload” browser hint and “media='print'” attribute along with onload event feature in a ordered way. you may use the codes below to load CSS Files without render-blocking resources features in Firefox and Chrome.
Unlike JavaScript, CSS doesn't have a native way to load it asynchronously. There's no async or defer attributes for link elements the way there are for script elements. In the past, I used to use a JavaScript helper function, loadCSS from Filament Group, for this.
The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
"Async=true", when supported by browser, basically means: browser will load script asynchronous and will execute it when it prefer.
2021 edit: Original link moved - async CSS without JavaScript https://codepen.io/tigt/post/async-css-without-javascript
"It seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets."
<head> <!--[if IE]> <link rel="stylesheet" href="style.css"> <![endif]--> </head> <body> <!--[if !IE]> --> <link rel="stylesheet" href="style.css" lazyload> <!-- <![endif]--> </body> The article also contains benchmarks:
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
