UI responsiveness is one of the basics of a good user experience. In the web environment, this often translates to the loading time of pages.
As it might be expected, there are several techniques to optimize the delivery of web pages. The Exceptional Performance guide by Yahoo is a great resource for a multitude of optimizations practices, including specifically two techniques which I will address in this article – script minifcation and concatenation.
Reducing script size and the number of request
Minification and concatenation
Minifying is the process of removing all unnecessary characters from the source code without changing its functionality (removing whitespaces, line-breaks and comments, replacing variables names and more). Concatenation is the process of unifying two strings into one. Applying both to our scripts we reduce total script size and the amount of requests.
For PHP we have the handy Minify library, which handles both the minifcation and concatenation of scripts. Minify is quite robust, and comes with a set of standalone classes that can be used in other contexts as well. It also sets Etags and far-future headers for better client script caching.
Downloading and extracting the package available on google code creates several text files and two sub-directories. The directory that is of interest to us is ‘/min’ which contains the actual source code, and we’ll place it somewhere on our server about our document root (so it can be accessed by a regular http request).
– Passing the scripts as parameters in the call to the minify script. We pass the path to the scripts separated by commas, translating the following:
There is actually a shorter way writing this, by using a common base path for both scripts:
Provided that all the paths are correct, we have successful concatenated two scripts into one minified script. This can repeated for as many scripts as we like, though there is an artificial limit (due to performance and memory limitations I assume) of 10 scripts per Minify request. This limit can be adjusted in the configuration file which exists at the base path of the library (config.php).
– Using pre-defined script arrays. This method is less flexible as it requires hardcoding the script names into an array, but is slightly more performant. Minify calls those array ‘groups’, which look something like:
return array( 'js' => array('//path/to/script_one.js', '//path/to/script_two.js') );
You can find an example of those in the installation folder of Minify (groupsConfig.php). The request to the script is then made by specifying the group name:
There are several options when using groups, and you can read on those on the library’s wiki.
Its important to set up the cache folder for Minify. Minifying the scripts can actually take a couple of seconds, which is a relatively long delay – however once generated once they will be cached until the scripts change (provided the cache folder is set-up properly).
To declare the cache folder, simply define a variable named $min_cachePath in the configuration file or the main app file before the main application start.
$min_cachePath = '/path/to/cache';
Make sure the folder exists and has write permissions by PHP.
Real world use
51 total requests weighing 540kb reduced to 5 requests weighing 116kb.
To know when the next article is published, please subscribe to new articles using your Email below or follow me on Twitter.