Usage

Advanced critical CSS generator

The configuration of the advanced critical CSS generator is 100% JSON and is availale in a JSON schema.

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.
[{"viewport":"360x640"}, {"run": true}]

Example configuration

1
{
2
"atRulesToKeep": [],
3
"atRulesToRemove": [],
4
"selectorsToKeep": [
5
"*",
6
"*:before",
7
"*:after",
8
"html",
9
"body"
10
],
11
"selectorsToRemove": [
12
"/\\#C/",
13
"/\\.chattxt/"
14
],
15
"propertiesToKeep": [],
16
"propertiesToRemove": [
17
"/(.*)transition(.*)/i",
18
"cursor",
19
"pointer-events",
20
"/(-webkit-)?tap-highlight-color/i",
21
"/(.*)user-select/i"
22
],
23
"pseudoSelectorsToKeep": [
24
"::before",
25
"::after",
26
"::first-letter",
27
"::first-line",
28
":before",
29
":after",
30
":first-letter",
31
":first-line",
32
":visited",
33
"/:nth-child.*/"
34
],
35
"pseudoSelectorsToRemove": [],
36
"maxElementsToCheckPerSelector": false,
37
"maxEmbeddedBase64Length": 1000,
38
"strictParser": false,
39
"ui_actions": [
40
{
41
"viewport": "360x640",
42
"notes": "Set viewport for above-the-fold CSS discovery."
43
},
44
{
45
"wait": 1000,
46
"notes": "wait for 1000ms to enable the viewport to render."
47
},
48
{
49
"run": true,
50
"notes": "Run critical CSS generator (above-the-fold CSS calculation)"
51
},
52
{
53
"mouseevent": "click",
54
"selector": "a.nav-menu",
55
"notes": "Fire new MouseEvent on a.nav-menu DOM element."
56
},
57
{
58
"wait": 2000
59
},
60
{
61
"run": true
62
},
63
{
64
"script": "close_nav_menu();",
65
"notes": "Execute a script, in this case close the menu before continuing with next viewport."
66
},
67
{
68
"viewport": "1300x900"
69
},
70
{
71
"wait": 1000
72
},
73
{
74
"run": true
75
}
76
]
77
}
Copied!

Setup

Start the πŸ“ Style.Tools browser widget (see introduction) and click on Tools (top) and Critical CSS Generator (menu-item).
Critical CSS menu
Select Advanced mode and configure the JSON using the options mentioned above.
Critical CSS generator configuration
The generator provides three output options:
  1. 1.
    replace the critical CSS <style> element
  2. 2.
    append to the critical CSS <style> element
  3. 3.
    download
Click the extract button to start the generator.

Optimizing the result

The output of the Critical CSS generator is raw and requires further optimization such as compression.
The critical CSS will contain a comment with basic statistics. In the example below for www.w3schools.com, the critical CSS output has a size of 29.69 kB, a reduction of 73.07% from the original CSS.
Raw Critical CSS output
The Optimize button in the editor menu enables to apply code optimization and compression. As you can see in the example below, the optimization further reduced the size to 15.87 kB, a reduction of 48.70% from the raw Critical CSS.
Optimized Critical CSS

Above the fold optimization

By comparing the Critical CSS View with the Original CSS View you can detect issues with the Critical CSS and optimize the critical CSS manually to achieve a pixel perfect result.
Above the fold optimization

UI actions

The advanced critical CSS generator provides Puppeteer-like browser control and enables to execute scripts, trigger events such as mouseover, control the scroll position and viewport size and more.
UI actions enables the critical CSS generator to provide a 100% accurate and reliable result.
​​
​
​
Last modified 1yr ago