
Show HN: What CSS does your site actually need at launch? - runnr_az
https://whatcss.info
======
nikajon_es
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)?

~~~
runnr_az
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

------
gitgud
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

~~~
runnr_az
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.)

------
robin_reala
None? A progressively enhanced page should work in the absence of site-
supplied CSS ok (even if it might not be the prettiest experience).

~~~
alzoid
The purpose of this tool is to identify the minimal amount of CSS needed to
render a page, for users who have enabled.

It helps by reducing the file size and the browser overhead parsing /
rendering the CSS.

