Interesting, I've always wondered when a tool like this would be made.
Another improvement I thought would be cool is to intelligently find similarities in CSS classes and combine them into logical shared classes... but it could be very problematic
Thx for checking it out -- consider it a beta...
... As for CSS classes, I think that clean-css does some of that. (Honestly, that's way outside my area of expertise... it's a good idea though.)
Do you think it would be interesting to analyze CSS across a few pages? I've created base CSS files that can cover a few pages, knowing that some elements won't be on all pages, but that the CSS document is cached so it makes sense to send everything down at once.
Or is this more for a launch page (or one-site website)?
Right now, this is more of a proof of concept than anything... I wanted to see if it's really possible to use Puppeteer like this to capture CSS usage, get some real user feedback on how to proceed.
Totally open to suggestions. I guess in a perfect world, you could eventually use this to totally capture all of the CSS you use on a single page and reduce it if you were just doing a single launch-type page and working with Bootstrap. In more complicated cases, the goal is to provide just the basic CSS your site needs to render quickly, then allow you to defer the rest.
The next thing on my ToDo list is to try to capture CSS usage at all the standard breakpoints and combine that into a single "critical path" css file
6 comments
[ 7.2 ms ] story [ 32.1 ms ] threadIt helps by reducing the file size and the browser overhead parsing / rendering the CSS.
Another improvement I thought would be cool is to intelligently find similarities in CSS classes and combine them into logical shared classes... but it could be very problematic
Or is this more for a launch page (or one-site website)?
Totally open to suggestions. I guess in a perfect world, you could eventually use this to totally capture all of the CSS you use on a single page and reduce it if you were just doing a single launch-type page and working with Bootstrap. In more complicated cases, the goal is to provide just the basic CSS your site needs to render quickly, then allow you to defer the rest.
The next thing on my ToDo list is to try to capture CSS usage at all the standard breakpoints and combine that into a single "critical path" css file