Skip to content

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

License

Notifications You must be signed in to change notification settings

ABVanton200/critical-css-inliner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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