Written Communication: Speeding up Your Website by Minifying and Compressing
Minifying Your CSS File. Once your website is working and you are ready to distribute it to the web, you have one task remaining: minifying your code. Minifying refers to the process of removing unnecessary characters that are not required for your site to execute properly. For example, the following text in a CSS file contains comments and line returns and blank spaces, which makes the text easy to read, but these features are not required and have no impact on how the browser renders the page:
/* Tablet Styles */
nav.horizontal > ul > li { display: block; }
A minified version of this code removes the comment and the extraneous white-space characters leaving the following compact version:
nav .horizontal>ul>li{display:block;}
Minifying has several important advantages:
- Minifying reduces the amount of bandwidth required to retrieve the website because the files are smaller.
- The smaller minified files load faster and are faster to process because extraneous code does not need to be parsed by the browser.
- A faster site provides a better user experience.
- Smaller files means less server space required to host the website.
- Search engines, such as Google, evaluate your website based on page load speed and will downgrade sites with bloated code that take too long to load.
There are several free tools available on the web to automate the minification process including CSS Minifier, Compress HTML, HTML Minifier, and CSS Compressor. Also, many HTML editors include built-in minifying tools. Remember, a minified file is still a text file and can be read (though with difficulty) in a text editor.
To further reduce your file sizes, consider compressing your files using utilities like Gzip. A compressed file is no longer in text format and must be uncompressed before it is readable. All modern browsers support Gzip compression for files retrieved from a server. Make sure you know how to properly configure your web server to serve Gzip-compressed file in a readable format to the browser.
The process of minifying your files is irreversible, so make sure you retain the version with the text in a readable format and all of your comments preserved. Most minifying and compression tools will make a backup of your original files.
