Critical CSS generator
A free browser-widget for an advanced critical CSS generator and above-the-fold optimizer. A tool to achieve a pixel perfect result with the minimum CSS possible.
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,
to the favorites bar or copy & paste the code below.x.pagespeed.pro
to persist settings across domains and to use the widget offline or on localhost
.Above-the-fold optimizer
Critical CSS generator and above-the-fold optimizer
The Critical CSS generator enables to resolve Google's Core Web Vitals remove unused-CSS penalty purely on the basis of minimum CSS.
Features
Advanced critical CSS generator
- Custom developed based on PostCSS, one of the best CSS parsers.
- Supports multiple-viewports (desktop + mobile) for responsive critical CSS.
- Puppeteer like browser control including click, mouse events (hover, move etc), scrolling, custom javascript code execution and much more.
- Raw non-optimized pure critical CSS output.
Above-the-fold optimizer
- Compare critical CSS with the original CSS.
- Customizable pixel measure rulers.
Advanced optimization tools
- Unused CSS remover to remove critical CSS from stylesheets.
- Professional CSS compression (minify) and optimization software.
- Broken CSS repair. A tool to fix malformed CSS.
- Autoprefixer. A tool to apply browser prefixes to CSS.
- CSS statistics and analytics.
- CSS beautify.
- Advanced CSS lint.
- Duplicate CSS remover.
- 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.
Configure the JSON using the options in the the documentation.
Step 3: optimize the result
The output of the critical CSS generator is raw and requires further optimization such as compression.
The Optimize button in the editor menu enables to apply advanced code optimization and compression.
Documentation
Critical CSS generator
The critical CSS generator accepts the following options.
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"
}
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.
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.
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