Combining JavaScripts and CSS

[deAthbLisS]

Hi,
Many of you are concerned with your site loading time..

Well here is a way to reduce the loading time.

Combining Javascripts..

Suppose you have

http://www.yoursite.com/javascript/prototype.js
http://www.yoursite.com/javascript/builder.js
http://www.yoursite.com/javascript/effects.js
http://www.yoursite.com/javascript/dragdrop.js
http://www.yoursite.com/javascript/slider.js

you can represent them as

http://www.yoursite.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

Combining JavaScripts and CSS:

The idea is that you have one directory for css files and one directory for javascript files on your server. If you rewrite the URLs that point to these directories to a small script that intercepts the requests for those files. The script loads the file from disk and compresses it using gzip. It then sends that compressed file back to the browser. Given that javascript and css files compress really well this will greatly decrease the size of the data that is going to be transferred and thus decrease the time needed to download these files. Because this works completely transparently you do not need to change anything in your existing code.


Save this Script as combine.php in your root folder.

<?php

    /************************************************************************
     * CSS and Javascript Combinator 0.5
     * Copyright 2006 by Niels Leenheer
     *
     * Permission is hereby granted, free of charge, to any person obtaining
     * a copy of this software and associated documentation files (the
     * "Software"), to deal in the Software without restriction, including
     * without limitation the rights to use, copy, modify, merge, publish,
     * distribute, sublicense, and/or sell copies of the Software, and to
     * permit persons to whom the Software is furnished to do so, subject to
     * the following conditions:
     * 
     * The above copyright notice and this permission notice shall be
     * included in all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
     * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
     * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
     * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
     * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
     * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
     * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
     */


    $cache       = true;
    $cachedir = dirname(__FILE__) . '/cache';
    $cssdir   = dirname(__FILE__) . '/css';
    $jsdir    = dirname(__FILE__) . '/javascript';

    // Determine the directory and type we should use
    switch ($_GET['type']) {
        case 'css':
            $base = realpath($cssdir);
            break;
        case 'javascript':
            $base = realpath($jsdir);
            break;
        default:
            header ("HTTP/1.0 503 Not Implemented");
            exit;
    };

    $type = $_GET['type'];
    $elements = explode(',', $_GET['files']);
    
    // Determine last modification date of the files
    $lastmodified = 0;
    while (list(,$element) = each($elements)) {
        $path = realpath($base . '/' . $element);
    
        if (($type == 'javascript' && substr($path, -3) != '.js') || 
            ($type == 'css' && substr($path, -4) != '.css')) {
            header ("HTTP/1.0 403 Forbidden");
            exit;    
        }
    
        if (substr($path, 0, strlen($base)) != $base || !file_exists($path)) {
            header ("HTTP/1.0 404 Not Found");
            exit;
        }
        
        $lastmodified = max($lastmodified, filemtime($path));
    }
    
    // Send Etag hash
    $hash = $lastmodified . '-' . md5($_GET['files']);
    header ("Etag: \"" . $hash . "\"");
    
    if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && 
        stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) == '"' . $hash . '"') 
    {
        // Return visit and no modifications, so do not send anything
        header ("HTTP/1.0 304 Not Modified");
        header ('Content-Length: 0');
    } 
    else 
    {
        // First time visit or files were modified
        if ($cache) 
        {
            // Determine supported compression method
            $gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');
            $deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');
    
            // Determine used compression method
            $encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');
    
            // Check for buggy versions of Internet Explorer
            if (!strstr($_SERVER['HTTP_USER_AGENT'], 'Opera') && 
                preg_match('/^Mozilla\/4\.0 \(compatible; MSIE ([0-9]\.[0-9])/i', $_SERVER['HTTP_USER_AGENT'], $matches)) {
                $version = floatval($matches[1]);
                
                if ($version < 6)
                    $encoding = 'none';
                    
                if ($version == 6 && !strstr($_SERVER['HTTP_USER_AGENT'], 'EV1')) 
                    $encoding = 'none';
            }
            
            // Try the cache first to see if the combined files were already generated
            $cachefile = 'cache-' . $hash . '.' . $type . ($encoding != 'none' ? '.' . $encoding : '');
            
            if (file_exists($cachedir . '/' . $cachefile)) {
                if ($fp = fopen($cachedir . '/' . $cachefile, 'rb')) {

                    if ($encoding != 'none') {
                        header ("Content-Encoding: " . $encoding);
                    }
                
                    header ("Content-Type: text/" . $type);
                    header ("Content-Length: " . filesize($cachedir . '/' . $cachefile));
        
                    fpassthru($fp);
                    fclose($fp);
                    exit;
                }
            }
        }
    
        // Get contents of the files
        $contents = '';
        reset($elements);
        while (list(,$element) = each($elements)) {
            $path = realpath($base . '/' . $element);
            $contents .= "\n\n" . file_get_contents($path);
        }
    
        // Send Content-Type
        header ("Content-Type: text/" . $type);
        
        if (isset($encoding) && $encoding != 'none') 
        {
            // Send compressed contents
            $contents = gzencode($contents, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);
            header ("Content-Encoding: " . $encoding);
            header ('Content-Length: ' . strlen($contents));
            echo $contents;
        } 
        else 
        {
            // Send regular contents
            header ('Content-Length: ' . strlen($contents));
            echo $contents;
        }

        // Store cache
        if ($cache) {
            if ($fp = fopen($cachedir . '/' . $cachefile, 'wb')) {
                fwrite($fp, $contents);
                fclose($fp);
            }
        }
    }

Use these Rewrite Rules in your .htaccess file:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1 

By default this script look in the javascript and css directory in the root of your website, but if you are currently using different directories you can change these values at the top of the combine.php script. Upload the combine.php script to the root of your website. Secondly you need to create a cache directory that is writable by the web server. Again, by default this script will look for the cache directory in the root of the website, but you can change this in the combine.php script. Finally you need to create or modify your .htaccess file. If you do not have a .htaccess file you can create it in the root of your website and add the above mentioned lines.

Note: if your preexisting .htaccess file already uses URL rewriting you do not need to add the first two lines. You can simply add the last two lines to the bottom of the .htaccess file.


Regards,
deAthbLisS

P.S: The Script isn't made by me. Credits to the Original Author of Script and Article.

deAthbLisS Reviewed by deAthbLisS on 1st Aug 2010. Combining JavaScripts and CSS Hi, Many of you are concerned with your site loading time.. Well here is a way to reduce the loading time. <3 Combining Javascripts.. Suppose you have http://www.yoursite.com/javascript/prototype.js Rating: 5

[Palooo 2009]

Nice.