Ever heard of the word "zip" in the world of Computer? Zip is the mechanism to compress the contain of file in more effective way to store every bit of data into storage regardless of what file system is being used. And as the result, you'll get smaller size of file. The file has been reduced by removing unneeded bit of space on storage, without effecting the integrity of the information it self. But can we implement this method to our website? and why? Commonly, files on website is known as Web Component. Is not only HTML when you request a web page, but there's also a static files such as: CSS for style, Javascript for web interactivity, Image, Flash and so on. For each component have their on size, means, all the component is contributing on how long the page will load completely. The main consideration is still the size. Bandwidth usage and amount of time the HTTP Response (page load) is the factor why we have to implement this technique.
GZIP or Deflate?
Two famous compression module on Apache are Gzip and Deflate. you can easily install the module from your favorite Linux distribution. For some distribution, those modules are installed by default. On Ubuntu you can enable deflate module by submit this command from your shell
$ sudo a2enmod deflate
What's the different? those two module has different algorithm. Gzip store checksum on it's header so the browser can check and verify the integrity of the zipped files. But not Deflate, there's no header on Deflate zipped files, so you will have more smaller file than gzip result. The differences algorithm between Gzip and Deflate will also reflect to the feature, time to compress, compatibility and of course, the size of the compressed files. But i will not discuss this more further. Do experiment on your environment, and you will find the best Compression method that fit on your environment. Most of the today browser are support Compression encoding, you can check your browser capability by looking on your browser user agent. Use firebug and see Accept Encoding line on Request Header section. See the picture below. [caption id="attachment_84742" align="aligncenter" width="598" caption="User Agent"][/caption]
Implementation
Let say we already configured the compression module on our web server. HTML and static files will produce by web server as a compressed files. For testing we upload plain and uncompressed JQuery file to web server, jquery is one of today the most popular JavaScript framework. After we upload the file, then we request the file from browser. Now we compare the file size between original file and requested file from browser. The original size: [caption id="attachment_87505" align="aligncenter" width="494" caption="Uncompressed JQuery filesize"]
Conclusion
To compress web component you can do it from two different approach: manually before you upload the files or automatically by web server. Despite on what kind of website do you have, compressing your web site is a right thing to do to achieve better user experience. so.. let's slim our web!