In my previous article I discussed various ways to improve website performance. I mentioned PHP Speedy, a script from Aciddrop.

PHP Speedy has 3 main functions…

1. “Minify” your code, JavaScript and CSS.
2. GZIP code, JavaScript and CSS.
3. Add Far_future_expires for JavaScript and CSS

Now, there’s not a lot of documentation on what exactly it does, just how to use it. However, PHP Speedy is based on a number of utilities that the author had been working on, so his blog comments on those can give us a clue.

For a start, PHP Speedy will combine JavaScript and CSS scripts - so if your code references a number of these, PHP Speedy will change it to just the one, reducing the number of server calls.

Here are the options in more detail…

Minify

This is the most unknown of the options, other than the fact that the JavaScript part of this is known to be a version of JSMin.

What we do know is that it reduces your code size by removing redundant code. I contacted the author of PHP Speedy, Leon Chevalier, and he confirmed more of the detail. For CSS files whitespace and comments are removed. For code all leading spaces, tabs and carriage returns NOT preceded by a PHP close tag are removed.

I’m sure this could be more robust - for example why not remove tabs and carriage returns for CSS - but is probably nearly as good as minifying your code beforehand.

So, the big question is, does minifying your code before using PHP Speedy make a difference? Well, I ran one of my sites CSS through the online compressor at CSSdrive - this reduced it by 25%. However, according to Yslow, it made little, or no, difference in speed. The conclusion must therefore be that any compression before using PHP Speedy is a waste of time. This will save a lot of effort long term.

GZIP

GZIP can be activated via your .htaccess file but some people, myself included, may find even this impossible with their current host. There are script options, and I’m assuming this is what PHP Speedy is making use of - it’s certainly performing a GZIP on the code, CSS and JavaScript, as stated.

Far Future Expires

Now, this is the bit I’ve always been afraid of. If used manually, you have to remember to provide files with different filenames whenever they change. Otherwise the previous cached version will be used.

PHP Speedy is clever though - if you remember, it will combine CSS and JavaScript’s (even if there’s just one) and give it it’s own name. This remains the same UNTIL you change any of the files, then the filename is modified. This means YOU don’t have to worry about changing the filename whenever the code changes - PHP Speedy does it for you.

What does this mean? If you haven’t changed any of the JS or CSS files, then it will be cached at the users end.

Conclusion

PHP Speedy is an incredibly well thought out and useful utility - it puts together a lot of the principles from my original article, and does so in a way that’s easy to implement. It does a lot of stuff on the fly saving a lot of time and effort.

It would be nice if there was more information available on what’s it doing, rather than how good it is.

But, the proof is in the pudding, and this very blog is now working with PHP Speedy (all options turned on).

Which reminds me; during the install there are instructions on how to add PHP Speedy to WordPress. This involved adding code to index.php. I found this only worked on the main blog page and no others, but have found that adding the code to the header.php and footer.php instead works a treat.

If you’ve found this article of interest, then a PDF version is available for download below. I’m happy for you to use and distribute this, but please don’t edit it, sell it or generally be beastly.

php-speedy.pdf

Website performance is becoming a bit of a lost art. As more and more people get broadband, and that broadband gets quicker, then website owners spend less time looking at performance. After all, when you have a quick connection, why bother?

What these people forgot is that not everybody is on the same super-quick broadband. But, even if that’s not the case, we all know that we prefer a quick website over something slower. Then factor in the fact that many people have hosts that limit bandwidth, and the need for efficiencies becomes more apparent.

In this article, I’m going to be using my own websites for demonstration purposes, so I will be talking about HTML (or rather XHTML), PHP and MySQL. I’ve provided details in a past post about useful tools for reducing images in size, so don’t intend to cover this again.

The aim is simple… to look at performance and reduce loading times and bandwidth.

So, where to start.

Well, there are various tweaks we can do to Apache servers and PHP and MySQL installs to improve such things but, if like me, you’re getting hosting from a third party you’re unlikely to be able to do anything about this, so I’ll be concentrating on coding. However, changes to site configuration files – such as .htaccess – are usually allowed so I will include these.

The first thing to do, and excuse me if this sounds obvious, is to try and identify where the slowdown occurs. Is it the host server (possibly PHP or MySQL scripts) or client side (HTML, CSS, JavaScript, Images, etc.)?

When it comes to code, there are 3 basic rules on how we can improve this…

1. Compress (or, as it’s called elsewhere, “minify”) so that the files are smaller
2. Reduce by removing redundant code
3. Improve code so that is works more efficiently

PHP

How we code our PHP can make a difference in the speed. Here is a useful list of tips on how to code more efficiently in PHP…

http://reinholdweber.com/?p=3

This is a pretty good list and is pretty much all I can say on the subject, other than – and this applies to all other coding – to look through your code and try and remove redundancy.

MySQL

The general advise is..

1. Do as little SQL processing as possible. Reduce down what the SELECT fetches, if you can

2. One of the biggest things is select *. If you don’t need all the columns, only ask for the ones you need. If you don’t need all the rows, ask for the ones you need, but ask in a way that exploits the indexes already there.

3. Use Indexes wherever possible

