The performance of a website is an important issue. Even fast responding dynamic pages can be hit with problems with sub-optimal static content such as high overhead on many HTTP requests and large javascript/css files. Tools like YSlow, and Google Page Speed help identify these problem areas.

Webtatic Optimizer is a tool that can be used to improve these areas, and can help get an almost perfect score.

Make fewer HTTP requests

JavaScript and Css files are naturally loaded individually. Having multiples of them being used across an entire site, e.g. including the JQuery library along with your own javascript, adds to the time the user has to wait for the files to download.

The Optimizer can concatenate these files and store in a new static file, so loading this instead will mean less requests, resulting in an “A” in this category. (images may decrease the score if you use many of them, but I will add in a future release the ability to easily create CSS sprites which rewrite the css file to accomidate the position of an image within its sprite).

Add Expires headers

Whilst you can force an expiry of X hours in apache, this means that changes to these files wont be reflected in the browser until the image has expired. However, browsers cache files based on their entire request url (including query string), so simply concatenating onto the referenced url a unique query string that changes when the contents are modified, is enough to be able to set a year’s expiry whilst changes are reflected immediately.

The Optimizer does this by rewriting css url() urls, calculating the last-modified date of the physical file, and appending this onto the url. There is also a php function helper to do this for static files included in dynamic pages. With this you can get an “A” in this section.

Compress components with gzip

Text-based http requests can be reduced in size significantly using gzip when the browser supports it as a content encoding. The Optimizer does this when creating the concatenated files, also creating a gzipped version at the same time.

This will give an “A” in YSlow.

Minify JavaScript and CSS

If a browser is not able to use the gzipped version of a file, optimized versions of the original JavaScript or CSS can be used instead. This is done at the same time as concatenating the files, using JsMin for JavaScript, and a simple CSS minifier, giving you an “A” for this category in YSlow.

Example

Using a configuration such as below, enables the above optimizations to be incorporated into the generated files:

[config]
version = 1.0.0

[javascript]
config.workingPath = http
defaults.output = site.js
files = "
  + javascript/jquery.min.js
  + javascript/my-javascript.js
"

[css]
config.workingPath = http
defaults.output = site.css
files = "
  + css/layout.css
  + css/global/**.css
"

The above configuration can passed to the optimizer command-line script:

optimizer-compile optimizer.ini

This will concatenate http/javascript/jquery.min.js and http/javascript/my-javascript.js, minimise it, and store it in http/site.js and a gzipped version in http/site.js.gz. It will also concatentate, minify, and rewrite url()’s for http/css/layout.css and any CSS files in http/css/global and sub-directories, and store it in http/site.css and a gzipped version in http/site.css.gz.

Advanced features

There are much more advanced features that can be configured, which you can find out more about in the documentation. The Webtatic Optimizer is a fully extensible library, using plugins and filters to achieve the above. You can enable/disable any features or can even write your own.

An example in use

Using each of the Webtatic Optimizer’s features above, I have managed to get the Fubra Passport, an authentication gateway and payment system for the sites Fubra Limited runs/is affiliated with, a score of “B”. It fails at getting an “A” as it doesn’t have a CDN, and cookies are passed for static content.

I will address the latter, along with making it easy to automatically rewrite local static file urls to a CDN, in a future release.