Last week, I discussed with you all how to improve your page loading time by implementing Lazy Loading on your webpage. Well, that’s not the only thing you can do to improve your page loading time. There are various other ways and one of them is to compress your CSS files. Sometimes, compressing of CSS files is called “Minify“, as it decreases the lines of code in the CSS file. In case you missed my earlier article on how to Lazy load images on your webpage, you can go ahead and read it now.
There are various ways by which you can compress or minify your CSS files, one is to manually compress a CSS file, which is not recommended as it can take up a lot of time and it pointless when you can automate this work. The other way, that I am going to discuss here today is by using an online tool, which will compress your entire CSS file for you, and hence improving your page loading time.
Let’s get started with the procedure. This is a simple thing to do and can be done by anyone, no special skills required.
Compressing CSS files to Boost Loading Time
- Before we begin, I would ask you to have your CSS file handy and open it up in your favorite text editor. I use Notepad++ (Read more about Notepad++ in my old article, specifying the reason why I use it and the reason that you should also use it. You can find that article here).
- Now, head over to the CSS Compressor website.
- You will be presented with the following screen. Here, make no changes and just head over to your text editor.
- Select your entire stylesheet (ctrl + A) and then paste it in the text box on the website.
- Now, it will generate a minified version of your CSS style, which you can copy and use.
- In your text editor, create a new file and paste this minified text there and then save this file with the name “-min.css”, where is the name of your CSS file.
- Well, that’s it. You have successfully compressed your CSS file. In case you want a better compression, you can always choose different options and try your luck.
The reason to save this compressed/minified CSS styles as a new file is that when you need to edit or change some styles, it would be hard to do that on the minified version. For this sole reason, you need to save it as a new file. Also, don’t forget to change the stylesheet reference on your webpage to the newly created style.
That’s all for this tutorial. If you have any doubts or face any problem, feel free to ask them out in the comments section below. Keep subscribed to Slash Coding to know more about all such tips and tricks. You can subscribe via RSS Feeds, Facebook or Twitter.
