Critical CSS generator

A free browser-widget for an advanced critical CSS generator and above-the-fold optimizer.

Above-the-fold optimizer

Critical CSS generator and above-the-fold optimizer

Introduction

The Critical CSS generator enables to resolve Google's Core Web Vitals remove unused-CSS penalty, purely on the basis of minimum CSS. It enables to achieve a pixel perfect result.

The best critical CSS result is achieved in a real browser.

The browser widget is executed on the page on which critical CSS is to be extracted and therefore has full native access to the original CSS environment.

You can select the stylesheets or inline stylesheet elements from which to extract critical CSS. This is handy to create critical CSS that can be shared between pages.

The browser widget also has a feature to remove critical CSS from stylesheets.

The tool is spy-free. No Google Analytics or tracking. Safe to use and can be used locally through a Service Worker cache.

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

Install

To install the widget, drag this link🗔 Critical-CSS to the favorites bar or copy & paste the code below.

Optional Authorize Service Worker and Cache-API for Google CDN secured domain x.pagespeed.pro to persist settings across domains and to use the widget offline or on localhost.

Features

Advanced critical CSS generator
1. Custom developed based on PostCSS, one of the best CSS parsers.
2. Supports multiple-viewports (desktop + mobile) for responsive critical CSS.
3. Puppeteer like browser control including click, mouse events (hover, move etc), scrolling, custom javascript code execution and much more.
4. Raw non-optimized pure critical CSS output.
Above-the-fold optimizer
1. Compare critical CSS with the original CSS.
2. Customizable pixel measure rulers.
Advanced optimization tools
1. Unused CSS remover to remove critical CSS from stylesheets.
2. Professional CSS compression (minify) and optimization software.
3. Broken CSS repair. A tool to fix malformed CSS.
4. Autoprefixer. A tool to apply browser prefixes to CSS.
5. CSS statistics and analytics.
6. CSS beautify.
7. Advanced CSS lint.
8. Duplicate CSS remover.
9. Advanced CSS editor connected to CSS lint with optimization tips.

How to use

Step 1: start the browser widget on a page

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

Step 2: generate critical CSS

The critical CSS generator can be accessed via the Tools tab in the header.

Critical CSS generator and above-the-fold optimizer

Configure the JSON using the options in the the documentation.

Critical CSS generator and above-the-fold optimizer

Step 3: optimize the result

The output of the critical CSS generator is raw and requires further optimization such as compression.

Critical CSS generator and above-the-fold optimizer

The Optimize button in the editor menu enables to apply advanced code optimization and compression.

Critical CSS generator and above-the-fold optimizer

Documentation

Critical CSS generator

The critical CSS generator accepts the following options.

Option

Description

Type

atRulesToKeep

An array of CSS @ rules (string or regular expression) to forcefully include in the Critical CSS.

["media", "charset", "/rule(.*)/i"]

atRulesToRemove

An array of CSS @ rules (string or regular expression) to forcefully remove from the Critical CSS.

["media", "charset", "/rule(.*)/i"]

selectorsToKeep

An array of CSS selectors (string or regular expression) to forcefully include in the Critical CSS.

[".selector", "/\\.selector(.*)/i"]

selectorsToRemove

An array of CSS selectors (string or regular expression) to forcefully remove from the Critical CSS.

[".selector", "/\\.selector(.*)/i"]

propertiesToKeep

An array of CSS declarations (string or regular expression) to forcefully include in the Critical CSS. To match values, use a 2nd level array with the declaration string or regex at index 0 and the value string or regex at index 1.

