critical

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.

The introduction of the shadow DOM API changed the semantics of the link element. If the link element is placed inside of the shadow DOM, then it's not render blocking and you will experience a flash of unstyled content. That's what the lit docs are referring to. I've mentioned this because you originally joined this comment chain with a comment about putting link elements inside the shadow DOM. If you place the link element inside the head of your document, then it is render blocking, which means the browser has to make two round trips to the server if the CSS file isn't in the cache before it can render (one to download the HTML file, and then another after it discovers your link element, and has to download the corresponding CSS file). > The best from both worlds is to embed a lightweight basic CSS stylesheet inline and the rest in cac

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.

I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering. The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/. And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/. The easiest way to generate Critical CSS is https://github.com/addyosmani/critical where you may suggest multiple resolutions. I have found https://github.com/addyosmani/critical-path-css-tools to be a great resource to master critical path CSS which improves page render speeds. It helps build fast rendering sites, sometimes even sub-second renders given you have a low latency backend.

Check out https://github.com/zeit/next.js/ https://github.com/addyosmani/critical