Critical CSS
critical-css-extractor.kigo.studio
Critical CSS
1–10 of 124 posts
Re: Critical CSS
#2I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work.
Feedback welcome, it's free for now.
Re: Critical CSS
#3[flagged]
Re: Critical CSS
#4I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work. Feedback welcome, it's free for now.
Is the code somewhere? This seems like it'd be really useful as a Vite/Astro plugin
Re: Critical CSS
#5I’ve been away for quite a while, so just a loud thinking.
With tools such as PostCSS, and servers serving zipped styles across CDN, maintaining a single request to the styles; does it really benefit from breaking up the styles these days?
Also, I’m going to assume, besides the core styles that run a website, anything that is loaded later can come in with its specific styles as part of the HTML/JS.
For the critical CSS thing, we used to kinda do it by hand with some automation more as a toolset to help us decide how much to include (inside the HTML itself - ``) and then insert the stylesheet. But then, we always found it better to set a Stylesheet Budget and work with it.
Re: Critical CSS
#6Nice 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 tags just before the closing 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:
Re: Critical CSS
#7Kind of funny that the agency that made this has a loader on their site.
Re: Critical CSS
#8I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work. Feedback welcome, it's free for now.
Is the code somewhere? This seems like it'd be really useful as a Vite/Astro plugin
yeah, doing this manual copy-paste process every time you change something would count as cruel and unusual punishment
Re: Critical CSS
#9Not working in Safari. Says ‘done’ but Generated CSS box remains empty
Re: Critical CSS
#10I searched online for tools to extract the critical css of a website for one of my clients, I couldn't find one that did the job so I did so after using Puppeteer locally and then decided to share the solution I used that let's you specify how long to wait after page load to extract the styles; even found a paid one but requested refund after it didn't work. Feedback welcome, it's free for now.
FYI: While a bit of an edge case, as I don’t know why anyone would do this realistically… If a site without CSS is passed, it throws an error.