Remove Unused CSS in Django Project Using Grunt With UnCSS Plugin

Published in

Geek Culture

5 min readMar 6, 2021

Speed is very important for a website. It’s so important that Google has made it an actual ranking factor. That’s why performance plays a major role and there’s a term called “Performance Budget.”

Long story short: One of my clients hired a front-end developer, and he made the front-end code using TailwindCSS and took 20MB for resources. It was an insane library, but I admire TailwindCSS being one of the powerful CSS libraries out there.

There’s webpack, rollup, parcel, and many libs to optimize JS, CSS, or any assets in modern JS. I used all of them too.

But this time, I only need a simple task to Remove Unused CSS from the Django project.

I have tried PostCSS like what I used in CRA apps, but unfortunately, the plugin didn’t work perfectly. I got design issues because the CSS that is used is also being removed. And sometimes, there are still unused CSS found. When I used TailwindCSS with PostCSS plugin on CRA, it works perfectly.

So I decided to try another plugin called UnusedCSS, which is an alternative plugin to PostCSS. To run the plugin, I use grunt since it's only a simple job task.

Why Grunt?
Grunt can perform repetitive tasks very easily, such as compilation, unit testing, minifying files, running tests, etc. Grunt includes built-in tasks that extend the functionality of your plugins and scripts. The ecosystem of Grunt is huge; you can automate anything with very less effort. https://www.tutorialspoint.com/grunt/grunt_overview.htm

1. Pre-require site

Things to install: Nodejs, Grunt
Library to use: grunt-uncss, grunt-contrib-cssmin
OS: Please note that my default OS is macOS, so if you have a different OS, you can skip the installation process and google how to install the dependencies in your system. then, you can follow the step after the installation.

2. Installation

We first need to install NodeJS

$ brew install node 
$ node -v
v12.0.0
$ npm version
{
 npm: ‘6.9.0’,
....

Copy & Run Package.json

Then run npm install to install all of the packages in our directory.

npm install

Install grunt-cli global
We need to install grunt-cli as global since we run the grunt command from our terminal.

npm install -g grunt-cli

Update .gitignore

We need to update .gitigore and add node_modules and all related to it. So it won’t oversized our repository. 😆

node_modules
Gruntfile.js
package.json
package-lock.json

Note NodeJS only for the development stage; we won’t use it for the production stage.

2. Configuration

Create a file called “Gruntfile.js,” then you can copy this code and do some modification on the src and dest.

src: which uses as the sources input, we can’t use the path of our HTML files as our sources since it's not a static webpage. So we need to run the local server “python manage.py runserver” and put the URL of the page that we want to optimize.
dest: which uses to store the result of UnCSS.
options: ignoreSheets uses to ignore and not include specified stylesheets. Examples of Google Fonts or from link CSS from external sources.
options: stylesheets use to specify additional stylesheets to process. We can put the main CSS files path here like boostrap.css, style.css, etc. If you see why I only import 1 CSS file, some plugin is already included inside. That’s why that CSS cost 19.9MB.
nonull: must be true, or else Grunt removes remote paths that it can’t find locally.

3. Remove Unused CSS using grunt and UnCSS plugin

At first, we need to make sure about how much size on our web page. So let's see in our browser by opening localhost:8000

As we can see, our styles.css size is 19.9MB. That’s freaking insane, right?! So let's make it small! Eh, Don’t get me wrong. 😆

Open terminal and just type:

grunt

As we can see that the 19.9MB becomes only 17 kB. That’s freaking awesome. Isn’t it? Let’s check if it's true by accessing the browser,

Yeah! We have successfully made it smaller. Now we can save our user bandwidth and load times.

Is there a way to make it even smaller? YES!

We can actually use gzip compressing since UnusedCSS uses maxmin for minified and gzipped.

Just add report: ‘gzip’ in the code, then you will get the result of gzip-compressed, which is smaller than the previous one.

From 19.9MB to 17kB and finally to 4.37 kB.

4. Remove Unused CSS in other Pages

We might wonder how if we have some pages and different CSS for each page, and we want to update all of them?

It's really easy. We need to do something like this.

My approach is actually to import only the CSS that is needed by the webpage. So each webpage has its own CSS, and it will be imported only when the page is being accessed. So we could speed up our website from this approach.

You can see the example of this approach below.

Note: I also use preload critical assets, It tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It’s helpful when you need that resource a few seconds after loading the page, and you want to speed it up. https://3perf.com/blog/link-rels/

So What’s next? The next thing that I will share how to optimize Image assets to save load times and speed up our website!

I hope this helps! Please give me some feedback!