And whilst I’m at it, don’t forget to look at SQL Injection. It won’t help with speed, but is essential for site security.

HTML/XHTML

Other than some of the tips mentioned previously (reduce code where appropriate, etc), there is no magic bullet for this one. Compression programs give very little benefit (reducing code by a couple of percent). There are some that make huge improvements but these come with decompression routines and can slow down the display of pages, as they are decompressed browser-side.

Additionally, many compression routines will strip out characters that will then mean the page can’t be validated without errors.

JavaScript

Unlike HTML/XHTML, I’ve found compression of JavaScript to be beneficial. My particular favourite is the one provided on the Creativyst website. The Litebox script, for example, will compress to 67% of its original size, saving a third of the total size. Unlike other sites and tools, I’ve never found the Creativyst version to break a script.

CSS

Like JavaScript, compression can help with CSS. Be wary, though, of various “hacks” that are used in CSS for cross-browser compatibility. Compression may break these.

Therefore, I put any such “hacks” in a separate CSS file, which I don’t then compress.

My recommendation is the online compressor at CSSdrive, which can provide some impressive results (a 28% saving on the CSS that I tried). Using this compresses the main stylesheet for the BMTG website down to 72% of its original size – a saving of 28% on pretty much each page.

I’d recommend you set the following options…

Having said that, I’ve achieved even greater compression using manual search/replaces (but doing it for each stylesheet every time I change them is laborious). One day I might write a program to do it for me!

.HTACCESS

There are two options, which can be set via your .htaccess file, which will help further.

1. GZIP – assuming your host server has GZIP installed, this will activate this compression functionality
2. Far_future_expires – this adds an “expires” header to your files

Both of these options should be used carefully and fully tested. The latter option, Far_future_expires, should be of particularly note. This caches JS and CSS the first time a user visits. It’s only then an advantage when they return again. Bear in mind that if you then change of these files you’ll need to give them a different name, so document control will be useful here.

Both of these, plus a minify option, is also available via a script named PHP_SPEEDY. I will be covering this in a second article, however.

Server Calls

The number of calls you make to the server for files to make up a resultant web page can have a big impact on load time. Combining images, stylesheets, etc, is the best solution.

Now, you can do this manually, or there’s a rather useful and clever script for automating this on the takaz blog.

Yahoo! Exceptional Performance

Yahoo! Have a section of their Developer Network titled Exceptional Performance. It states that their “team evangelizes best practices for improving web performance”.

First of all, I’d recommend their list of performance rules. This includes full explanations of each recommendation.

Secondly, and to back this up, they’ve introduced a Firefox plugin that will check a website for performance issues, using their aforementioned rules. This is named Yslow and requires the Firebug developer plugin as well.

Now, some of these recommendations are going to be for large-scale commercial sites, including having a number of interspersed host servers, etc., so I suspect it’s doubtful that anyone with a small scale site is going to be able to achieve a high rating.

If you’ve found this article of interest, then a PDF version is available for download below. I’m happy for you to use and distribute this, but please don’t edit it, sell it or generally be beastly.

improving-website-performance.pdf

For some time now I’ve been using a great JavaScript utility named Lightbox 2.0. Basically, it displays photos on a web page, but in a very stylish way. You start with a thumbnail, click it, and it expands, the rest of the screen fades out, and with version 2.0, you can then scroll through multiple photos.

If you go to the Lightbox home page, there’s a pretty good demonstration on what it does. I use it on the BMTG site quite a bit, and I’ve used it elsewhere too.

The only problem with it was its use of the Prototype Framework and Scriptaculous Effects Library, which made the whole thing a bit, erm, bulky for what it did.

Now, there is an answer…. Litebox. It’s based on Lightbox 2.0 but it utilizes the 3kb Javacript library moo.fx in association with prototype.lite.

On top of that, Bravenet published their own “theme” for it, making it all look a little swankier.

Well, you can’t keep a good utility down. Just as I used to compress the original Lightbox down to a more managable size, I’ve done the same to Litebox. The result…. Literbox.

What have I done? Well, I’ve compressed the Javascript and CSS. I’ve also compressed and colour reduced some of the images (not that you’d spot the different). It’s saved another 8k. You can download my modded version below, which includes the original demo packaged with it (which I’ve not compressed in any way). There’s also a second package, which is the same thing again but with the Bravenet theme (and again, I’ve compressed the Bravenet changes).

Download Literbox 1.0
Download Literbox 1.0 - Bravenet Theme

Well, I’m now running on Firefox 2… and very good it is too (even if it asking me to check the spelling of the word “Firefox” in this blog).

Meantime, after the recent publicity, I thought I’d give the Copy+ website a bit of a technical refresh by upgrading it to XHTML. Shame it didn’t work. In IE6 and before, the XML tag causes it to go into “quirks mode” which means my CSS doesn’t render correctly. Yes, I could have sorted that out with time and effort but as XHTML doesn’t actually give me any advantage, it’s really not worth it. So I’ve rolled the changes back and the site is back to how it was. With an added Web 2.0-styley-supermarket-sticker on it (as demonstrated on the left). Just don’t get me started on Web 2.0….