Style.Tools
DevTools for FEO
DevTools for frontend optimization
Critical CSS generator
Style.Tools is a free CSS optimization browser-widget that provides access to an advanced critical CSS generator based on PostCSS.
Style.Tools can be started with 1 click on any page on the internet, including pages behind a login. To install the widget, drag the below link to the browser toolbar.
Start Style.Tools🔬 FEO (drag the link to the favorites bar to install the widget)
Demo:
The Critical CSS generator provides the best possible result and enables to resolve Google's Core Web Vitals remove unused-CSS penalty purely on the basis of minimum CSS.
Features:
- multiple-viewport support (desktop + mobile in a combined critical CSS output)
- 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 (not a single piece of code will be removed for a purpose other than the removal of irrelevant code for the
above the fold-view.) - advanced Unused CSS remover: remove critical CSS from stylesheets.
- PostCSS is the best CSS parser and supports malformed CSS and can automatically repair CSS.
- 100% pure JSON config: copy & paste advanced critical CSS generator config to generate advanced critical CSS in a few seconds.
- apply professional CSS optimization software to the raw critical CSS output with 1 click for an optimized result (minimum size and pixel perfect quality).
- innovative
above the fold-tester enables to quickly test the critical CSS output.
The critical CSS generator is based on PostCSS and can provide 100% accuracy for complex designs. The generator provides Puppeteer-like browser control that enables discovery of CSS that may be applicable by browser activity such as scripts, events and scrolling.
Information | Usage documentation | UI actions
How to use
The advanced critical CSS generator can extract critical CSS in a few seconds on any page on the internet. The following animated gif shows a demo.
Step 1: start Style.Tools on a page
Navigate to the page for which you want to extract critical CSS and start the Style.Tools browser widget. Click here for installation instructions.
Step 2: configure
The critical CSS generator can be accessed via the Tools tab in the header. The generator can be configured using JSON. Click here for documentation.
Step 3: optimize the result (optional)
The output of the critical CSS generator is raw and requires further optimization such as compression. The Style.Tools widget provides access to advanced CSS code optimization tools that can be applied with 1 click.
