What is CSS Minify and How to Implement It

One of the quickest ways for people to lose interest in your site is slow loading times. These days no one wants to wait for a page to load. So if your site is slow, people will quickly move on to the next one leaving you with a higher bounce rate.

In fact, website speed is essential to ranking a website. A study by Denver SEO company, Infront Webworks showed that 95% of traffic never goes past the first page and getting to the first page requires a fast loading website.

With most websites, there is a lot of data to load before it becomes fully functional. This can include anything from HTML to CSS and Javascript. The trick is to get them to run with the minimum amount of actual code while achieving everything you need. This is where minify comes in.

When writing code, most people like to spread out their work so it is easy to troubleshoot. They also often put notes or other indicators to quickly navigate their work to remove bugs that turn up during testing. However, once that is done, a lot of this becomes redundant and simply slows things down.

The trick is to store your fully annotated code in a safe place for when you want to make adjustments. Then minify the version that you are going to run on your site. By minifying your code, a program with strip away all the extra spaces, comments etc., resulting in a ‘clean’ code that the computer can read and implement quickly.

However, minifying is not compression. When you minify something you just literally remove every character or space that takes up memory but does not serve an actual programming purpose. With compression, you compact the file which will then needs to be decompressed before it will run effectively.

How to Do it

The most efficient way to achieve this is to use a minifier. There are a number of programs on the market that will take your code and minify it into the most efficient and quickest running version. These include:

The Closure Compiler: This is a JavaScript optimizer that will examine your code to eliminate the dead space. It will also check and warn you about any JavaScript issues. Its goal is to compact your code and improve its performance.

CSS Minifier: This is a free online tool that will clean up your code by removing spaces, indentations, comments etc. To use it you simple copy your original code into the Minifier. Once it has completed its work, copy the finished code back into your site. It should function as before but significantly faster.

There are many other versions of these programs, including plug-ins you can use. But in each case their goal is the same, to take your original code, remove any non-essential characters, so it runs at optimum speed.

In Summary

The more quickly your code loads your site into a user’s browser, the happier they will be. Your site will run more quickly and is less likely to get hung up. This means that people can browse through your products and services seamlessly, making them more likely to return and hopefully order and then re-order.