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 readKokoro.js: Minimal Text-to-Speech API Model for In-Browser Use
- 4 min read3 ways of redirections in react-router
- 4 min readCoolest WASM Superpowers in Your Browser
- 2 min readOptimize your bundle size by eliminating dead code / tree-shaking in Webpack
- 4 min readWordPress Headless + CPT + ACF: Building a Flexible Content Platform
- 5 min readGitHub Actions and Playwright to Generate Web Page Screenshots
Share