This document discusses best practices for developing high performance mobile web applications for the iPad. It covers setting up a high performance infrastructure with load balancing and distributed caching. It also discusses following YSlow and mobile web best practices such as minimizing requests, optimizing caching, reducing cookies, and optimizing HTML and CSS. Special considerations for the iPad are also covered, such as touch events, viewport dimensions, lower cache limits, slower CPU and network speeds. The document stresses that performance optimization requires trade-offs and provides references for further reading on high performance web development.

1. 1

2. Summary
• High Performance Infrastructure
• High Compatibility UI Pattern
• YSlow & Mobile Web Best Practices
• What’s Special on iPad?
2

3. Traffic
Load Balancer
Web Server Web Server Web Server Web Server
Server Farm (VM)
Distributed Cache Application Server
Server Farm Farm
3

4. MVC in JS at Client Browser
Controller – Script# View - jTemplate
Model – Restful Service
ASP.NET MVC 2
4

5. YSlow & Mobile Web Best Practices
• http://developer.yahoo.com/performance/rules.html
• http://www.w3.org/TR/mwabp/
Mini* More
Requests Cache
Optimized
Less
HTML &
Cookie
CSS
5

6. Mini* Requests
40-60% of visitors come in with an empty cache.
• CSS Sprites
• Merge CSS & JS
• Pre-load/Post-load
Minimize
• Minify CSS & JS
• Gzip
• JSON vs XML
Minify • Optimize image dimension and quality
6

7. Cache
80-90% of response time is for downloading resources.
Version and never expire static
resources
Set cache-control header for
cacheable dynamic resources
Use CDN
7

8. Cookie
Every request (even static resource) carries the
active cookie data at the same domain.
Eliminate unnecessary cookies
Set cookie at minimal domain level
Expire cookie ASAP
Minimize cookie size
8

9. Optimize HTML & CSS
W3C Scripts at
Validation Bottom
Avoid
External
Empty
CSS & JS
Image src
9

10. What’s Special on iPad?
New Cache Instable
New Events Slower CPU
Dimensions Limitation Network
255K -
Slower
cacheable
Tap Viewport HTML
request Connection
Engine
size Lost
Slower
1.5M - in
Touch Scale CSS
Memory
Engine
Speed
5~25M - Slower JS Variable
Pinch Rotation
Offline Engine
10

11. Map Touch Events to Mouse Events
Touch Mouse
Start Down
Touch Mouse
Move Move
Touch Mouse
End Up
11

12. Tap Is Not Mouse Click
Mouse Mouse Mouse
Click Down Up
Tap
Touch Touch
Start End
Optimized Touch
Tap Start
12

13. UIWebView Is Not Safari
Rotation not Work
Could not Disable Offline Cache
Stricter HTML Parser
13

14. 1.5M In-memory Cache Is Useless
255K (15K Never
in iPhone) Persisted
14

15. Offline Cache Optimization
UI for downloading & updateready
AJAX for Pre-load and Post-load
Big CSS Sprite
Dynamically Load JS & CSS
Inline Base64 Image Binary in HTML, CSS &
JS
15

16. Optimize JS Performance
Avoid Long JS Execution
Use Asynchronous AJAX
Use window.setTimeout
16

17. Video and Audio Streaming
Automatically switch among different bitrates
17

18. Native App Work with UIWebView
Access Local Resources, e.g. Microphone
Detect & Notify Connection Lost
Move Heavy Computing to Native C/C++
Behave Like Native App
Release Web App is Cheaper
18

19. Page Communicate with Native App
Periodically Custom
Rather
Eval JS Address in
than
from App Page
19

20. Summary
• High Performance Infrastructure
o Cloud
• High Compatibility UI Pattern
o MVC
• YSlow & Mobile Web Best Practices
o Mini* Requests
o More Cache
o Less Cookie
o Optimized HTML & CSS
• What’s Special on iPad?
o New Events
o New Dimensions
o Cache Limitation
o Slower CPU
o Instable Network
20

21. Everything Is Trade-off
Even for Most Ideal Cases
-- Steven Souders
21

22. Further Reading
• High Performance Web Sites: Essential Knowledge for
Front-End Engineers
• Even Faster Web Sites: Performance Best Practices for
Web Developers
22

23. 23

24. Thanks
&
Happy New Year
2011
24