First off, I have to say that most of the work that went into this project was already done for me by someone named rgrove. You can find the original (PHP 5) version of Minify here. All I’ve done is convert the code to run on servers still using PHP 4 (download here). This article presents a justification for using Minify over other techniques, and the results of converting www.appelrouthtutoring.com to use the library.
Most modern web sites today are seperated into the three main parts: semantic HTML, presentational CSS and functional JavaScript. Any HTML page you visit can be supported by multiple CSS and JavaScript files, each one requiring it’s own HTTP connection and download. When a website starts using multiple style sheets and the latest fancy JavaScript libraries (I’m looking at you jQuery, Prototype, MochiKit, YUI, Ext, Dojo Toolkit…) mixed with their own personal scripts, things can start getting pretty slow even on the fastest connections.
One solution is caching these files, but this still requires an HTTP connection every time the browser has to check for the latest versions. You could use an expiration time far off in the future, but you better make sure your code works perfectly the first time a user downloads it. Another problem with this technique is that pages served over HTTPS will never be cached; obviously for security reasons.
A second solution used by many major sites like Google and by libraries like jQuery, is to pre-compress any JavaScript so that file downloads are quicker. Dean Edward’s packer is an excellent tool in this regard. While this is a big help to anyone stuck with dial-up, users with fast connections will not notice a remarkable difference due to the identical latency for downloading an uncompressed or compressed JavaScript file. This also adds another step to the building, testing and deployment process because you definitely don’t want to be developing a site while debugging obfuscated code.
Minify is a PHP library that automates the process of concatenating and compressing multiple CSS and JavaScript files. This is a “free” way to improve the experience for anyone visiting your site; everything just loads faster. How much faster? Before I deployed the minified version of www.appelrouthtutoring.com, I tested the average download time of the homepage with Fasterfox, a Firefox extension. I reloaded the homepage 10 times, clearing the cache every time, and found the average load time to be 3.343 seconds.
That would be a good average time for a content heavy site like www.cnn.com, but not for the super simple mostly text web site I tested. After uploading the site using my modified Minify library, the average load time dropped to 1.228 seconds. Again, that’s an average after 10 reloads with no caching. That’s a speedup of 272%(!), with absolutely no effect on the development process for the site.
I found a similar speedup on the intranet part of the site. Load time fell from an average of 4.994 seconds to 2.329 seconds (214% speedup!). While this doesn’t exactly double the productivity of employees using the intranet, it sure makes life a lot easier.
It’s code time (the exact code I use on the homepage):
[do this before writing any HTML]
require_once('minify_php4/minify.php');
// Create new Minify objects.
$minifyCSS = new Minify(TYPE_CSS);
$minifyJS = new Minify(TYPE_JS);
// Specify the files to be minified.
// Full URLs are allowed as long as they point
// to the same server running Minify.
$minifyCSS->addFile(array(
'/styles/fonts.css',
'/styles/nifty.css',
'/styles/public.css',
'/styles/calendar.css',
'/styles/navigation.css'
));
$minifyJS->addFile(array(
'/scripts/jquery.js',
'/scripts/nifty.js',
'/scripts/public.js'
));
[do this in <head>]
<style type="text/css"><?php
echo $minifyCSS->combine();
?></style>
<script type="text/javascript"><?php
echo $minifyJS->combine();
?></script>
It’s so easy, it should be a crime to load multiple external files the old-fashioned way. Let’s all make the web a better place and start cutting down those load times!
