UI actions

Style.Tools

Style.Tools Github

Search…

CSS optimization widget

Critical CSS Generator

Usage

UI actions

Unused CSS Remover & Extractor

Duplicate CSS Remover

$async - async loader

$lazy - IntersectionObserver

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.
The ui_actions parameter accepts an array with UI action objects that define UI state changes in chronological order.
Available UI actions
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.
1
{
2
  "run": true
3
}
Copied!
wait
Wait for a number of milliseconds before continuing with the next action.
1
{
2
  "wait": 1000
3
}
Copied!
viewport
Set the viewport size.
1
{
2
  "viewport": "1300x900"
3
}
Copied!
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.
1
{
2
  "scroll": 400
3
}
Copied!
event
Trigger a browser event (new Event()) on an optional DOM selector.
1
{
2
  "event": "click",
3
  "selector": "a.link"
4
}
Copied!
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}.
1
{
2
  "mouseevent": "mouseover",
3
  "selector": "a.link",
4
  "mouseEventInit": {
5
    "bubbles": true,
6
    "cancelable": true
7
  }
8
}
Copied!
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.
1
{
2
  "script": "Popups.close();"
3
}
Copied!
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.
1
{
2
  "fn": "action_to_perform",
3
  "promise": true
4
}
Copied!
Adding notes
Each action object accepts a notes parameter that can be used to add descriptive text.
1
{
2
  "script": "add_to_cart();",
3
  "notes": "description of action"
4
}
Copied!
Example
1
{
2
  "ui_actions": [
3
    {
4
      "viewport": "360x640",
5
      "notes": "Set viewport for above-the-fold CSS discovery."
6
    },
7
    {
8
      "wait": 1000,
9
      "notes": "Wait for 1000ms to enable the viewport to render."
10
    },
11
    {
12
      "run": true,
13
      "notes": "Run critical CSS generator (above-the-fold CSS calculation)"
14
    },
15
    {
16
      "mouseevent": "click",
17
      "selector": "a.nav-menu",
18
      "notes": "Fire a new MouseEvent on a.nav-menu DOM element."
19
    },
20
    {
21
      "wait": 2000
22
    },
23
    {
24
      "run": true
25
    },
26
    {
27
      "script": "close_nav_menu();",
28
      "notes": "Execute a script, in this case close the menu before continuing with the next viewport."
29
    },
30
    {
31
      "viewport": "1300x900"
32
    },
33
    {
34
      "wait": 1000
35
    },
36
    {
37
      "run": true
38
    }
39
  ]
40
}
Copied!
​​
​​