The CSS files of your website can sometimes become quite large. This will mostly happen when you will build new classes without deleting the old ones which you now have stopped using, making the CSS file very messy for other contributors to understand and modify.
This can also happen if you use a pre-built theme from WordPress. Here, we will be knowing how to reduce your CSS file size at a considerate ratio. There are some tools available to remove unused CSS. Here, we will be using PurifyCSS.
- You will be required to install Node, it will be used to execute the code. Download and install Node, which will include the inbuilt package manager NPM.
- You will also need any text editor, and if you don’t have one, try using Visual Studio Code.
Understanding how PurifyCSS works: PurifyCSS gets all HTML files through a range of CSS files. It means that we can’t just provide our index.html file, because we might have different HTML files present through a range of templates on our website. The list of HTML files will then check through the provided CSS files, like style.css and custom.css. In your case, it can be different, just think which of your files are using same CSS files. The similar pages will then be checked through CSS files. If not done, then we might end up losing the required CSS files.
Installing PurifyCSS: Install Node and get access to its package manager, NPM. PurifyCSS has an in built NPM Package for installation, install it by running the below command in the terminal at the root directory of the project folder:
npm i -D purify-css
Preparing our files: We will be needing some HTML files along with their CSS files. In our case, we suppose the main bulk of our CSS is in the style.css file.
In our root directory, we create a HTML file for each HTML layout that we want to process :
After creating the template files that matches our website, just copy and paste them into the new files that we have created in our directory. Then we do the same with the CSS file.
The root directory for the purify tool will look like this:
This is enough for the working of PurifyCSS. Now just run the code using Node.
Purifying: After follow the above steps, unused CSS can be removed by running the following code in a terminal at the root directory level:
And that is it, you will get an output similar to the following:
Now you’ll get a new CSS file named purified.css, just copy the contents of this file and paste them to your website’s CSS file.
PurifyCSS reduced around 70% of unused CSS from our files which is quite a lot if you have a large website like GeeksforGeeks. But, if you have a single-page website, then you don’t need to follow all these steps. There are various free online tools which you can use. One of them is UNCSS, which allows you to paste HTML contents in one input and CSS contents in the other. Hit the button, and your shortened CSS will be appended to the output box, copy it and paste it to your desired place.
- Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
- How to create custom arrows for your website using HTML and CSS?
- Making your WordPress Website More Secure
- Ways To Reduce The Loading Time Of Your Website | Set 2
- 8 Ways to Shipwreck Your Next Website Design
- How to include Search box in your wordpress website ?
- How to enable customers to know if your wordpress website delivers at their pincode or not?
- Hosting Your Django Website on a CentOS VPS
- CSS | Website Layout
- Create a Website Alarm Using Python
- How cookies are used in a website?
- How to use SQLMAP to test a website for SQL Injection vulnerability
- Ways To Reduce The Loading Time Of Website | Set 1
- Making a QR code for a website
- How To Add Google Maps With A Marker to a Website
- How to create a responsive Modal Sign-Up form for a Website?
- Website Blocker Using Python
- What is the Difference between Website and Web Portal
- HTML Course | Building Header of the Website
- Python | Parse a website with regex and urllib
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.