The Exceptional Performance group at Yahoo! just released a detailed performance analysis of web applications on the iPhone. Yahoo! analyzed the full capabilities of the iPhone’s Safari browser including browser cache and transfer speeds.
Cache persistence
The Safari browser on iPhone allocates memory from the shared system memory but does not save web content into persistent storage. Any cached objects (CSS, JavaScript, images, etc.) are removed from memory on reboot.
Optimal component size
Safari for iPhone will only cache files 25 KB or smaller served using the Expires
explicit expiration time or Cache-Control
max-age
directive HTTP headers. Safari decodes the file before saving it cache, meaning your total unzipped file size must squeeze under the 25 KB ceiling to hit the cache. Components already in cache are only replaced by new cacheable components using the least recently used algorithm.
Safari for iPhone is able to cache a maximum of 19 external components, placing a maximum cache limit at around 475 KB.
Download speed
Yahoo! found typical download iPhone download speeds vary from 82 kbps to 150 kbps when connected to a GSM cellular data network. Wi-Fi connections over an 802.11b/g networks obviously speed up the experience, but pages should assume cellular data load times when designing for a compelling user experience.
Summary
Web applications built for the iPhone’s Safari browser need to specifically target web performance these small devices and special cache rules. Desktop browser best practices such as zipped components and combined files for CSS and JavaScript may be too bloated for the Safari mobile browser. A few tips:
- Limit cacheable components to a decompressed size of 25 KB or less
- Limit yourself to 19 or less cached components
- Minify CSS and JavaScript for slimmer file weights.
- Use CSS sprites to combine multiple small images into a shared image under 25 KB