I am in the process of speeding the perceived load time of a website specifically aimed at the mobile platforms (iPhone primarily, Android secondarily, who cares about the rest...) I have already tried several general techniques for speeding load times for normal websites but I was wondering if anyone had specific pointers for the mobile web performance.
I am already bundling scripts, spriting images, lazy loading as much as possible, putting fixed sizes on things, linking css in the head etc. I want insights specifically for mobile.
For example I have heard that the iPhone will only cache files less than 25k so sometimes splitting a script/file into 25k chunks may give an overall boost since now they can be cached even though it caused additional connections to be made. Any other insights like this would be much appreciated.
Also, does anyone know of a good tool to test the load times in iphone?)
Ok, here's some measuring tools for you...
Steve Souders' mobile bookmarklet - http://stevesouders.com/mobileperf/mobileperfbkm.php (a bit limited on he timing front but has lots of interesting other features)
Stoyan Stefanov's iOS app for exploring page load - http://calendar.perfplanet.com/2011/i-see-http/ (very new, so not sure about it's limitations)
3P Mobile have their own iOS browser in beta that produces waterfalls - Android version was very good.
As far as optimisation goes...
The mobile cache may be small but you still have access to localstorage i.e. include CSS/js inline and extract and save to local storage - Bing mobile does this.
DataURIs are another way of reducing requests but of course the user loses the option to turn off images
Ensure you make good use of keep-alive and connection pipelining - splitting between multiple hostnames can get in the way of these so be careful if you do this.
Caching varies wildly between different phones an OS versions saw an article on it recently will see if I can find it again.