Especially then, when a page is initially loaded, Mobile-Safari’s cache is empty. That means all data has to be loaded. So an important part is to load the initial data as fast as possible
HTTP-Requests
Each component (Javascript, Image, CSS, etc…) in a page requires a separat HTTP-Request to get loaded. Although a browser performs HTTP-Requests parallely, the response times increase with the number of components in a web page.
Try to avoid unnecessary requests. This is especially crucial, when accessing data over 3GRPS or EDGE networks.
There are a number of techniques to achieve this goal, i.e. image maps, inline images, CSS sprites and CSS images.
Minify all the JavaScript, CSS and HTML. For components that aren’t shared across multiple pages, consider making them inline.
Cache
Include a cache-control header into the HTML-page.
Expires: [Expiration time in GMT Format]
Cache-Control: max-age=[Expiration time in seconds]
Note: The iPhone-Cache is NOT persistent across resarts. This means that Mobile-Safari’s browser cache on iPhone allocates memory from the system memory to create cached components but does not save the cached components in persistent storage
Cache-Limits
Make sure any component of a page is < 25KB, since the iPhone only caches components smaller than 25KB uncompressed!
Do not use more than 20 components > 25k, as everything above that will not get cached. According to the guys at Yahoo, the maximum cache limit for multiple ocmponents is found to be 475-500k.
Download-Limits
An individual component may not exceed 10MB in size (due to the limited memory of the iPhone). Although the maximum size is dependant on the current state of the iPhone’s memory (fragmentation, other running apps etc…)
