Tag Archive for 'Framework'

Speed Up Web Application - Gzip Javascripts And Css

Published
by
Jason Smith
on August 5, 2008
in Technologies
. 4 Comments

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!

gzip javascripts css

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.

gzip javascripts and css

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

    4. <?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