Bizroof uses prototype and scriptaculous as javascript framework in order to provide desktop-like look and feel. But, the framework itself is big in size and therefore takes quite a while to load. Although it only happens once to download the files, it still annoys the first-time visitors.

Without gzip – The first screenshot shows all the components needs to be downloaded for our sign in page, and the total file size is more than 310KB. It takes 8 seconds to response with standard DSL connections. Gosh! That is pain in the neck!

Screenshot 1 - Firebug Report - Without gzip

With gzip – The best solution we found is to gzip all the javascipts and css files. As shown in the second screenshot, for the same sign in page, first-time visitors only have to download 75KB, that takes less than 3 seconds. After the page loaded once, only 14KB need to be loaded each time, and that takes 0.6 seconds on average. What a big change! All we need to do is just to gzip all the javascripts and css files.

Screenshot 2 - Firebug Report - With gzip

To Developers and designers

In case you want to know what exactly we’ve done to gzip the files, here are a examples:

Javascript Example: prototype.js

1. Rename the file to prototype.js.php
2. Add the following php script as the first line of prototype.js.php
   <?php require_once(’gzip-javascripts.php’); ?>
3. Create the gzip-javascripts.php which will compress the files

<?php
if ( ((!empty($_SERVER['HTTP_USER_AGENT'])) ? strtolower(htmlspecialchars((string) $_SERVER['HTTP_USER_AGENT'])) : ” && strpos((!empty($_SERVER['HTTP_USER_AGENT'])) ? strtolower(htmlspecialchars((string) $_SERVER['HTTP_USER_AGENT'])) : ”, ‘msie 6.0′) === false) && extension_loaded(’zlib’) && !ini_get(’zlib.output_compression’) && ini_get(’output_handler’) != ‘ob_gzhandler’ && ((version_compare(phpversion(), ‘5.0′, ‘>=’) && ob_get_length() == false) || ob_get_length() === false) ) {
ob_start(’ob_gzhandler’);
}
header(”Cache-Control: public”);
header(”Pragma: cache”);
$offset = 2592000; // 60 * 60 * 24 * 30, Expire time
header(”Expires: “.gmdate(”D, d M Y H:i:s”, time() + $offset).” GMT”);
header(”Last-Modified: “.gmdate(”D, d M Y H:i:s”, filemtime($_SERVER['SCRIPT_FILENAME'])).” GMT”);
//header(’Content-Type: text/css; charset: UTF-8′);  //Uncomment this line for CSS files
?>

4. Use the new file name

For example: <script type=”text/javascript“ src=”/js/prototype.js.php“>

Matt