Improvements for Madman’s Website
I noticed that Madman Entertainment recently made a few improvements to their website. These things were fairly minor – changing the log in confirmation button from "proceed to checkout" and allowing for cross-session log ins so you don't have to log in every time you visit the site – but go a long way towards improving the overall feel of the site. Since I've used the site for quite a while I thought I would go through some things that I think they should try to tackle in the near future.
I'll start off by stating that I am operating mainly from the output of YSlow and somewhat on my own observations and knowledge. I did this because I want to concentrate on things which should be a bit more obvious and more easily "fixable" than something which requires an in-depth understanding of obscure web development topics. Besides, I don't have access to their back-end system so I can only make general assumptions on anything except things sent to the browser. I believe the Madman site runs on a Java platform (because of a page of Java exceptions I got one day) so much of my PHP-based knowledge won't be applicable and I might have some misunderstandings about how things work. If so I apologise in advance.
It's great that they tried to use true XHTML, complete with XML declaration, but if you're going to go down this route then at least check that the [markup validates]!
The site also appears to use some non-standard attributes. I don't know why this is the case but seeing as they're not as dramatic as a supposed XML not passing a basic XML check I'm not going to worry too much about them.
Remove Commented Out Code
Really? Using HTML comments to remove markup from processing? May I suggest using Java comments instead? Or a version control system if you want to have access to previously written, but no longer needed, code?
Remove Excess Whitespace
This actually helps the first suggestion as well, seeing as the presence of whitespace before the XML declaration is one of the reasons the markup doesn't validate. If you look at the source you can clearly see gaping holes, which is filled with newlines and tabs.
For example, there is 81 bytes of whitespace between the text "Add to Basket" and the enclosing anchor tag. Every time. Is this really necessary?
I understand the likely reason for this: when the code is seen in the template it is nicely formatted and so looks nice to the site developer. Who really cares about the code sent to the browser? It's not like people look at it anyway, right? (cough) Well, the two reasons to remove at least some of the whitespace are to allow the page to validate at the most basic level and to shave off some excess flab from page transfers.
Similarly, compressing the CSS files individually results in a total of 4.8K and combining them results in 4.4K sent to the browser.
Overall, this gives a saving of over 130K, just by using HTTP compression! Of course, this is only relevant for situations where the cache is empty but, at least according to Yahoo!, this is roughly half of the time. The Madman site doesn't use "far future" expires headers either so aggressive caching by the browser is not possible.
I won't list the uncompressed results (see the table below) but the compressed size is 27.5K individually and 25.1K merged. Holy freakin' crap! This is roughly a 10K saving, even after gzip compression.
And here's a summary of the differences between using individual files and merged files:
More YSlow Suggestions
- Add an expires header. None of the external files have a far future expires header. Using these can be a bit dangerous if you don't set up the system properly to deal with changes to files (ie. the browser will get newer versions).
I'd ditch the images in the footer, which are used in place of text. I doubt if many people read that far and, if they do, I doubt they're going to be bothered if the text isn't exactly as the designer wanted. While the images are minuscule, they still require 3 unnecessary HTTP requests. Personally I think the image-text is too blurry anyway. Similarly, I think the search image-text in the header can be replaced with actual text.
I think someone needs to check the log out button:
This could just be an issue with Firefox on Linux but, even so, it's really annoying.
Most of these things should be pretty easy to fix/improve and I've tried to provide suggestions for how to do so. I have other suggestions for improvements but they're significantly larger and more ambitious undertakings.
Overall, I think incremental improvements to a site are definitely the way to go. Madman have been using this kind of approach in their site updates and have started embracing RIA-like functionality, such as in-place editing, helped by cutting edge libraries like Prototype/Script.aculo.us. I hope these trends continue into the future.