Hi
Thought i would share this with you guys.
I’ve been trying to mix different sources to optimize the download speed of the javascript files and the CSS files of any web application.
Your Web application can use this files if:
- You can use .htaccess in your hosting
- You have CSS only and JS only folders to apply to the whole folder
- You can use PHP in your hosting
If all the above conditions are met, you can simply add three files to your CSS and the same three files to your JS folder and you are done.
First file
.htaccess:Modify your .htaccess file to include the following:
AddHandler application/x-httpd-php .css .js
php_value auto_prepend_file gzip-start.php
php_value auto_append_file gzip-end.php
This code, tells Apache to automatically run the gzip-start.php before the requested javascript or css file and to run the file gzip-end.php after the conclusion of the requested file.
It’s a powerful way to create common headers and footers to pages or files, but be aware that it comes at a cost, it’s more fast to serve the static file alone than to run an php script before and one after the file, of course, you have to do some testing and see if it’s worthy to do so.
Second file, the magical
gzip-start.php:<?php
function get_http_mdate()
{
return gmdate(’D, d M Y H:i:s’, filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF'])).’ GMT’;
}
function check_modified_header()
{// This function is based on code from http://ontosys.com/php/cache.html
$headers=apache_request_headers();
$if_modified_since=preg_replace(’/;.*$/’, ”, $headers['If-Modified-Since']);
if(!$if_modified_since)
{
return;
}
$gmtime=get_http_mdate();
if ($if_modified_since == $gmtime)
{
header(”HTTP/1.1 304 Not Modified”);
exit;
}
}
check_modified_header();
// Open a gzipped buffer
ob_start (”ob_gzhandler”);
if (strpos($_SERVER['PHP_SELF'], ‘.js’)>0)
{// Javascript file
header(”Content-type: text/javascript”);
}
elseif (strpos($_SERVER['PHP_SELF'], ‘.css’)>0)
{// CSS file
header(”Content-type: text/css”);
}
$offset = 60000000; // Far far away in time
// Expires
header(”Expires: “.gmdate(”D, d M Y H:i:s”, time() + $offset) . ” GMT”);
// Cache-Control
header(”Cache-Control: must-revalidate, max-age=”.(time()+$offset));
header(”Last-Modified: “.get_http_mdate());
// generate unique ID, using the modification date and the absolute path to the file
$hash = md5(filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']).$_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']);
header(’Etag: “‘.$hash.’”‘);
?>
The concept is clear, this file is interpreted by the PHP runtime right before the output of the requested file.
Let’s see the different parts of the file:
check_modified_header();This function looks for the modification date of the requested file (filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF'])) and returns a HTTP 304 (Not Modified) if the file is fresh, to do that, first looks for a request header If-Modified-Since and then compare the dates.
// Open a gzipped buffer
ob_start (”ob_gzhandler”);
if (strpos($_SERVER['PHP_SELF'], ‘.js’)>0)
{// Javascript file
header(”Content-type: text/javascript”);
}
elseif (strpos($_SERVER['PHP_SELF'], ‘.css’)>0)
{// CSS file
header(”Content-type: text/css”);
}
These lines opens a PHP buffer with the trick that it’s using GZip compression, this is a very good feature of PHP that enables you to output gzipped content without any modification. Afterwards we put the Content-Type of the resulting file, depending of the extension of the file we put text/css or text/javascript.
$offset = 60000000; // Far far away in time
// Expires
header(”Expires: “.gmdate(”D, d M Y H:i:s”, time() + $offset) . ” GMT”);
// Cache-Control
header(”Cache-Control: must-revalidate, max-age=”.(time()+$offset));
These lines put the Expires and Cache-Control headers, both far away in time, we create the variable offset with a constant 60 million seconds (about 2 years) and use that to generate a Expires header and a Cache-Control header with the value of two years in the future.
Be warned, your CSS and your JS files will be cached in a lot of proxies and client browsers, you have to use a “rename file policy” in your HTML to prevent the users from using old versions of the files. We’ve got little javascripts and css files to change, but I recommend to split these kind of files in different folders, for instance /js/usually-modified/omatech.js and apply only the caching technique to the folder usually-modified, then rename each time the .js file with a timestamp, say omatech_20071010.js, and change your html code to reflect the new version.
header(”Last-Modified: “.get_http_mdate());
$hash = md5(filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']).$_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']);
header(’Etag: “‘.$hash.’”‘);
The last lines, creates a Last-Modified header, used to indicate the client browser the freshness of the file for future requests, this have interactions with the Cache-Control/max-age and the Expires headers (out of the reach of this post).
Finally we generate an unique Etag header, based on the update time of the requested file and it’s full path.
Third and last file, the not less
magical gzip-end.php:<?php
header(’Content-Length: ‘ . ob_get_length());
ob_end_flush();
?>
This file simply creates dynamically a Content-Length header with the size of the gzipped buffer we have been using for this request, and then flushes it’s contents.
