Tutorials

Amazing Trick To Combine and Clean Unused CSS For Faster Website Loading

By November 20, 2018 No Comments

Today i want to share a little hack i created that will allow you to combine all your CSS files and remove unused lines of CSS code.

Originally i created this method as i often use WordPress to create a website, specifically the Elementor drag and drop plugin but i found the sites would often be loaded with excess .css files which contain all CSS code used in this plugin. If the site i create only uses 10% of the CSS code in the file then alot of load time is going to waste. If a CSS file is say 750kb in size and im only using that 10% then i should only need 75kb of CSS code.

Obviously i dont expect many people to create WordPress sites and change them into HTML but this trick will also work for those using CSS libraries or pre made HTML templates with CSS functionality and animations.

I must warn you this method is a be crude but it gets the job.

1. Merge your CSS files

The first step is to merge all your CSS files into 1 single file. The easiest and quick was to do this is to use Windows CMD.exe.

Simply CD: into the folder where the files are located and enter the following:

copy *.css output.css

This will merge all CSS files into the new file called output.css.

The results will often be messy so the next step is to clean it up.

2. Beautify Your CSS

Visit this website and enter your CSS code. This will clean up your code making it much easier to read.

3.Remove unused code

This next step will remove all the code that is not needed.

Visit this website and enter your HTML code and the new beutifed CSS code and hit “Uncss my Styles”

You may get an error at this stage but it will mention the line the error is on allowing you to copy the code to Notepad++, find the line and fix the error.

Repeat these steps until the result has no errors.

4. Bringing it all together

Copy the cleaned CSS code to your output.css file and save.

Open up your HTML file in your preferred txt editor and remove all instances of any .css files leaving only 1 linking to your new CSS file. Save the page

Now test your site to make sure nothing is broken and enjoy a faster loading site with less page requests and smaller file sizes.

Automated ways of removing unused CSS

There are ways to do this without copy and pasting multiple times. This requires the use of Node.js and either Grunt or Uncss scripts.

First download and install node.js here. Select the Windows Installer (.msi) for your operating system (either 32bit or 64bit)

Once installed load Windows CMD.exe and type the following:

npm install -g uncss

This will install the Uncss package to your machine.

Then CD (using CMD.exe) into the folder where your site is located and type the following

uncss index.html > tiny.css

Replace index.html with what ever the root .html file name is.

This will output a file called tiny.css. All that’s left is to edit your .html to only use this 1 .css file.

In the example above the final one .css file is only 41kb, compared to the original three .css file that totaled 225kb. That’s a 184kb saving in CSS alone.

You can download the example template i used for this post here from the site HTML5up.net

Hopefully you found this post interesting, feel free to leave me your comments in the section below.