Presentation by Matt Welsh and Patrick Meenan from Google on tools and things to be aware of when developing for the mobile web.

1. Taming the
Mobile Beast
Patrick Meenan Matt Welsh
@patmeenan @mdwelsh
http://www.flickr.com/photos/nao-cha/2660459899/
Google, Inc. Google, Inc.

2. Mobile is huge!
2.25B Global Internet Users
1.1B Mobile Users
Source: UN/ITU internetworldstats.com

3. For many, a mobile device is the
only way to access the Internet
Mobile-Only
Country Internet Users
Egypt 70%
India 59%
South Africa 57%
Indonesia 44%
United States 25%
Source: OnDevice Research
http://www.flickr.com/photos/43560604@N03/6845754798/

4. ... and growing with respect to desktop

5. Desktop Web Performance Optimization

6. Mobile Web Performance Optimization

7. What we'll cover today:
Getting a handle on mobile web performance
How to collect measurements on mobile devices
Deep dive into mobile web performance issues and common gotchas
Using Chrome for Android's remote debugger
Mobile bookmarklets and other tools

8. Measurement Tools

9. Mobitest - www.blaze.io/mobile/

10. WebPageTest - www.webpagetest.org
Web Page Test now
supports Android and
iOS!

11. Waterfall Basics

12. Waterfall Components

13. Waterfalls as seen by HARViewer
DNS TCP Waiting Receiving
Lookup Connect for response response

14. Studying Mobile Waterfalls

15. Visualizing a mobile website load (brown.edu)
75 seconds!

16. brown.edu's mobile home page
124 KB, 1800x800
background image
that is completely
obscured

19. The web was not designed for mobile
Huge disparity between modern web design and mobile devices...
● Increasingly rich content
● Highly dynamic pages
● Large amount of JavaScript to manipulate the page, perform asynchronous
work, fetch new content
● 3D acceleration, animations, complex graphics
... all sent using a crufty, somewhat broken protocol (HTTP)
The web is not just
<b>plain</b> <i>old</i> <blink>HTML</blink>
anymore - it is a complete application platform.

20. Here Be Dragons
● Making a mobile connection: Radio Resource Control
● Browser connection limits
● HTTP Pipelining
● Caching: Browsers vs. embedded HTTP libraries
● Carrier network proxying
● JavaScript execution time differences

21. Making a Mobile Connection

22. Typical Mobile Network Performance
Country Average RTT Average Downlink Average Uplink Throughput
Throughput
South Korea 278 ms 1.8 Mbps 723 Kbps
Vietnam 305 ms 1.9 Mbps 543 Kbps
US 344 ms 1.6 Mbps 658 Kbps
UK 372 ms 1.4 Mbps 782 Kbps
Russia 518 ms 1.1 Mbps 439 Kbps
India 654 ms 1.2 Mbps 633 Kbps
Nigeria 892 ms 541 Kbps 298 Kbps
Compare to typical desktop and WiFi performance:
< 50 ms RTT, 5 Mbps throughput in the US
Source: Ookla/Speedtest.net

23. Typical Mobile Network Performance
Country Average RTT Average Downlink Average Uplink Throughput
Throughput
South Korea 278 ms 1.8 Mbps 723 Kbps
Vietnam 305 ms 1.9 Mbps 543 Kbps
US 344 ms 1.6 Mbps 658 Kbps
UK 372 ms 1.4 Mbps 782 Kbps
Russia 518 ms 1.1 Mbps 439 Kbps
India 654 ms 1.2 Mbps 633 Kbps
Nigeria 892 ms 541 Kbps 298 Kbps
Things are changing fast!
LTE promises < 100 ms RTT, 50+ Mbps downlink
Source: Ookla/Speedtest.net

24. Bandwidth Impact
3G
LTE
20 Top sites measured in October, 2011

25. Latency Impact
3G
LTE
DSL/
Dial 20 Top sites measured in October, 2011
Cable

26. Making a Radio Connection
Before a cellular device can transmit or receive data, it has to
establish a radio channel with the network.
This can take several seconds!
Also, if no data is transmitted or received after a timeout,
the channel goes idle, requiring a new channel to be established.
This behavior can wreak havoc on web page load times.

27. Probing the Radio State Machine
Try this sometime:
Build a webpage that loads a small (1KB) image at increasing
intervals. Watch how long it takes to load.

28. Probing the Radio State Machine
Try this sometime:
Build a webpage that loads a small (1KB) image at increasing
intervals. Watch how long it takes to load.
Here's what it looks like on WiFi:
Every image loads in
~120 ms

29. The same thing on T-Mobile:
1 sec delay
2 sec delay
3 sec delay
4 sec delay
5 sec delay

30. The same thing on T-Mobile:
Between 2 and 3 sec,
huge increase in load time

31. Example 3G Radio Resource Control State Machine
No radio
connection Idle for 12 sec
CELL_
IDLE
FACH
Buffer size >
threshold Shared
radio channel
Transmit data
Delay: 1-2 sec
Idle for 5 sec
CELL_
DCH
The exact delays and idle timeouts depend on the
carrier, which equipment they have installed, and
Dedicated how it is configured.
radio channel
This depends on the network, not the device.
Run your own test now! http://goo.gl/F5sKV
Data from: http://www.eecs.umich.edu/~fengqian/paper/aro_mobisys11.pdf

