6 ms·
Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical s
by lelandfe 1y ago
Nice one. Would be cool if this also handled responsiveness. The need to dedupe responsive critical styles has made me resort to manually editing all critical stylesheets I've ever made.
I also see that this brings in CSS variable definitions (sorry, ~custom properties~) and things like that. Since critical CSS's size matters so much, it might be worth giving an option to compile all of that down.
> Place your original non-critical CSS <link> tags just before the closing </body> tag
I don't recommend doing this: you still want the CSS downloaded urgently, critical CSS is a façade. Moving to the end of body means the good stuff is discovered late, and thus downloaded late (and will block render if the preloader[0] discovers it).
These days I'd recommend:
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
[0] https://web.dev/articles/preload-scanner https://web.dev/articles/preload-scanner
- larodi 1y agothe prefetch attribute and other HTTP header hints, combined with proper CDN setups does almost the same. and would not require critical CSS to be nonstop rebuilt as the page develops. a properly configured CF is insanely fast.
- todotask2 1y ago> HTTP header hints Assume it's either 103 Early Hints or Resource Hints in HTTP/1.1 and 2.0.
- deleted 1y ago[deleted]
- Gabrys1 1y ago+1 on responsiveness
- worble 1y ago<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"> Wouldn't this be blocked by a CSP that doesn't allow unsafe-inline?
- deleted 1y ago[deleted]
- jy14898 1y agounsafe-hashes is a decent alternative
- youngtaff 1y agoI wouldn’t use the JS hack to load CSS… When the stylesheet loads and is applied to the CSSOM it’s going to trigger layout and style calculations for the elements it’s applied to maybe even the whole page Browsers are pretty eager at fetching stylesheets even those at the bottom of the page
- lelandfe 1y agoThat stylesheet application was going to happen anyway, the difference now is that FCP will occur before it. > Browsers are pretty eager at fetching stylesheets even those at the bottom of the page Browsers begin fetching resources as they discover them. For a big enough document, that will mean low placed resources will suffer.
- youngtaff 1y agoSure that work is going to happen but often what you see is multiple stylesheets loaded using the async hack which results in multiple style and layout calculations as the browser can coalesce them because it doesn’t know that they’re stylesheets or when they will arrive The whole philosophy of critical styles philosophy being those about the fold is a mistake in my view Far better to adopt approaches like those recommended by Andy Bell that dramatically reduces stylesheet size And do critical styles “correctly” i.e. load those that are needed to render the initial page and load the ones that rely on interactions separately
- stevenpotts 1y agoThere are definitely better ways, however, for some scenarios and time constraint, this tool was really useful, e.g., I used a template, since the budget was tight and it had 10,000 of lines of CSS and I had to do something quickly to improve UX and Lighthouse results, the template had bootstrap, revolution, etc.
- stevenpotts 1y agoyou are right, I will add this option, probably replace the 'before body' option, the 'DOMCONTENTLOADED' option has worked wonders for me, even tested it on old phones and slower connections, it's good enough for UX and Lighthousr