Slim Your Web Shape!

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"]

1296098453692171095

[/caption] The compressed size: [caption id="attachment_87506" align="aligncenter" width="585" caption="Compressed JQuery filesize"]

12960992251713666414

[/caption] As you can see on above images. The size of JQuery has been 28% reduced by web server compression module. *Actually you can minify JavaScript with js minifier such as JSMin or YUI Compressor before you upload to web server. But with web server compression module, you can compress all static file automatically, on the fly. For verify, let's try compress JQuery script from linux shell by using gzip command, and you can see the result on below image. [caption id="attachment_87508" align="aligncenter" width="601" caption="Compressed JQuery with tar command"]

129609958693875045

[/caption] The size between compressed file using web server compression module and Gzip command has almost 100% the same file size. that means, the file size that web server had sent to browser is correctly compressed.

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!