Show HN: What CSS does your site actually need at launch? | Hacker News Reader

Show HN: What CSS does your site actually need at launch?

whatcss.info

20 pointsrunnr_az6 comments

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

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

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

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.

Reply on news.ycombinator.com