One of the best optimizations you can add to your static site generated with Hugo is purging unused CSS.
Today we'll be using the veteran PurgeCSS with the out of the box PostCSS support from Hugo.
Did you know Tailwind CSS uses PurgeCSS as well?
From 80kb to 10kb
For my Hugo project I reduced this much the size of the CSS output. Which is amazing.
How to do it?
Create a package.json
We'll be using 2 NPM packages:
- PostCSS what Hugo uses to manipulate CSS after compiling the Sass files.
- @fullhuman/postcss-purgecss a PostCSS plugin for the already mentioned PurgeCSS.
Here's the minimal setup for your package.json
file:
{
"name": "name",
"version": "1.0.0",
"description": "description",
"dependencies": {
"@fullhuman/postcss-purgecss": "^4.1.3",
"postcss-cli": "^9.1.0"
}
}
Code language: JSON / JSON with Comments (json)
After creating the above package.json
fire the following command:
npm install
Create a postCSS configuration
You need to create postcss.config.js
a configuration file in the same folder.
💡 You can place it in the root folder of your repo.
The content
parameter can also include paths to JavaScript files, should you have HTML or CSS classes inside them.
Here's mine:
module.exports = {
map: false,
plugins: {
'@fullhuman/postcss-purgecss': {
content: ['./themes/**/*.html'],
}
}
};
Code language: JavaScript (javascript)
Pipe the postCSS rule to the header
Now we just need to pipe this into the head, where you're printing your CSS file (or contents of it).
Mine looks like this:
{{ $main := resources.Get "sass/main.scss" | resources.ToCSS | postCSS | minify }}
<link rel="stylesheet" href="{{ $main.RelPermalink }}">
Code language: PHP (php)
The generated file will be compressed and stripped down of the unnecessary selectors.
Handcrafted CSS isn't an issue
Certainly, if you're handcrafting your CSS from scratch you probably don't need this. In my case for professional work we optimize the heck out of everything, meaning using handcrafted CSS with only what's necessary.
Now, for side projects I usually rely on Bootstrap. I know the framework, I'm fast with it so that's what I use. Thus, for those side projects where I drop a big framework I use PurgeCSS.
PD: Yes, I know you can selectively import components in Bootstrap, instead of the whole framework. But even if you just import, say, "forms" you probably will have unused CSS. It's worth exploring PurgeCSS.
It’s not working properly. do you have any example repository? it will help us a lot. thank you
I do not.
What exactly doesn’t seem to be working?
Just this plugin? Other post CSS plugins work?
It’s running, but no effect on CSS, it’s the same css as before, not any optimization happening.
I see. Sorry about that.
Have you double checked the path to the HTML files (content property in configuration)? Might be different from the one in my example above.
Yes, I did. but no luck. if you have some time, you can help us out by creating a demo repository with it. thank you
Great tutorial
Thank you !