Skip to content

Get critical (above-the-fold) and the rest CSS using Puppeteer

License

Notifications You must be signed in to change notification settings

ABVanton200/critical-css-parser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

critical-css-parser

minified size

Critical-css-parser allows you to receive critical (above-the-fold) and the rest CSS. It might be helpful to speed up initial rendering of a web page. More information.

There are 3 types of input information: HTML and CSS, URL and localServer.

Critical-css-parser uses Puppeteer and DropCSS under the hood, so IT ALSO SUPPORTS ADAPTIVE DESIGN (BOTH DESKTOP AND MOBILE VERSIONS)! It also supports minifying (by CSSO).


This library is part of other projects: critical-css-inliner, webpack-critical-css-inliner


Installation

npm install --save-dev critical-css-parser

// or

yarn add --dev critical-css-parser

Examples

URL

const criticalCSSParser = require('critical-css-parser');

(async () => {

    const result = await criticalCSSParser({
        type: 'URL',
        URL: 'https://abvcss.github.io/abvcss-website/', // try to check your site
        enableGoogleFonts: false,
        whitelist: /#foo|\.bar/
    });

    console.log(result.critical); // ''

    console.log(result.rest); // ':not(pre)>code[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{'

})();

localServer

const criticalCSSParser = require('critical-css-parser');

(async () => {

    const result = await criticalCSSParser({
        type: 'localServer',
        entrypoint: './www',
        filename: 'index.html',
        enableGoogleFonts: true
    });

    console.log(result.critical); // 'html{font-size: 10pt;}div{color: red;}'

    console.log(result.rest); // 'p{color: red;}'

})();

HTML and CSS

const criticalCSSParser = require('critical-css-parser');

const html = `
    <html>
        <head></head>
        <body>
            <p>Hello <a href="#">World!</a></p>
        </body>
    </html>
`;

const css = `
    .card {
        padding: 8px;
    }

    p:hover a:first-child {
        color: red;
    }
`;

(async () => {

    const result = await criticalCSSParser({
        type: 'HTML',
        html,
        css,
        minify: true // good way to optimize size
    });

    console.log(result.critical); // 'p:hover a:first-child{color:red}'

    console.log(result.rest); // '.card{padding:8px}'

})();

Usage

criticalCSSParser

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

Parameters

  • options

Properties

  • type String One of: HTML, URL or localServer. REQUIRED

  • html String Your custom html code (default: '') REQUIRED FOR type === HTML

  • css String Your custom css code (default: '') REQUIRED FOR type === HTML

  • URL String URL of the page you need to optimize (default: '') REQUIRED FOR type === URL

  • entrypoint String Root of your application (default: '') REQUIRED FOR type === localServer

  • filename String Your index file (default: 'index.html')

  • enableGoogleFonts Boolean Set true to except Google Font styles (default: false)

  • whitelist RegExp Whitelist of the critical CSS (default: /#fooBazBarAboveTheFold8917/)

  • minify Boolean Set true to minify resulting styles (default: false)

criticalCSSParser({...}) returns:

<Promise<{ critical, rest }>>

critical - above-the-fold CSS. These styles you can put into your <style> tag.

rest - other CSS. You can lazy-load the rest like this.


License

MIT license