critical-css-inliner

> Critical-css-inliner allows you to extract and inline critical (above-the-fold) CSS in HTML page.
> It might be helpful to speed up First Contentful Paint.

How it works

1. Critical-css-inliner finds all external stylesheets ().
2. It extracts critical CSS (above-the-fold).
3. It inlines critical CSS in HTML page.
4. It removes critical CSS from external stylesheets.
5. It makes external stylesheets asynchronous (using loadCSS)

Critical-css-inliner uses Critical-css-parser under the hood, so IT ALSO SUPPORTS ADAPTIVE DESIGN (BOTH DESKTOP AND MOBILE VERSIONS)!

Comparison with other popular libraries

Critical-css-inliner | Critical
---------------------------------------------------------|-------------------------------------------------------
execution time: 7.4 s | execution time: 4.7 s
result: correct | result: wrong
|
inlined: 15.8 KB (less is better) | inlined: 16.4 KB (less is better)
auto extracting: true | auto extracting: true

Critters | Penthouse
---------------------------------------------------------|-------------------------------------------------------
execution time: 3.5 s | execution time: 3.5 s
result: correct | result: wrong
|
inlined: 15.2 KB (less is better) | inlined: 4.7 KB (less is better)
auto extracting: false | auto extracting: false

---
Appropriate webpack plugin: webpack-critical-css-inliner

---

Installation

``sh
npm install --save-dev critical-css-inliner

// or

yarn add --dev critical-css-inliner
`

Docs

`js
const criticalCSSInliner = require('critical-css-inliner');

await criticalCSSInliner({
// Your entrypoint
base: 'dist/',

// HTML source file
src: 'index.html',

// HTML target file
target: 'index-critical.html',

// Add Google Fonts to critical CSS
inlineGoogleFonts: true,

// Minify all styles
minify: true,

// ignore styles from the following stylesheets
ignoreStylesheets: [/bootstrap/],

// inline styles with the following CSS rules
whitelist: /#foo|\.bar/

});
`

Example

`js
const criticalCSSInliner = require('critical-css-inliner');

(async () => {

await criticalCSSInliner({
base: 'dist/',
src: 'index.html',
target: 'index-critical.html',
inlineGoogleFonts: true,
minify: true,
ignoreStylesheets: [/bootstrap/],
whitelist: /#foo|\.bar/
});

})();
`

---

Usage

$3

Pass options to criticalCSSInliner({ ... }).

$3

`>``

---

License

MIT license