ABVanton200 / critical-css-inliner

Inline critical CSS in HTML page using Puppeteer and Critical-css-parser

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 (<link rel="stylesheet" href="...">).
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

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

// or

yarn add --dev critical-css-inliner

Docs

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

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

criticalCSSInliner

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

criticalCSSInliner({...}) returns:

<Promise<true>>

---

License

MIT license