Firstly. Woah. Second blog entry for the night. Right now the serious stuff.
I needed a break from actually working on Hahlo, so I thought I’d do a little research. Now that there are two extra competitors for using Twitter on the iPhone I thought I would put them head to head with Hahlo and see how they all compare, and what conclusions can be drawn from my findings.…oh and I just wanted to play with the cool web inspector in Webkit.
What I did
Nothing too fancy really. First up I had to set a custom user agent string in Webkit so that I could actually access Pockettweets, since they seem to be doing user agent detection and you can only view it with the iPhone user agent, I’m curious to know their reason for this.
The ‘testing’ I did was just a simple loading test, to see how the relative speeds compared, and how much data was downloaded for each. My weapon of choice for this little exercise is the Web Inspector in the latest Webkit builds. If you’re a web developer and you haven’t played with it yet, I think you should.
I based all my tests on the load time of the public timeline, except for thincloud and m.twitter where I tested the friends timeline because the public timeline isn’t accessible. I did a ‘hard reload’ for each one so (hopefully) it didn’t retrieve files from the cache and mess things up…
The Challengers
Hahlo — http://hahlo.com
Hahlo 2-beta — http://beta.hahlo.com/iui/ Update: Hahlo 2 is now live at http://hahlo.com
PocketTweets — http://pockettweets.com
Thincloud Twitter — http://twitter.thincloud.com
Twitter — http://twitter.com
Twitter Mobile — http://m.twitter.com
A picture tells (more) than 1024 bytes.
Have a look at the result for your self, draw your own conclusions. Feeling adventurous then have a play with Webkits Web Inspector yourself and see what you find.
Hahlo
Hahlo 2.0
Twitter mobile
PocketTweets
Thincloud Twitter
Twitter
Transfer Size (as reported by Web Inspector)
- Twitter Mobile — 4.51kb
- Thincloud Twitter — 101.64kb
- Hahlo 2-beta — 107.49kb
- Hahlo — 143.4kb
- Twitter — 261.3kb
- PocketTweets — 323.24kb
Twitter Mobile comes out a mile on top basically because it is far and away the simplest of the interfaces. Its just one document and a tiny image. Thats all. I guess its pretty safe to say that this would be the quickest to access via any type of connection.
Things to consider. All except Twitter Mobile include images which make up on average around 60kb. All except Twitter Mobile include Google Analytics code which as to load.
Transfer Time
Even though this is reported by Web Inspector, its not really all that useful in my mind. For starters the transfer speeds I get here through the universities network are completely different to what you would get through the iPhones wifi not to mention EDGE. Secondly, even though the connection here is fairly fast, it hasn’t been particularly consistent or reliable lately.
The best way to test out the load times is to use these apps on your iPhone and see how they go. I would do this but, thats a little hard without an iPhone.
Javascript
All the tested interfaces except for the Twitter Mobile include some sort of javascript. They all include GoogleAnalytics urchin.js which is approx. 7kb.
- Hahlo 2-beta — 29.75kb
- Thincloud Twitter — 34.23kb
- Hahlo — 54.9kb
- Twitter — 131.39kb
- PocketTweets — 238kb
Reducing the size of my javascript is something I have been very aware of while working on Hahlo. As you can see I’ve almost manged to halve the size of the JS used by version 2, although it might grow just a little since the version tested is not feature complete.
Hahlo currently includes part of the mootools framework, which is only need for the AJAX status updating, and was chosen mainly because the file size was so much smaller than prototype. With version 2 I am now using Joe Hewitt’s iUI which is much smaller, includes AJAX functions and doesn’t contain anything that isn’t needed. I am also now processing the JSON feeds server side, which removed the need for a bunch of javascript.
Thincloud don’t appear to be using any big framework, choosing to just stick with the basics and have put their own javascript together to just what they need.
Twitter are using prototype (including effects.js and application.js), but this is more than understandable since this is their primary site, and not the mobile-optimised site. Still 130kb of JS is a lot…and not something you would want to load over EDGE too often.
PocketTweets are using prototype (including effects.js, dragdrop.js, controls.js and application.js), lightbox and pngfix. Over 200kb all up, and I’m wondering how much of it is actually used. In particular pngfix which according to the comment at the start of the file is for “Correctly handle PNG transparency in Win IE 5.5 & 6.”, and since PocketTweets only works in browsers with an iPhone user agent I’m fairly certain that there is no need for pngfix, or do they know something we don’t. Lightbox is nice, just maybe not on a mobile device. Sure it does some cool things, but its 800+ lines of code for an effect that doesn’t seem to be used. But wait…it does.
You see if you visit Pockettweets in Firefox (or another non-iPhone browser) you get an information site about the app. This page uses lightbox, and would also use the pngfix. The question is, if you’re serving a user-agent specific page couldn’t you also only load the files needed by that user-agent specific page.
Stylesheets — CSS
Again Twitter mobile doesn’t have a stylesheet either, it’s styles (of which there aren’t many) are just included in the header of the html page.
- Thincloud Twitter — 1.05kb
- PocketTweets — 5.73kb
- Hahlo 2-beta — 11.04kb
- Twitter — 11.87kb
- Hahlo — 16.16kb
Both PocketTweets and Thincloud seem to be using gzip on their css (and their js for that matter), currently I’m not using it on Hahlo, but it will be turned on soon, so hopefully that will reduce the size of the transfer for Hahlo even more.
Images
As mentioned already all of the tested pages, except Twitter mobile, have to load a bunch of user avatars which make up about 60kb. These tend to be the slowest part of the page load, as can be seen by the loading graphs. I will be definitely looking at adding an option for users to choose to show/hide avatars by the time version 2 is finished.
- Twitter Mobile — 0.62kb
- Hahlo 2-beta — 64.29kb
- Thincloud Twitter — 65.62kb
- Hahlo — 67.16kb
- PocketTweets — 76.07kb
- Twitter — 84.76kb
The current Hahlo is using probably the largest number of different images, due to the way some of the buttons and UI elements are created, but because most of them are tiny pngs of only a few hundred bytes the damage isn’t too bad.
PocketTweets is simliar in that it is using a number of images, but none of them are particularly large.
This is the one area where all of the sites are fairly close in the total size of images, but it is pretty clear that the majority is made up of user avatars, which are beyond the apps control.
Use of API feeds
Hahlo is currently using the JSON feeds from the API, and the processing is being done client side. For version 2 I am now processing the JSON feed server side, mainly because I hadread reports that the javascript execution time on the iPhone isn’t too flash, and I figure the less strain I put on the device itself the better.
Thincloud are also using the JSON feed and processing it client side, however looking through their javascript, it looks like it might be a little more efficient than my original stuff.
PocketTweets appear to be doing the processing server side, and the response time is pretty good.
Obviously both Twitter interfaces just access the information directly, which means that they too are doing any processing server side.
Functionality
I can’t do this little head to head without at least touching on the functionality of each app.
Thincloud Twitter
- Nothing accessible unless logged in
- Buttons both top and bottom, main toolbar at bottom
- Friends timeline
- Update your status
- Replies timeline
- Browse friends
- Add a new friend
- No links in tweets
- Font is quite small on my laptop screen…must be almost unreadable on the iPhone
PocketTweets
- Public timeline accessible to all
- Buttons both top and bottom — main toolbar at the bottom
- Friends timeline
- Replies timeline
- Direct Messages
- Archive
- Able to favourite tweets
- Able to reply to tweets
- Able to update status
- Has links in tweets.
- Help page — although its more an ‘about’ page than ‘help’, but better than nothing
- Can only be viewed in browser with iPhone user agent.
Hahlo
- Buttons both top and bottom, main toolbar at bottom
- View User Timeline
- View Friends Timeline
- View Public Timeline
- View Replies Timeline
- View Direct Messages Inbox
- View Direct Messages you’ve sent
- Update your status
- Send a direct message
- Reply to tweets
- Alphabetic Friend list, with last update
- Friend avatar view — not really too useful just looked good.
Hahlo 2.0
Still a work in progress, but in addition to the features that v1 has.
- URLs in tweets are links
- usernames for @ replies are link to that users timeline, just like on Twitter
- more…like I said, its a work in progress.
Twitter Mobile
- Very simple
- Very quick
- Just displays your friends timeline
- And lets you updates your status
Twitter
What is there to list. This is the main site, of course it has everything, and of course it all works the best on twitter.com
Roundup
I’m not going to make any grand judgments. Everyone will have their own preference. I’m of course bias towards my own app, Hahlo.
Thincloud Twitter looks alright but its a bit lacking on functionality at the moment I guess this will change, and they’ve very heavily tied themselves to twitters logo and colors, could trick some into think this was an official twitter product.
PocketTweets has its good points, but honeslty I’ve not a fan of the interface. It would look awesome if a similarly style site was available for full screen, non-iPhone use, but on the iPhones small screen, it seems likes its wasting a lot of space. But thats just my opinion, I know there are plenty of people who will disagree with me.
Well thats about it I think. I would love to hear your feedback and comments. Which one do you use? How does it perform in the real world on the iPhone? Let me know.
