What are best practices for snappy mobile I/O on slow connections?

Question

I have a mobile app, which is pretty data driven, though only through text and images. In the current version each click or touch requires pulling new data from the server (appache/php). With network delay this easily takes 1-2 seconds for the first content to appear, which is far too long.

I have heard about and considered the following options, but are not sure if some of them might be counter productive, or if I have left something important out?

• Download all data from the start, in a big bunch with a loading screen?
• Run a prefetching thread, predicting and downloading data the user might want, in the background?
• Keep the connection open to the server at all time?
• Load different parts of the data in different connections in parallel? (Similar to facebook)
• Use heavy data compression?

A comprehensive article on the matter would also be a good answer.

Answer 1

I would say that most of those suggestions are ... pretty average. Except for using compression. Definitely enable compression on the web server that you are using. You definitely do not want to keep a connection open or have multiple connections. The biggest problem for mobile devices is latency, rather than bandwidth, so using multiple connections won't help, but will drain the battery quickly. As for keeping the connection open, don't even think about doing that. That is one of the biggest postulates of mobile development - only keep a connection open when you need it.

The rule of thumb for mobile thin clients is to download the least amount of data possible when it's absolutely necessary. Here are a few tips:

• Do not send much metadata with your data. In case of JSON, think about changing the structure so that you are not sending the field names for every record. Take the below JSON for example:

{
 success: true,
 data:[
   {ProductName: "Coca-Cola can", Weight: 380, imageUrl: "http://path.to/image.png"},
   {ProductName: "Gillete deodarant", Weight: 500, imageUrl: "http://path.to/image.png"}
 ]
}

As you can see there are a lot of duplicated field names, you can get rid of those to reduce the payload like so:

{
 success: true,
 fields: {"ProductName": 0, "Weight" : 1, "imageUrl": 2}
 data:[
   ["Coca-Cola can", 380, "http://path.to/image.png"],
   ["Gillete deodarant", 500, "http://path.to/image.png"]
 ]
}

• Reduce the amount of data that gets sent each time. Don't send enough data for 10 screens at once. Provide maybe two or three screens worth and use infinite scrolling or some sort of paging.

• Investigate HTTP caching. Make sure the caching headers are set and make sure that the webclient you are using respects those headers.

• Cache aggressively. Have a look at any twitter client for iPhone/Android. They don't download the whole lot of visible tweets every time they start up, they are stored locally.