Load CSS asynchronously without render blocking.
Install with npm
npm i import-cssor
yarn add import-cssimport-css contains 3 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-and-body.jsalso uses<link>tag, but this variant a little lighter thanlink.jsbecause of restricted to use only in<body>. -
xhr.jsobviously uses XMLHttpRequest to load styles. For earlier loading start recommended to call this function only in<head>.xhr.jsvariant loads styles fully async and more faster (if started at<head>). But with<link>variant you have possibilities to include styles from other hosts without CORS. In IE and Edgexhr.jsloads styles in parallel unlike<link>variants.
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>index.html with xhr.js
<!DOCTYPE html>
<html>
<head>
<script>(xhr.js)</script>
<style>(critical css)</style>
<script>importCSS('section.css')</script>
<script>importCSS('footer.css')</script>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section>
<h1>Section</h1>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>