Techcrunch and WPTouch: design optimised for mobile, data usage optimised for long wait

Techcrunch, the very well known news site about startups, Web 2.0, mobile and buzz words, has launched a mobile version of their site in March 2010: You Asked For It: TechCrunch, The Mobile Version. There are some little technical details that aren’t quite perfect for mobiles, though.

You might or might not know that the service is hosted by wordpress.com and they use WPTouch as a mobile theme. WPTouch is normally known as the best WordPress plugin if you want to give an iPhone-like look to your mobile site and we all know how cool is the iPhone nowadays.

This is all good, too bad that while the site looks very good, it is not exactly optimised for performance. I was pleased to notice that WordPress serves the WPTouch theme to Symbian devices like the Nokia N8, less pleased to see the KB downloaded goes up to the stars. The iPhone does not show the data usage in real time, so most of us, including myself, have never noticed this. When I tested this morning the size of the homepage alone was about 1.5MB, yes, 1.5 megabytes!
I tested again this evening on my Mac, emulating the iPhone user-agent and this is what I got

As you can see there is a single image using 544KB and then a bunch of other images eating up a lot of memory and bandwidth. The most annoying part is that that image is not even visible! It is hidden in one of the posts and if you don’t click that post… Well, you will never see that big, fat image. If you look at the other files, the HTML is just 60KB and all you need is probably in the range of 200KB (CSS, JS, and some basic images). In short, we are wasting 1.3MB – every time we visit the homepage.

Since this theme is served only to high-end devices why not use a little javascript to load the images when needed? Of course, the way it is now is snappier to open each item on the homepage, but wow, I have to pay for those 1.5MB. Most iPhone users have a nice data flat rate, but a) not all have an iPhone with a contract, b) I still have to wait even if it’s free and c) this is why operators are getting tired of giving us flat rates.

If you are curious, this is how the TechCrunch homepage looked when I tested, the OneRiot image is a little over 10KB.

5 thoughts on “Techcrunch and WPTouch: design optimised for mobile, data usage optimised for long wait

  1. James Pearce

    You’re very charitable.

    Personally I don’t know why a company with a strong brand like TechCrunch is happy with a mobile site which is indistinguishable from, say, the NFL (http://blogs.nfl.com), TopGear (http://transmission.blogs.topgear.com) or thousands of other cookie-cut WPTouch sites.

    And why do they want it to look like the iPhone operating system? In case it isn’t obvious, blue pinstripes are laughably inappropriate on any other type of device.

    Poor show all round… before we even talk about performance!

  2. Pingback: Tweets that mention Techcrunch and WPTouch: design optimised for mobile, data usage optimised for long wait | Andrea Trasatti's tech notes and more -- Topsy.com

  3. Dale Mugford

    As one of the developers of WPtouch (we’re not in control of the WordPress.com version, they forked it) I wanted to chime in and say that it’s a little misleading to suggest that WPtouch is bloated when it’s the content of the webpages themselves that are serving large, un-optimized content.

    Likewise, if people choose to run various plugins which load onerous scripts, that adds to the bloat. The entire plugin download, minus the screenshots is less than that 500kb+ image.

  4. Andrea Post author

    Hi Dale,
    don’t take it personal, I actually think WPTouch is really nice and you have done an amazing job coming from 0 downloads to one of the best mobile-plugins.

    On the other hand, since you are one of the best plugins out there and one of the most downloaded, you have a little responsibility to make sure it rocks :)
    For starter, I think 500KB is still a lot. The mobile version of my site, with the theme based on Nokia’s templates takes a little over 15KB. I admit the content in my blog’s mobile homepage is reduced to the bare minimum, but from 15 to 500 there’s a long way and we can expect most blogs to have images here and there.

    For example, if you wanted to reduce the burden of images you could rescale them. We do a simple, but decent job in WordPress Mobile Pack.
    Since you use javascript elsewhere in theme, why not load the images only when the user expands one of the topics?

    I know WordPress fork plugins and then they maintain their own version and not necessarily bring it up-to-speed to what is the latest plugin release, but I am sure that if you added killer features, they would pick them up as quickly as possible.

  5. Pingback: Thank You Twitter and Facebook

Comments are closed.