General Methods to Increase Mobile Web Performance

Question

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?)

Answer 1

Check out this testing solution:

Tutorial: Does Your Website Load in 3 Seconds?

http://blog.testobject.com/2013/09/does-your-website-load-in-3-seconds.html

Answer 2

I'd like to answer your call for a mobile web site profiling tool - WebDevTools:

https://play.google.com/store/apps/details?id=com.voltcode.webdevtools

disclaimer - I am connected to the company that released this software

While not being targeted for iphones, you could definitely test on various android models and get the load times. From my experience, IPhone 4+ will load pages the same or better than HTC Desire and similar - both in general speed, but also in HTTP concurrency, etc.

Answer 3

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.

Answer 4

Yahoo! has a nice page about how to squeeze the most performance out of your site.

They also have a Firefox plugin (YSlow) that automatically checks whether your site follows them and suggest improvements. That plugin covers also performance problems that may affect mobile browsers.