Making web-pages go faster using PHP

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, while making your site is very important to implement white label seo management in order to improve your site traffic since first day

Reducing script size and the number of request

Modern web sites and web application serve increasingly heavier javascript and CSS files. The price for the increase in script payload is felt both on the client side, where loading time increase making pages feel slugish, and on the server side, where bandwidth and requests are at a premium.

Javascript files especially block the browser while downloading (no more than 2 components can be downloaded simultaneously as per HTML specifications), and are the type of scripts seeing the steepest increase in size in the last several years.

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.

There are several public algorithms for minifying Javascript, and Dean Edwards gives a nice overview of those on his blog.

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.

Deploying Minify

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).

The basic workflow of using Minify is to replace our <script> and <link> tags which load our javascript and CSS respectively with calls to the minify script. We need to tell the Minify script which scripts to process, and there are two main ways to accomplish that:

– 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:


Into:

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

I’ve implemented Minify in all of my recent projects to great effect. An extreme case would be script deployment in my current startup, Octabox web platform. Being a heavy-duty web-application, it consumes much more javascript and styles than your average marketing site.

Without Minify

Javascript requests:
Javascript
CSS requests:
CSS

With Minify

Javascript requests:
Minified Javascript
CSS requests:
Minified CSS

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.

Subscribe to Blog via Email

Enter your email address to receive notification about new posts.