7 days of php add-ons - Day 1: minify

Wednesday, 8 April 2009


Welcome to the first of my 7 days of php add-ons.

I've chosen to start things off with minify.

From their own site:

Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching. This helps you follow several of Yahoo!'s Rules for High Performance Web Sites.


The main aim with minifying your css and javascript files is to increase the speed of your site; something that you may not be considering when you are writing your first php scripts. But one of the reasons that I chose this app to demonstrate is that is a very useful tool to have available and something that you will need to use once you start working on larger volume sites.

One of the advantages of using the minify script is having the minified files cached server side. In some browsers this can cause problems when you have web applications that have a high number of regular users; the problem occurs when you update one of your javascript files it may not automatically refresh. The solution in this case is to do a Ctrl-F5 hard refresh, but you can't expect all of your users to do this each time you do a release. I'll show you how you can set up versioning with your minified files so that your server knows there is a new version of your minified file available, problem solved!

Note: On certain high volume sites minify can be slower that serving flat files, so please make sure before deploying this to a live environment you do your own benchmarking tests.

Minify can be downloaded from here. I recommend having a good read through the Wiki before implementing on your site, it has a good FAQ section and a list of common problems others have had while implementing.

Minify has changed slightly with recent releases and they have a walkthrough, if you are happy to place the minfy folder at root level. This will allow you to add each of the files one by one and will then provide you with the necessary URLs to use. I had troubles getting this to work if I placed the minify folder elsewhere other than at the root level. I also prefer setting up the groups manually and being able to use my own URLs, in this way we are able to have versioning.

The main idea to get versioning running is to have the current version number of your app stored in a variable or constant. In this way you only need to specify your app version once. I have stored this in a file called global.php. Anywhere that I want to include my minified css or js files I just call the URL of my minified script and pass in the group name followed by the version.

Here's how it works:

Minify script file name: test-min.php
Version: 5.4b
Group: js

So to include the minified version of my js groups I just called http://www.mysite.com/min-test.php/js5.4b

e.g. <script language="JavaScript" type="text/javascript" src="min-test.php/js5.4b"></script>


Any time you update a file in your groups and you want to be sure that your clients aren't using the cached version all you need to do is change your version number in your config file. If your scripts are written in a way that they read the version from the config file and don't use a hardcoded reference to the version everything should update automatically.

Now let's have a look at the code



require_once 'global.php'; // global file where my ApplicationSettings static class exists

$version = ApplicationSettings::version; // Retrieve the version from my global file
$basepath = "timemp/min-test.php/"; // This needs to be prepended as part of the group name (required since version 2 of minify)

$groups = array(
$basepath . 'js' . $version => array('js/jquery-1.2.6.pack.js' // My js group with the version automatically appended
),
$basepath . 'css' . $version => array('css/styles.css', // My css group, note you can call your groups whatever you like
'library/ribbon/ribbon.css',
'css/ui.datepicker.css'),
);

set_include_path(getcwd() . '/includes/min/lib' . PATH_SEPARATOR . get_include_path()); // This is the location of your minify library, this is needed for minify to find it's own files
include_once 'Minify.php'; // Include the minify class


$serveOptions = array(
'groups' => $groups, // As part of the serving options add in your groups and a far future expiry date
'maxAge' => 31536000 //maxAge = 1 year
);

$serveOptions['minifierOptions'][Minify::TYPE_CSS]['prependRelativePath'] = ApplicationSettings::HomeURL; // Read Fixing URIs in CSS files from the user guide (see link below)

Minify::setCache();
Minify::serve('Groups', $serveOptions);

?>


If you want more background on the background of things such as the serve options etc have a look at the User Guide

If you have any issues check out the minify site, many of the common issues are addressed there in detail.

Apart from getting the paths sorted out and reading variables in from your config this app should be very easy to set up. Being able to minify your js and css files is a useful thing to know and a handy tool to have.

A big thanks to Steve and Ryan for their great app. Be sure to check out their blogs: wonko.com and mrclay.org.
blog comments powered by Disqus