CRITICAL PATH GENERATOR

Critical path generator tools using node oe the web browser.

Web browser script

Extract critical CSS path for the current viewport in the current page.

Using modules

<script type="module">
  import {parse, render} from 'https://esm.sh/@tbela99/css-parser/web';
  import {extract} from 'https://esm.sh/tbela99/critical/browser';

  const result = await extract({ fonts: true });
  // css is optimized using https://www.npmjs.com/package/@tbela99/css-parser
  // pretty print css
  const css = await parse(results.styles.join('\n')).then(result => render(result.ast, {minify: false}).code);

  console.debug(css);

</script>

Without using modules

<script src="./dist/browser-umd.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tbela99/css-parser/dist/index-umd-web.js"></script>
<script>
  
  const {parse, render} = CSSParser;
  const {extract} = critical;

  const result = await extract({fonts: true});
  // optimize and pretty print css
  const css = await parse(results.styles.join('\n')).then(result => render(result.ast, {minify: false}).code);

  console.debug(css);

</script>

Options

• options: object
  • fonts: bool? generate Javascript to load web fonts dynamically
  • html: bool? generate an HTML page containing inlined critical css
  • signal: AbortSignal? abort critical extraction using AbortSignal

Limitations

The web browser script is subject to the same origin policy and CSP. This can prevent the script from reading external stylesheets.

Node script

Generate critical CSS path from your nodejs script

import {critical} from "@tbela99/critical";

const urls = [
    'http://github.com',
    'https://docs.npmjs.com/cli/v8/configuring-npm/package-json#directories'
];

urls.forEach(async url => critical(url, {
    html: true,
    console: true,
    screenshot: true,
    secure: false,
    // dimensions can be specified as an array of string or object
    dimensions: ['1400x900', '1200x675', '992x558']
}).then((results) => {

    // print extracted CSS
    console.log(results.styles.join('\n'));
}));

Node script options

• options: object

  browser settings

  • headless: bool. start the browser in headless mode. default true
  • browser: string. browser to use [choices: "chromium", "firefox", "webkit", "edge", "chrome"] default "chromium"
  • browserType: string. use a desktop or mobile browser [choices: 'desktop', 'mobile']
  • randomBrowser: use a random web browser
  • randomUserAgent: bool. use a random user agent

  runtime settings

  • container: bool. turn off additional security features, required to run inside a container
  • secure: bool. enforce browser security features such as CSP and same origin policy. default false

  screenshots settings

  • screenshot: bool. generate screenshot for each viewport mentioned. default false
  • colorScheme: string. force a color scheme [choices: 'dark', 'light']
  • filename: string. prefix of the generated files
  • width: int. viewport width. default 800
  • height: int. viewport height. default 600
  • dimensions: array or string. array of viewports. this takes precedence over height and width. viewports can be specified as objects with width and height property or a string.

  output settings

  • html: bool. generate an HTML page containing the inlined critical css
  • output: string. change output directory. default './output/'
  • fonts: bool. generate javascript to load web fonts. default true

  debugging settings

  • console: bool. log console messages from the pages. default true
  • verbose: bool. enable verbose mode

Command line script

when installed globally, it is available as critical-cli

$ sudo npm install -g @tbela99/critical
$ critical-cli -i http://google.com

Usage

$ critical-cli [options+] url [url+]
run the command line tools:
Example: critical-cli -d 800x600 -d 1024x768 -i https://facebook.com

Options:
      --version        Show version number                             [boolean]
  -t, --headless       enable or disable headless mode [boolean] [default: true]
  -b, --browser        browser to use
  [string] [choices: "chromium", "firefox", "webkit", "edge", "chrome"] [default
                                                                   : "chromium"]
  -k, --browser-type   use a mobile browser
                                         [string] [choices: "mobile", "desktop"]
  -r, --randomBrowser  use a random browser           [boolean] [default: false]
  -i, --screenshot     Generate screenshots                            [boolean]
  -s, --secure         enable or disable security settings such as CSP and same
                       origin policy                                   [boolean]
  -m, --color-scheme   color scheme
                           [string] [choices: "light", "dark"] [default: "dark"]
  -o, --output         Output directory                                 [string]
  -n, --filename       prefix of the generated files                    [string]
  -w, --width          Viewport width                                   [number]
  -a, --height         Viewport height                                  [number]
  -d, --dimensions     Array of viewports, override height/width settings[array]
  -f, --fonts          Generate javascript to load fonts dynamically   [boolean]
  -l, --console        Show console messages from the browser          [boolean]
  -c, --container      Disable additional security settings to run inside a cont
                       ainer                                           [boolean]
  -p, --html           Generate an HTML page containing inlined critical css
                                                                       [boolean]
  -v, --verbose        Enable verbose mode            [boolean] [default: false]
  -h, --help           Show help                                       [boolean]

Example

$ critical-cli https://github.com/ https://nodejs.org --secure=no -i -d '1440x900' -d '1366x768'

CHANGELOG

V1.0.0

• converted to typescript
• changed default export to es module
• optimized generated css (merge rule, remove duplicate, minify, generate nested css)
• specify color scheme [dark/light]