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)
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.
above the fold-view.)
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.
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.
Navigate to the page for which you want to extract critical CSS and start the Style.Tools browser widget. Click here for installation instructions.
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.
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.