Unused CSS Extractor & Remover

The free CSS optimization widget provides access to an advanced unused CSS extractor and remover.

The unused CSS extractor uses the same technology as the Critical CSS generator and supports the same UI actions for Puppeteer-like browser control.

The unused CSS extractor provides three output options:

  1. remove unused CSS from a stylesheet

  2. extract unused CSS into a new stylesheet

  3. download

Usage

The unused CSS extractor provides two modes: Simple and Advanced.

Simple mode

Simple mode applies the default configuration based on the viewport size and scroll position defined by the Critical CSS window.

Advanced mode

Advanced mode provides many options for tuning the unused CSS extractor and PostCSS parser.

The configuration is 100% JSON and is available in a JSON schema.

Configuration

By default, the unused CSS extractor simply performs the unused CSS extractor process on the basis of the active Critical CSS window.

{
"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
}
]
}

The options enable to fine tune the PostCSS parser, what selectors and properties to preserve or to forcefully remove and the UI actions to perform during the unused CSS extraction process.

ui_actions accepts the same configuration as the Critical CSS generator.

Google Cloud based automation

PageSpeed.PRO can provide the advanced Unused CSS remover as an automated solution based on Google Cloud infrastructure.

For information, visit https://pagespeed.pro/google-cdn/.