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
- 4 min readXMLHTTPRequest vs. Fetch: Which JavaScript API Should You Use?
- 5 min readWhy People Are Moving from Next.js
- 2 min readOptimize your bundle size by eliminating dead code / tree-shaking in Webpack
- 4 min read3 ways of redirections in react-router
- 4 min readMetrics to pay attention to, when optimizing web page performance
- 1 min readA Beginner's Guide to HTML & CSS
Share