|
One
of the most recommended (and easiest to implement) techniques for web
pages optimization is compressing the CSS and JavaScript files used.
While this is not a particularly difficult thing to do manually (for example, using the YUI compressor found here),
when releasing a new version on the live server, it would be much
easier to use an automated method that allows you to write the
JavaScript in your own development style (using comments and a more
loose formatting), and serve it directly compressed to the browser, on
request.
Well... wonder no more! We're going to present an easy and
bullet-proof method of doing just that, on an Apache web server. For
this purpose, we're going to use Dean Edwards JavaScript's Packer class, more precisely its PHP version, "translated" by Nicolas Martin.
You're going to have to add it to your JavaScript folder (assuming
you have such a folder in your project, otherwise... add it in your
common folder, or... wherever you want). In the same folder, you have to
add an index.php file that will load this PHP class and use it to
dynamically compress your JS files.
The content of the JS folder's index.php file should be something like
if(!empty($_GET['script']) && is_file($_GET['script'] . '.js')){
require_once '/relative/path/to/JavaScriptPacker.class.php';
$script = file_get_contents($_GET['script'] . '.js');
$packer = new JavaScriptPacker($script, 62, true, false); // Default configuration
$script = $packer->pack();
header('content-type:application/javascript');
echo $script;
}
This, as you may notice, will receive a script parameter (type GET) and, if it will fit a file in your JS folder named as its value (plus the .js extension), will compress and output it.
In order to automatically call the index.php page with the JS file's name (without the .js extension), you need some .htaccess commands. These are:
Options All -Indexes # Disabled direct access to your JS folder's content
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /path/to/your/JavaScript/folder/
RewriteRule ^(.*)\.js$ ?script=$1 [L] # Here you instruct the server to pass any JS file called directly, to index.php as its script parameter
</IfModule>
As you may see, you must have the mod_rewrite module installed and active for this method to work.
If you have followed and understood all of the above... you now should
access ONLY compressed JS files when calling them directly from your
address bar (for example, try accessing
http://your.domain.name/path/to/your/js/file.js - you should see
something beginning with
eval(function(p,a,c,k,e,d){ ...
So... that's it! You now serve compressed (and somewhat "encoded")
JavaScript files, thus minimizing the traffic and the time needed for
the browsers to load your scripts.
One way of seeing the effects of this change is using either Page Speed or YSlow Firebug
plug-ins. Try testing your web page without this compression method,
and then, with it enabled. Depending on the size of your original
script(s), you should be able to increase your ratings between 2-3 and
up to 10 points.
Of course, you could go one step further, and try concatenating all
of your scripts (in case you use more than one - and this is usually
the case), and THEN compress it - you should gain up to 15 points in
the performance rankings. But... I'll let you do that yourselves.
|