8 ms·

I 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 Puppete

I 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.

promiseofbeans 1y ago
Is the code somewhere? This seems like it'd be really useful as a Vite/Astro plugin
- cAtte_ 1y ago
  yeah, doing this manual copy-paste process every time you change something would count as cruel and unusual punishment
  - stevenpotts 1y ago
    hehe, I know... I should think about that, I got tons of visits but unsure this is worthwhile since it appears it's not that useful for most people?
al_borland 1y ago
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.
- stevenpotts 1y ago
  interesting! thanks!
jefozabuss 1y ago
What was the problem with something like https://www.npmjs.com/package/penthouse https://www.npmjs.com/package/penthouse ?
- deleted 1y ago
  [deleted]
- robotfelix 1y ago
  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 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 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.
indeyets 1y ago
Is it the UI for penthouse lib? Settings look very similar :)
- stevenpotts 1y ago
  it's based on penthouse, honestly, the most "difficult" part of this was setting up CloudRun with docker to get puppeteer to work and be able to wait whatever amount of time the user needed and netlify functions, I tried using tools like https://criticalcss.com/generate https://criticalcss.com/generate but they just didn't work because of the lack 'waiting' I guess

promiseofbeans 1y ago

Is the code somewhere? This seems like it'd be really useful as a Vite/Astro plugin

cAtte_ 1y ago
yeah, doing this manual copy-paste process every time you change something would count as cruel and unusual punishment
- stevenpotts 1y ago
  hehe, I know... I should think about that, I got tons of visits but unsure this is worthwhile since it appears it's not that useful for most people?

al_borland 1y ago

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.

stevenpotts 1y ago
interesting! thanks!

jefozabuss 1y ago

What was the problem with something like https://www.npmjs.com/package/penthouse https://www.npmjs.com/package/penthouse ?

deleted 1y ago
[deleted]
robotfelix 1y ago
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 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 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.

indeyets 1y ago

Is it the UI for penthouse lib? Settings look very similar :)

stevenpotts 1y ago
it's based on penthouse, honestly, the most "difficult" part of this was setting up CloudRun with docker to get puppeteer to work and be able to wait whatever amount of time the user needed and netlify functions, I tried using tools like https://criticalcss.com/generate https://criticalcss.com/generate but they just didn't work because of the lack 'waiting' I guess