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>