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>