["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]

propertiesToRemove

An array of CSS declarations (string or regular expression) to forcefully remove from the Critical CSS. To match values, use a 2nd level array with the declaration string or regex at index 0 and the value string or regex at index 1.

["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]

pseudoSelectorsToKeep

An array of CSS pseudo selectors (string or regular expression) to forcefully include in the Critical CSS.

[":before", "/:nth-child(.*)/i"]

pseudoSelectorsToRemove

An array of CSS pseudo selectors (string or regular expression) to forcefully remove from the Critical CSS.

[":before", "/:nth-child(.*)/i"]

maxElementsToCheckPerSelector

A maximum amount of elements to check for above the fold visibility. This setting can impact the speed of the generator.

false or 100

maxEmbeddedBase64Length

The maximum size in bytes of Base64 encoded inline images to include in the Critical CSS.

1000

strictParser

By default, the CSS is parsed using the fault tolerant PostCSS Safe Parser that automatically fixes syntax errors. This setting enables to use the strict parser.

true

ui_actions

An array of actions to perform on the UI state to discover above-the-fold CSS code. See UI actions documentation below.

[{"viewport":"360x640"}, {"run": true}]

Show example config

Example Critical CSS generator config

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Set viewport for above-the-fold CSS discovery."
    },
    {
      "wait": 1000,
      "notes": "Wait for 1000ms to enable the viewport to render."
    },
    {
      "run": true,
      "notes": "Run critical CSS generator (above-the-fold CSS calculation)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Fire new MouseEvent on a.nav-menu DOM element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Execute a script, in this case close the menu before continuing with next viewport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI actions of the Critical CSS generator

The critical CSS generator provides Puppeteer-like browser control. The ui_actions parameter accepts an array with UI action objects that define UI state changes in chronological order.

`run`

Run the critical CSS generator on the current UI state. This action needs to be repeated each time the UI state has changed in order to discover new above-the-fold CSS code.

{
  "run": true
}

`wait`

Wait for a number of milliseconds before continuing with the next action.

{
  "wait": 1000
}

`viewport`

Set the viewport size.

{
  "viewport": "1300x900"
}

`scroll`

Scroll the viewport. The option accepts a numeric value (pixels from top), a percentage string (50%) or an array with [x,y] positions in pixels.

{
  "scroll": 400
}

`event`

Trigger a browser event (new Event()) on an optional DOM selector.

{
  "event": "click",
  "selector": "a.link"
}

`mouseevent`

Trigger a mouse event (new MouseEvent()) on an optional DOM selector. The action accepts a mouseEventInit parameter with MouseEvent options which includes the ability to set the x,y coordinates. When mouseEventInit is omitted, the default options are {"bubbles": true,"cancelable": true}.

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

`script`

Evaluate javascript code. This action enables to execute javascript code on a page, e.g. to close popups before making further UI state changes.

{
  "script": "Popups.close();"
}

`fn`

Execute a javascript function. This action enables to execute a pre-configured javascript function. The extra option "promise":true enables to expect a promise and wait for the promise to resolve before continuing with the next action.

{
  "fn": "action_to_perform",
  "promise": true
}

`notes`

Each action object accepts a notes parameter that can be used to add descriptive text.

{
  "script": "add_to_cart();",
  "notes": "description of UI action for personal use"
}

Show example config

Example UI actions config

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Set viewport for above-the-fold CSS discovery."
    },
    {
      "wait": 1000,
      "notes": "Wait for 1000ms to enable the viewport to render."
    },
    {
      "run": true,
      "notes": "Run critical CSS generator (above-the-fold CSS calculation)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Fire new MouseEvent on a.nav-menu DOM element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Execute a script, in this case close the menu before continuing with next viewport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Unused CSS remover

The unused CSS remover uses the same software as the critical CSS extractor and accepts almost the same configuration options, including Puppeteer-like browser control through UI actions. The tool also enables to extract unused CSS.

Show example config

Example config of unused CSS remover

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Duplicate CSS remover

The duplicate CSS remover makes it possible to compare two stylesheets and remove or extract the duplicate CSS.

Show example config

Example config of duplicate CSS remover

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

The second input field accepts the stylesheet index number. You can find the index of a stylesheet on the stylesheet overview on the settings tab.

Stylesheet index overview

You can upload a stylesheet or compare stylesheets from external URL(s) by creating a new stylesheet. You can then import URLs or upload the stylesheets and use the index from the new stylesheet in the duplicate CSS remover.

Import or upload stylesheets

Once configured, press the button to start the duplicate CSS remover. A CSS comment will display basic statistics of the resulting reduced CSS.

Result of duplicate CSS remover