32. Browser Connection Limits

33. Browser Connection Limits
The number of parallel connections varies tremendously across
mobile browsers.
brown.edu on Android 2.3.5 Gingerbread:
Total of 4 parallel
connections

34. Browser Connection Limits
The number of parallel connections varies tremendously across
mobile browsers.
brown.edu on Android 4.0.4 Ice Cream Sandwich:
Looks like 6
connections per
domain

35. Browser Connection Limits
The number of parallel connections varies tremendously across
mobile browsers.
brown.edu on iOS 5:
Looks like a lot of
parallelism

36. Browser Connection Limits
The number of parallel connections varies tremendously across
mobile browsers.
brown.edu on Chrome for Android:
Also 6 connections
per domain

37. Browser Connection Limits - Summary
Browser Connections Per Domain Total Connections
Android pre-Honeycomb 4 4
Android post-Honeycomb 6 256
iOS 4 4 30
iOS 5 6 52
Chrome for Android 6 256
Caveats: It takes a lot of experimentation and probing to get some
of these numbers. iOS results, in particular, should be taken with a
grain of salt.

38. Are more connections always better?
Parallel TCP connections are typically used for two purposes:
1) Saturate the network
2) Avoid head-of-line blocking
On 3G, more connections are not always a good idea:
- Each connection pays the cost of the TCP handshake
(200+ ms on typical 3G links)
- Parallel connections can adversely compete for the channel

39. HTTP Pipelining

40. HTTP Pipelining
Been in the spec since HTTP/1.1, but largely ignored by desktop browser vendors
Originally thought it would break the Internet
Android 2.3.4 (Gingerbread)
Android Browser has been using pipelining for a long time!
Several requests with
Mobile Safari on iOS 5 is using it now, too. identical start times,
staggered completion times
Android ICS and Chrome do not use pipelining, however.

41. Carrier Network Proxies

42. Carrier network proxies
Most large carriers do transparent web proxying
Simple page with a 1MB JavaScript file, loaded over WiFi:
976KB, as expected

43. Carrier network proxies
Most large carriers do transparent web proxying
Simple page with a 1MB JavaScript file, loaded over WiFi:
976KB, as expected
The same page, loaded on T-Mobile UMTS:
7.6KB !?!?!?!!
T-Mobile's proxy
uses gzip!

44. JavaScript Execution Time

45. JavaScript Execution Time
JavaScript is typically a lot slower on mobile devices.
SunSpider benchmark results:
Dual Core Mac Pro: 266.1 ms
Galaxy Nexus (stock browser): 1899 ms
Galaxy Nexus (Chrome): 1574 ms
iPhone 3GS (iOS 5): 4737 ms
iPhone 4S (iOS 5): 2200 ms
iPad 2 (iOS 5): 2097 ms

46. Browser Caching Behavior

47. Not all caches are created equal
Mobile browsers have small caches:
Android 2.3: 8 MB
iOS 5: 100 MB, but not persistent!
Android Chrome: 250 MB
Compare to typical size of 512 MB or more for desktop browsers.

48. Browsers != Embedded HTTP Libraries
Common embedded HTTP libraries often have broken cache
behavior!
java.net.URLConnection
java.net.HttpURLConnection
org.apache.http.client.HttpClient
None of these do any caching at all.
android.webkit.WebView
Does caching, but does not support redirection.
NSURLRequest - iOS5
Does caching, but total cache size is 1 MB for small objects, 40 MB for large
objects, no caching for objects > 2MB.
Web Caching on Smartphones: Ideal vs. Reality by Feng Qian, Kee Shen Quah, Junxian Huang, Jeffrey Erman, Alexandre Gerber, Z. Morley Mao, Subhabrata
Sen, and Oliver Spatscheck, Proceedings of ACM Mobisys 2012.

49. Summary
Mobile networks have high round-trip-times: hundreds of ms.
Mobile connections can take several seconds to get established.
HTTP pipelining: Coming to iOS, going away in Android.
Beware carrier network proxies.
JavaScript: Ain't so fast.
Not all mobile caches are created equal.

50. Roadmap
Getting a handle on mobile web performance
How to collect measurements on mobile devices
Deep dive into mobile web performance issues and common gotchas
Using Chrome for Android's remote debugger
Mobile bookmarklets and other tools

51. Remote Debugging
Chrome on Android

52. Remote Debugging Chrome on Android
Chrome on Android has full support for Chrome Developer Tools
Desktop Chrome
USB tethering

53. Getting Started
1) Fire up Chrome on your device
2) Settings > Developer Tools > Enable USB Web debugging

54. Getting Started
3) On desktop, run:
adb forward tcp:9222 localabstract:chrome_devtools_remote
4) On desktop, visit:
http://localhost:9222

55. Getting Started
5) Pick the tab you want to debug:

56. Getting Started
6) You'll initially see a blank window:

