Load CSS asynchronously without render blocking in the given order.
npm i -S import-css # or yarn add import-cssimport-css contains 2 variants of importCSS function
-
link.jsvariant uses<link>tag. If you want to import multiple styles for "progressive loading" recommended move all function calls before</body>. -
link-in-body.jsalso uses<link>tag, but this variant a little lighter thanlink.jsbecause of restricted to use only in<body>.
Also exist *-async.js variants of both files, where you can import CSS outside of queue.
Files: link.js, link-in-body.js
Files: link-async.js, link-in-body-async.js
critical css
section, footer { display: none; }section.css
section { display: block; color: green; }footer.css
footer { display: block; color: red; }index.html with link.js
<!DOCTYPE html> <html> <head> <script>(link.js)</script> <style>(critical css)</style> </head> <body> <header> <h1>Header</h1> </header> <section> <h1>Section</h1> </section> <footer> <h1>Footer</h1> </footer> <script>importCSS('section.css')</script> <script>importCSS('footer.css')</script> </body> </html>