Inline critical-path css and load the existing stylesheets asynchronously
npm install inline-criticalInline critical-path css and load the existing stylesheets asynchronously.
Existing link tags will also be wrapped in so the users with javascript disabled will see the site rendered normally.
[![npm version][npm-image]][npm-url] [![Build Status][ci-image]][ci-url] [![Download][dlcounter-image]][dlcounter-url] [![Coverage Status][coveralls-image]][coveralls-url]
This module is installed via npm:
``bash`
npm install inline-critical
`js`
const inline = require('inline-critical');
const html = fs.readFileSync('test/fixtures/index.html', 'utf8');
const critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
const inlined = inline(html, critical);
`js
const inline = require('inline-critical');
const html = fs.readFileSync('test/fixtures/index.html', 'utf8');
const critical = fs.readFileSync('test/fixtures/critical.css', 'utf8');
const inlined = inline(html, critical, {
ignore: [/bootstrap/],
});
`
inline-critical works well with standard input.
You can either pass in the html
`bash`
cat index.html | inline-critical critical.css
or just flip things around
`bash`
cat critical.css | inline-critical index.html
or pass in the file as an option
`bash`
inline-critical critical.css index.html
without having to worry about the correct order
`bash`
inline-critical index.html critical.css
Run inline-critical --help to see the list of options.
- html is the HTML you want to use to inline your critical styles, or any other stylesstyles
- are the styles you're looking to inlineoptions
- is an optional configuration objectstrategy
- select the preload strategyextract
- will remove the inlined styles from any stylesheets referenced in the HTMLbasePath
- will be used when extracting styles to find the files references by href attributesignore
- ignore matching stylesheets when inlining.selector
- defines the element used by loadCSS as a reference for inlining.noscript
- specifies position of noscript fallback ('body' - end of body, 'head' - end of head, false - no noscript)replaceStylesheets
- takes an array of stylesheet hrefs to replace the original links in the document. (Used by critical when you extract uncritical css to a target file)
The mechanism to use for lazy-loading stylesheets.
_[JS]_ indicates that a strategy requires JavaScript (falls back to
- default: Move stylesheet links to the end of the document and insert preload meta tags in their place.
- "body": Move all external stylesheet links to the end of the document.
- "media": Load stylesheets asynchronously by adding media="print" and swap to media="all" once loaded (https://www.filamentgroup.com/lab/load-css-simpler/). _[JS]_rel="stylesheet"` once loaded. _[JS]_
- "swap": Convert stylesheet links to preloads that swap to
- "polyfill": Inject LoadCSS and use it to load stylesheets. _[JS]_
_Adopted from critters_
MIT
[npm-url]: https://www.npmjs.com/package/inline-critical
[npm-image]: https://img.shields.io/npm/v/inline-critical
[ci-url]: https://github.com/bezoerb/inline-critical/actions/workflows/test.yml?query=workflow%3ATests
[ci-image]: https://img.shields.io/github/actions/workflow/status/bezoerb/inline-critical/test.yml?branch=main&label=Tests&logo=github
[dlcounter-url]: https://www.npmjs.com/package/inline-critical
[dlcounter-image]: https://img.shields.io/npm/dm/inline-critical
[coveralls-url]: https://coveralls.io/github/bezoerb/inline-critical?branch=main
[coveralls-image]: https://img.shields.io/coveralls/github/bezoerb/inline-critical/main