Facebook has often been a pretty slow site to use, but since they rolled out the new Chat application, it’s become virtually unusable.

Some testing using Firebug shows the culprits:

1. Images are usually the worst. Thumbnails served from profile.ak.facebook.com or any of the photos-?.ak.facebook.com locations take around 2-5 seconds to download. This is crazy, these files are only around 2-5Kb each. (In fact, that’s even quite large for a thumbnail, they could be made smaller). The slow load times massively affect both the performance and perceived performance of the site.
2. common.js.pkg.php (which clocks in at a whopping 103Kb), takes around 4 seconds to load. The slowest I’ve recorded was 32 seconds, the fastest was half a second.
3. All of the images associated with the Chat app take around 0.4 seconds each to load, though I’ve recorded some that took over 7 seconds and some that never even finished loading.

Now obviously all this happens concurrently, we’re not talking about adding up all these times. Nevertheless, an average page load of my homepage — a few thumbnails, a few notifications — took anywhere between 7 seconds and a whopping 32 seconds to render. That was between 75 and 111 separate server requests and an average of around 420Kb. Not cool.

This testing is completely unscientific and I’ve only done it around 10 times and taken averages, but it really does make me wonder if Facebook give two hoots about optimisation. I’ve been using it for about 8 months and was never impressed with its speed and it’s just become abominable with Chat. So I’m guessing they don’t care for speed too much.

Looking at the source code for a typical Facebook page isn’t any better. It’s a bloody mess and has the worst case of divitis I’ve seen for a long time. The HTML doesn’t validate, and if you turn off JavaScript, most of the clever stuff has no alternate fall-back mechanism, so basic functionality doesn’t even work at all — though to be fair, this is the main problem with web apps and doesn’t look like anyone will solve that any time soon.

I appreciate the Facebook has had phenomenal growth in a short space of time and that any rough development methods they used early on might now be difficult to change; however, they really need to do something about this as it’s becoming a serious problem.

As a conscientious web designer, it makes me both sad and angry to see a big player churning out such a dog’s breakfast of code. I take great pleasure in ensuring that what I build is optimised, fast to load, has no errors and adheres to modern web standards. Did the developers of Facebook somehow miss the Web Standards movement? Do they not care about the end-user experience?

If it stays like this, I’ll probably leave completely and go back to using phones and email to keep in touch with people — that was pretty much all I used it for anyway.

I’m not keen on rap music, but this video by The SEO Rapper is worth a view if you’re into standards-compliant web development:

I’ve been using the new Wordpress 2.5 on a project which I upgraded from 2.3.3. It seemed very swish, with some great new features: Media Management, multi-file uploading, Gravatars, tidier menus and — the big one — an improved Write screen. When Wordpress was in RC phase, this was said about the Write screen:

.”..only displays the information that you’ll use most often. It displays the most common fields in a way that makes posting incredibly easy. Additional options are hidden away until you need them. The new Write screen anticipates the natural flow of the way you write.”

Wordpress’ Write screen is the core of the software. If this doesn’t work well, it doesn’t matter how many nice new features have been included, you’re gonna have a bad time blogging. So it was encouraging to read about it’s improvments. But rather than improving the experience, they made it worse. Why? In short: Bad use of screen real estate. (more…)

I wasn’t expecting the final release to be so soon after the RCs, but it’s now available. It comes on the day I was intending to publish a new website — a personal project which uses WP 2.3 as it’s engine. Of course, it would be completely silly to do that, given that 2.5 address a lot of the problems I had and fixed using plugins, so I’ve decided to defer the site release for another week. It won’t make a lot of difference — I’ve been working on this site on and off for about 7 years but never actually put it on line!

So what’s different between the final 2.5 and the recent release candidate? At first glance, very little, although the WYSIWYG editor (TinyMCE) does now seem to preserve HTML a lot better which was one of my big issues. So, have a look a quick at my overview of the good and bad stuff or head on over to the Wordpress site and grab a copy for yourself.

Wordpress have released RC1 of version 2.5 of the Wordpress software. It’s been a while in coming but finally we can play with a more streamlined backend that promises a slew of new features.

I’ve downloaded it and have a test install running on my local server. I’ve had a quick play around with it and here’s a few good and bad things that I wanted to comment on:

The good

• Importing from my blog worked flawlessly, picking up all attachments and images and arranging them in the correct upload folders. Sweet!
• Gravatars are now built in
• Uploads management has been completely replaced with a new Media Library section which is a thousand times better. You can now have permalinks for all media too. This is a massive improvement.
• The Blogroll is now named Links and has been moved into the Write section, which makes much more sense.
• You can add media directly to a post with a media-management popup allowing you to browse for files and send the links and/or embed code directly into the post you’re working on.
• Images placed into your posts are automatically given classes for CSS alignment. This is long overdue and very welcome!
• If you use the visual text editor, you can make it full screen, which helps block out distractions while writing. Shame that I still use the code view due to Wordpress’ horrible HTML code rewriting (which doesn’t seem to have improved, though I haven’t extensively tested that yet)
• Some ‘Reading’ settings that were previously hidden in Options have now been sensibly moved to the Reading section
• The admin area can have colour schemes applied using custom CSS which can be selected in the user profile (it took me a while to find that!)

