This document discusses advanced mobile optimization techniques for websites and applications. It provides background on companies targeting US and European mobile users. It describes experiments delaying HTML delivery and monitoring impacts. It also discusses the complexity of mobile delivery compared to desktop and how the mobile cache can be optimized. It proposes techniques like scriptable caching tracked by user, deferring or canceling third-party scripts, using SPDY protocol, dynamically resizing images based on device, and dynamically adjusting payload based on connection type and latency. The goal is to measure success and determine how to make mobile experiences faster.

1. ADVANCED MOBILE OPTIMIZATION
How do we measure success? How does it work?

4. http://www.youtube.com/watch?v=UbXAkbs9RX8

8. http://www.youtube.com/watch?v=g9_S492uq_A

11. http://www.youtube.com/watch?v=-wom2PDUidY

14. Retail customer
COMPANY BACKGROUND
 Top 200 Internet Retailer site
 US based
 Target geography: US and Europe
 $3 billion in revenue
 30,000 employees

25. http://www.youtube.com/watch?v=BV4M9yXAW9E

27. http://www.youtube.com/watch?v=4SbMKhhw6IU

30. HTML DELAY EXPERIMENT
GOAL
 Determine impact of server delays
METHODOLOGY
 Delay before sending HTML page
 Different experiments with different delays
 Small % of traffic
 Monitor negative impact
SOURCE: ENTER SOURCE HERE

35. http://www.youtube.com/watch?v=UIlrnJsO_xA

37. Enterprise Application
COMPANY BACKGROUND
 Extranet application: login required
 Task based
 US based
 Target geography: US, Europe, and Asia
 Application launched in 2011
SOURCE: ENTER SOURCE HERE

39. http://www.youtube.com/watch?v=CCXD9eF2ekQ

42. http://www.youtube.com/watch?v=yl50jpM9iJ8

45. http://www.youtube.com/watch?v=XgYt71_wtKc

48. http://www.youtube.com/watch?v=GrcZ-nwhT4A

50. Advanced Mobile
Acceleration
© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 50

51. COMPONENTS OF A MOBILE WEB PAGE LOAD
*Diagram courtesy of Google.

52. MOBILE DELIVERY COMPLEXITY
Desktop Mobile
Screen size Big Small
Roundtrip time Low (20-50ms) High (100-300ms)
Bandwidth High Low
Navigation Mouse Touch
Processing speeds Fast Slow (10-20X slower)

53. MOBILE CACHE UNOPTIMIZED
Page 1 (First View) Page 1 (Repeat View) Page 2
? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?

54. MOBILE CACHE OPTIMIZED
Page 1 (First View) Page 1 (Repeat View) Page 2 (First View)

55. SCRIPTABLE CACHE + USER TRACKING

56. 3rd Party SLAs and timings
Defer inline scripts if they don’t meet the SLA.
e.g., If Optimost.com >200 ms, then defer.
Cancel scripts if they don’t meet the SLA.
e.g., If Optimost.com >500 ms, then cancel.

57. SPDY

58. Dynamic Image Resizing
5.5kb 3.8kb 1.5kb
Dynamic image
resizing based on
device type = Dramatic payload
reduction

59. Dynamic Payload Decision Making
WIFI 3G
Resources
for next
page(s)
Auto detect connection type and latency based on each
session

60. New IE6 problem?