Remove unused CSS with PurgeCSS
When building a web app, we often use our go-to CSS framework (bootstrap, tailwindcss…) that comes with a lot of useful stuff that normalizes and speeds up our UI building process. Frameworks also come with a lot of baggage, a lot of it. Most of our UIs are not super complex and we don’t use the majority of the CSS frameworks we use. Even when we build and implement your own Design System from scratch, you always will have unused CSS in any given project or application.
PurgeCSS is a great way to optimize your final output to only contain the CSS you need and used. In my simple apps, I’ve implemented PurgeCSS, and I’ve seen between 70-90% final CSS size decrease and a significant render time decrease.
PurgeCSS works with most javascript bundlers and web build tools. It also comes with its own CLI tool. My go-to use case is their seamless integration with TailwindCSS in NextJS builds. Here is a nice guide and the example github repo I put when I was playing with this.
Related Posts
- 3 min readUsing Ant Design as our primary react.js UI framework
- 3 min readAnalyze and Optimize Webpack Bundles Size and Contents
- 2 min readOptimize your bundle size by eliminating dead code / tree-shaking in Webpack
- 9 min readAstro vs WordPress: A Performance Comparison After Migrating My Blog
- 2 min readIntro to Cloudflare Workers
- 4 min readMetrics to pay attention to, when optimizing web page performance
Share