penthouse

It's worth noting that penthouse's last release is a few weeks shy of 3 years ago (https://github.com/pocketjoso/penthouse/releases/tag/v.2.3.3). Given there seem to be few other Critical CSS tools out there, its utility in driving web performance, and the fact Google's web.dev recommended tool (https://github.com/addyosmani/critical) uses penthouse under the hood, I'm surprised there isn't more effort and/or sponsorship going into helping maintain it.

Addy Osmani's Critical package > Critical extracts & inlines critical-path (above-the-fold) CSS from HTML https://github.com/addyosmani/critical Penthouse, the OG of Critical CSS generators > Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page https://github.com/pocketjoso/penthouse > Above the fold is an arbitrary definition because it varies by device I mean, sure. But your critical path of CSS is never going to mean the whole page (unless it's a very short page). And skeleton components is objectively a completely different thing. Having definitions, even if "arbitrary," are important.

It is easy with a little automation :). In the build process, adding a step to calculate critical path css helps. This should probably be the last step and run on production post deploy. The calculated CSS is stored in redis which will be appended in the head for subsequent requests. This tool had inspired me to build this process at multiple orgs I have worked with https://github.com/pocketjoso/penthouse. Agree on the async JS part but I guess browser makers will solve it soon.

This is neat. Few other tools that do the same job: - PurifyCSS https://github.com/purifycss/purifycss - Google Chrome dev tools https://www.labnol.org/internet/remove-unused-css/28635/ - Firefox https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage - Penthouse a critical path CSS generator https://github.com/pocketjoso/penthouse - uncss https://www.npmjs.com/package/uncss