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

I blogged recently with a simple script for adding a Google map onto your site. I’ve since written an enhanced PHP script, so thought I’d share it.

First of all, you’ll need to download the following 2 PHP scripts…

map_head.php

map_main.php

The first file must be added into the HEAD section of your HTML in the following way…

<?php
include('map_head.php?key=xxx');
?>

You need to replace xxx with your Google Maps API key.

Now, in the BODY of your code, where you wish the map to appear you will need the following code…

<?php
$width="700px";
$height="400px";
$border_col="#808080";
$options="1YYY";
$xcoord="-1.218501";
$ycoord="52.927571";
$zoom="2";
$popup="Name Here<br/>Address Here<br/>Another line<br/>Another line";
include('map_main.php');
?>


Replace $width and $height with the size that you require the map to be. $border_col is the colour that you want the map border to be. $xcoord and $ycoord is the, you guessed it, x and y co-ordinates of where you want the map pin (and the centre of the map) to go. $zoom is the starting zoom level. $popup is the contents of the popup message that appears next to your pin - lines should be separated by the <br/> command.

Finally, $options indicates whether certain options are in use or not. Use “N” to switch off any of these.

The first flag is a number between 1 and 3. Depending on which it is, the following map option is switched on…

1. GLargeMapControl - a large pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
2. GSmallMapControl - a smaller pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
3. GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.

The second flag should be set to Y to be switched on and displays the map scale.

The third flag should be set to Y to be switched on and displays buttons that let the user toggle between map types (such as Map and Satellite).

The final flag should be set to Y to be switched on and displays a collapsible overview map in the corner of the screen.

Now, the code I’ve supplied has no error checking in it, so supplying the wrong parameters will give unpredictable results. Or it will just break.

If you have any problems or questions about it, feel free to contact me.

TotalEdit

Download from… http://www.codertools.com

Download size… 5.65MB
Installation size… 12.93MB

It isn’t often I try out a new code editor and get excited. But TotalEdit is doing precisely that.

Let’s see what it’s got…

1. Resizable word wrap
2. Line numbering
3. Ability to easily add multiple browser launch
4. Correctly syntax checks PHP embedded within HTML code
5. Work on a USB stick
6. It’s quick to launch
7. Remembers previously opened files

What isn’t there? Well, there isn’t much else, including plugins. My current editor, Notepad++, has those and I don’t use them. It’s also rather bloated compared to others. But, then again, I’m putting it on an external USB drive where space isn’t an issue.

But, there is ONE issue. It isn’t much but that’s all it takes for a product to go from being the best one to being “nearly there”. Whenever I close the program and restart it the explorer toolbar resets back to the root directory structure. It’s remembered the files I was editing, but not the matching folder structure (and as I have my web development files neatly on a USB drive under lots of sub-folders, this is laborious).

Shame, otherwise I may have been switching editors.

I’m going to contact the authors and see if there’s a solution (I can’t find anything in the preferences)… I’ll wait until I get a reply (or not) before I give this software a final score. My hope is that there is a solution.

27/02/2008 Update
I received a rather speedy reply yesterday from the authors of the software. There is no facility to do what I was after, but they were already looking at modifying the under-used project facilities to do something similar - as in, link the project to a specific folder. The current version was to include this but it didn’t make it in. They’ll hopefully now include it in a later update.

So, I’ll keep an eye out and re-check the program once the update occurs. In the meantime… the software gets 4 (out of 5) stars. So nearly there, but I’m sticking with NotePad++ in the meantime.

LopeEdit Lite

Download from… http://www.lopesoft.com

Download size… 3.2MB
Installation size… 4.6MB

LopeEdit is a nice looking editor. It displays line numbers, word wrap indicators and, importantly, wraps correctly (i.e. re-wrapping as the windows resizes, rather than to a fixed screen position).

I tried the free version (as that’s the grand total of how much I wish to pay) but there is a “pay for” version with extra facilities. In this case, however, none of these extras were ones that I was looking for (ftp updates, file comparison, etc., are all available separately and probably a lot more powerful too).

But, as with most editors there are a couple of cons. First of all there’s no facility to launch the current page in a browser (as I’ve said before I’m surprised this isn’t missing from more editors as most are trying to be generic coding editors rather than web-specific). Secondly, this falls into a trap that others do when it comes to syntax highlighting - PHP scripts are assumed to be pure PHP. That means any HTML within them are not displayed correctly (and in the case of LopeEdit, it often gets confused). As most of my pages are HTML with a smattering of PHP within them, this means they highlight badly. Other editors assume both, others have seperate options (i.e. PHP or HTML/PHP).

Summary

Decent rounded code editor, not web specific, which is where its weaknesses lie. 3 out of 5.

Over the last few weeks I’ve been looking at improving the eCommerce facilities on the BMTG website.

Up until now I’ve handled the handled the ticket availability via a combination of PHP and MySQL. The shopping basket and checkout has then been handled by PayPal. To add some more flexibility, though, I’ve been taking over the shopping basket. The coding was a little complicated but it’s done. I can now track multiple tickets in a basket, with options to change quantities and delete items from the basket. All well and good.

The next bit is to pass the basket entries to PayPal for final payment.

Oh lord.

The main PayPal site has “walk through” screens on how to add the code. But stuff is missing - but can be found in a 100+ downloadable PDF manual. Add to that the code they give you includes a broken link to a PayPal image.

So, now, I need to find a replacement “Checkout” graphic from PayPal. Could I find one. Could I heck. However, there was a news story about PayPal updating their graphics so I followed that and found a list of “before” and “after” images. That told me that PayPal generated images - such as the ones provided in the example code - would update automatically. The other option was to download replacement images and host them yourself. This wasn’t my preferred option, but I went for it anyway. Guess what? Yes, clicking on the link to download the image showed me the code that was required to host it from the PayPal site - exactly what I was after. But in no way obvious.

And that’s what I’ve found about the PayPal site in general - nothing is where you’d expect it to be and everything needs a good deal of searching to find.

Which is why most of the help can be found at the PayPal Developer Community - a group of official PayPal forums that I only came across via a Google search.

These forums mentioned that I could use the PayPal Sandbox for testing purposes. But could I find a link? No. A search on Google naturally lead me to a completely different site - PayPal Developer Central. And don’t even get me started on how complicated the Sandbox is to use…

So right now I’m frustrated to hell. My coding of the PayPal interface has barely started as I’ve spent all my time desperately trying to find answers to what I think are basic questions.

And after that… I’ve going to add Google Checkout as a second payment option. God help me.