Style.Tools, a free CSS optimization widget, provides access to two Critical CSS generators: Simple and Advanced.
The simple Critical CSS generator is based on a browser-trick that was originally published by Google engineer Paul Kinlan. The snippet uses a Chrome innovation called
getMatchedCSSRules that was deprecated and has been removed since Chrome 63.
The simple Critical CSS generator uses an enhanced version of the snippet and supports modern browsers via a polyfill for
getMatchedCSSRules. An added feature is the ability to set the viewport to support responsive designs.
The quality of the simple critical CSS generator is often not that well but it can provide a quick extract.
The advanced Critical CSS generator is based on PostCSS and can provide 100% accuracy for complex designs. The generator provides Puppeteer-like browser control that enables to discover CSS that may be applicable by browser activity such as scripts, events and scrolling.
The advanced generator is 100% JSON controlled which enables to easily re-use configuration so that in practice, an advanced extract of critical CSS can be done in a few seconds.
The generator goes a few steps further than Penthouse.js. It uses PostCSS instead of csstree for improved CSS parsing (for example: it accepts malformed CSS) and it is enhanced in many ways to provide a more accurate result.
What makes the generator truly different is that it outputs pure and unfiltered Critical CSS and does not apply any compression or optimization techniques. The output of the generator is thereby reliable. No CSS code goes missing without the control of the configuration.
Professional CSS code optimization solutions such as clean-css are also available in the CSS optimization widget and can provide perfect quality code optimization and compression. The final result is thereby better (better compression and more accurate) than that of other tools.
PageSpeed.PRO can provide the advanced Critical CSS generator as an automated solution based on Google Cloud infrastructure.
For information, visit https://pagespeed.pro/google-cdn/.