UnCSS: Remove unused styles from CSS
github.com
UnCSS: Remove unused styles from CSS
1–10 of 50 posts
Re: UnCSS: Remove unused styles from CSS
#2I wonder what the performance increase would be of loading one big CSS file on the first page load and serving from local cache from then on, vs loading a smaller but different CSS file for each page you visit.
My impression is that number of requests is a more critical optimization than file size (at least when serving CSS sized files)
Re: UnCSS: Remove unused styles from CSS
#3Finally! I've been wanting this for a decade - but not badly enough to try to build it myself.
Re: UnCSS: Remove unused styles from CSS
#4This is great! I'm happy to see PostCSS proving to be a creative platform for web development.
Re: UnCSS: Remove unused styles from CSS
#5I wonder what the performance increase would be of loading one big CSS file on the first page load and serving from local cache from then on, vs loading a smaller but different CSS file for each page you visit. My impression is that number of requests is a more critical optimization than file size (at least when serving CSS sized files)
From what I've heard, the answer depends greatly on whether we're talking http 1 or 2
Re: UnCSS: Remove unused styles from CSS
#6I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser.
That would have the advantage of supporting complex webapps written in any language/environment.
Re: UnCSS: Remove unused styles from CSS
#7I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser. That would have the advantage of supporting complex webapps written in any language/environment.
Sounds pretty similar to Dust-Me Selectors https://addons.mozilla.org/en-Us/firefox/addon/dust-me-selec...
Re: UnCSS: Remove unused styles from CSS
#8I wonder what the performance increase would be of loading one big CSS file on the first page load and serving from local cache from then on, vs loading a smaller but different CSS file for each page you visit. My impression is that number of requests is a more critical optimization than file size (at least when serving CSS sized files)
It's going to depend a lot on the type of site you're building.
Thankfully frontend pipelines like React + Webpack makes it fairly easy to test this out. We spiked out generating individual JS + CSS for each view but ultimately found it wasn't worth it - individual views amounted to very little code with the bulk of the filesize taken up by the common 'core' of our application, and dependencies. We scrapped this specific idea.
What we did end up doing, however, was create a seperate stylesheet just for things required on the very minimal landing page and inject that straight into the , which gave us significant speed improvements.
Re: UnCSS: Remove unused styles from CSS
#9I've been hoping someone would write a similar tool, but using a browser, so that I could run a webapp, click around (using a checklist, to cover all of the views) and get a resulting list of used CSS rules from the browser. That would have the advantage of supporting complex webapps written in any language/environment.
Ideally it would be a feature in the browser itself. Should be simple. The browser already handles the data. It only needs to dump it somewhere.
As important as what classes were used is what classes were in the HTML, but didn't exist.
Instead of manually clicking around a webapp, you could do a test suite. This gives another way to measure test coverage.
I assume we have to wait for a browser vendor to do this? I haven't seen any plugin/extension feature that reaches this stuff.
Then again, we have good open source browsers...
Re: UnCSS: Remove unused styles from CSS
#10How easy would it be to get this to work with something that spiders a site, so it generates a CSS file dynamically for a whole site instead of manually feeding it URLs?