57. Getting Started
7) Hit reload on the phone to get a timeline:

58. So what can you do with this?
Anything you can do with Chrome Dev Tools on desktop!
● Network events timeline
● Inspect and manipulate the DOM
● Profile CPU and memory usage
● Performance audit

59. Network events timeline
Each resource is
one line
Timeline
Size, type, time
DOMContent
onload event
event

60. Exploring a single request / response
Request Headers
Response
headers

61. Exploring the DOM
Mouse over a
DOM element
Element is
highlighted on
device!

62. CPU and memory profiling

63. CPU and memory profiling
CPU profile of each
JS function

64. CPU and memory profiling
Timeline of page
memory usage
Timeline of page
events
Size of DOM,
#event listeners

65. Summary
Chrome for Android gives you tremendous visibility and control
through its remote debugging interface.
Inspect and control the DOM, get timeline information, CPU and
memory profiling, and more.
iOS6 is introducing Remote Debugging for Mobile Safari!
http://bit.ly/L1zXTX
Very similar interface and functionality.

66. Mobile Bookmarklets

67. Meta Bookmarklet
http://stevesouders.com/mobileperf/mobileperfbkm.php

68. Firebug Lite
http://getfirebug.com/firebuglite#Stable

69. YSlow Mobile
http://yslow.org/mobile/

70. Page Resources
http://stevesouders.com/mobileperf/pageresources.php

71. Jdrop
http://jdrop.org

72. Page Resources - Jdrop

73. DOMMonster
http://mir.aculo.us/dom-monster/

74. Docsource
http://stevesouders.com/mobileperf/docsource.php

75. cssess
https://github.com/driverdan/cssess

76. Snoopy
http://snoopy.allmarkedup.com/

77. SpriteMe
http://spriteme.org/

78. Navigation timing bookmarklets
https://github.com/Yottaa/NavigationTimingBookmarklet
http://code.google.com/p/navlet/
https://github.com/kaaes/timing

79. webkit Resource Timing
Watch this space:
https://bugs.webkit.org/show_bug.cgi?id=61138

80. Other Tools

81. PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights

82. PCAP Web Performance Analyzer
Web
tcpdump/packet capture
http://pcapperf.appspot.com/

83. icy
http://calendar.perfplanet.com/2011/i-see-http/

84. iWebInspector
http://www.iwebinspector.com/

85. winre
http://people.apache.org/~pmuellr/weinre/docs/latest/

86. User Agent Switcher Extensions
https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

87. WebPagetest User-Agent Spoofing
setUserAgent ...
setViewportSize <width> <height>
navigate www.cnn.com
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setUserAgent

88. Monitoring

89. Measuring mobile web behavior is hard!
Most mobile browsers have no instrumentation interface.
But, things are improving:
Chrome for Android and Mobile Safari in iOS6 have a rich debug interface
(more later!)
Web Page Test and Blaze.io mobile agents use clever tricks:
- Use embedded WebView components, not real browsers
- On Android: run tcpdump to capture network packets
- On iOS: Instrument pages using JavaScript
Caveat:
- Not all events available on iOS (e.g., no DNS lookup or TCP connect times)

90. Know WHAT and HOW you are measuring
Know thy Browser
● Real Device
○ Native Browser
○ App with embedded UIWebView
● Simulator
● Changed User-Agent String in Desktop Browser
Groketh thy Connectivity
● Carrier Network
○ Which Carrier
○ Carrier Rewriting Proxies
● WiFi
○ Connected to....?

91. Latency Impact

92. Real-User Measurement
dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

93. Google Analytics

94. Takeaways
Decide what and how you want to measure
Mobile performance deeply impacted by network and browser architecture
Mobile measurement tools have their limits, but are maturing rapidly
This stuff is hard, but it's an exciting time to be alive!

95. Google Booth - Talks
Tuesday, June 26 - Morning Break
10:15 – 10:30 : Site Speed Reports in Google Analytics: Measuring your website’s performance
Afternoon Break
3:10 – 3:25 : Measuring user perceived latency with Google Analytics Site Speed reports:
hands-on demo and insights
3:30 – 3:45 : Async Scripts and why you care, particularly for third-party content
Wednesday, June 27th - Morning Break
10:00 – 10:15 : PageSpeed Automatic Optimizations
10:15 – 10:30 : PageSpeed Insights for Chrome with mobile support – Demo
Afternoon Break
3:10pm – 3:25pm : Measuring Web Performance
3:30pm – 3:45pm : HTTP Streaming – discuss the true latency bottleneck with
bi-directional HTTP streaming and “full-duplex HTTP”

96. Google Booth - Office Hours
Tuesday, June 25 - Morning Break
10:30 - 10:30 : Q&A: Mobile Web Measurement with Matt and Pat
Tuesday, June 26 - Afternoon Break
3:10 – 3:50 : Q&A: Your Chrome Wishlist, Suggestions and Questions
Wednesday, June 27 - Morning Break
10:00 – 10:30 : Q&A: Performance monitoring with Google Analytics

97. Thank You!
PatMeenan@gmail.com @PatMeenan
mdw@mdw.la @mdwelsh