The bad

• Some plugins are now broken, but that was to be expected really.
• The new colour scheme is ghastly and overall the back end still feels a bit clunky. It doesn’t feel like a polished product.
• The write page now has a reduced side bar with most options appearing in collapsible panels beneath the Write window. This is a real waste of space and will mean more scrolling up and down to set things like the page-slug, ping status, etc. This seems an odd decision to have made.
• Still no button for creating nextpage code in your post
• Backend CSS for the admin area is still very messy and there still are not enough CSS hooks for skinning it
• The Plugins page has a very bad default colour scheme that makes it tough to see at a glance which plugins are activated.

These are only few of my observations and I’m sure I’ll find others as I get to grips with it. Overall, this is a great improvement so a big “Well done!” to all involved. I’m currently re-designing my website, so I’m looking forward to using 2.5 to power it.

GIF and I have been through a lot together. Over the years, we’ve argued over dithering algorithms, we’ve cried over Photoshop’s lossy compression and we’ve drunk the night away comparing palette reduction techniques. Then one day about four years ago, I built a site that required alpha-channel (semi transparent) images. I called up GIF: “Can you do this?”. GIF shuffled about, looked at his feet and dithered his palettes. “Um… no. Sorry.”

I spurned GIF and turned to PNG. PNG was gorgeous. She smiled at me and her IDATs twinkled. “I can do everything GIF does–and MORE!” She laughed, and teased me with her data chunks. She’d got me. I gave her images with alpha channels. She took them in her stride and returned highly compressed, lossless files. I gave her images for dithering; she returned beautiful optimized 8 bit palettes that put GIF to shame. She gave me everything I wanted and I loved her for it.

Everything with PNG was great–for a while. Then one day I discovered the truth. On an idle afternoon I had decided to compare the filesizes of an 8-bit PNG and an 8-bit GIF, compressed with exactly the same settings. The GIF was smaller! What!? My love affair with PNG was being rocked to it’s foundations. PNG had lied! How could she do this to me? (more…)

The default WYSIWYG editor that comes with Wordpress, TinyMCE, is perfectly adequate for writing simple text content. Given that’s what Wordpress is all about, that’s great. But what if you want to embed custom HTML into your posts? You might be lucky, it depends on what kind of day TinyMCE is having. Some code will be preserved, the rest gets flushed down the virtual swanny or converted to nonsense. (more…)

These were the terms I typed into Google tonight to try and get some clue about my slow performing Wordpress blogs. The results that came back were enlightening: far from being the reputable company I once thought, MediaTemple have become a bit of laughing stock. Why? Overselling. (more…)

I was looking at The Wayback Machine recently — a fantastic resource that has been archiving websites for more than ten years. I was trying to find an old site I built that I never kept a copy of, but alas it was not there.

I was disappointed but began to think about the first site I built — it was in 1997 and was version two of Maxim Training’s website, the company I was working for at the time. I punched in the URL and lo and behold, there it was in all it’s framed glory:

http://web.archive.org/…/www.maxim.co.uk/

Looking at this with hindsight, my reaction was “What was I thinking?” I then went and gave myself a good slap.

Look at that lovely textured background! Look at the frames (two levels no less!). It has keyword spamming, a table based design, graphical text, crappy icons (I was sure they looked a lot better than that when I drew them) and a whole host of other things that are now firmly at the top of the list entitled “Big Fat No-Nos of Web Design”.

So what’s the point of highlighting this, other than some self-indulgent, self-berating nostalgia? Well, I think it shows that - despite the web still being an immature medium - we have come such a long way in such a short space of time.

Most of the things that are bad about that site are no longer being perpetuated by good web designers and developers. We’ve learnt so much:

• Sites that use frames stop search engines from indexing your content
• Graphical text is not search engine friendly and is inaccessible to some browsing devices
• Table-based layouts break usability and accessibility
• Keyword-spamming can get you de-listed from search engines
• People associate good design with good content — if your design sucks, no-one will read your content, however useful it might be. I think I’ve got a bit better at design since then!

Of course, we’re still learning. The web is maturing at a staggering rate. It’s becoming easier and quicker to develop new ideas, new ways of interacting with customers and new marketing opportunities. It’s exciting and it is hopefully only going to get better.

I’m looking forward to the day I can write an article about this site and say “What on earth was I thinking?” Well, almost.