Taming theMobile BeastPatrick Meenan Matt Welsh@patmeenan @mdwelsh http://www.flickr.com/photos/nao-cha/2660459899/Google, Inc. Google, Inc.
Mobile is huge!2.25B Global Internet Users 1.1B Mobile Users Source: UN/ITU internetworldstats.com
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 Researchhttp://www.flickr.com/photos/43560604@N03/6845754798/
What well 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 Androids remote debugger Mobile bookmarklets and other tools
Visualizing a mobile website load (brown.edu) 75 seconds!
brown.edus mobile home page124 KB, 1800x800background image that is completely obscured
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
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
Bandwidth Impact 3G LTE 20 Top sites measured in October, 2011
Latency Impact 3G LTE DSL/ Dial 20 Top sites measured in October, 2011 Cable
Making a Radio ConnectionBefore a cellular device can transmit or receive data, it has toestablish 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.
Probing the Radio State MachineTry this sometime:Build a webpage that loads a small (1KB) image at increasingintervals. Watch how long it takes to load.
Probing the Radio State MachineTry this sometime:Build a webpage that loads a small (1KB) image at increasingintervals. Watch how long it takes to load.Heres what it looks like on WiFi: Every image loads in ~120 ms
The same thing on T-Mobile: 1 sec delay 2 sec delay 3 sec delay 4 sec delay 5 sec delay
The same thing on T-Mobile: Between 2 and 3 sec, huge increase in load time
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
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Android 2.3.5 Gingerbread: Total of 4 parallel connections
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Android 4.0.4 Ice Cream Sandwich: Looks like 6 connections per domain
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on iOS 5: Looks like a lot of parallelism
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Chrome for Android: Also 6 connections per domain
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 256Caveats: It takes a lot of experimentation and probing to get someof these numbers. iOS results, in particular, should be taken with agrain of salt.
Are more connections always better?Parallel TCP connections are typically used for two purposes: 1) Saturate the network 2) Avoid head-of-line blockingOn 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
HTTP Pipelining Been in the spec since HTTP/1.1, but largely ignored by desktop browser vendors Originally thought it would break the InternetAndroid 2.3.4 (Gingerbread)Android Browser has been using pipelining for a long time! Several requests withMobile Safari on iOS 5 is using it now, too. identical start times, staggered completion timesAndroid ICS and Chrome do not use pipelining, however.
Not all caches are created equalMobile browsers have small caches:Android 2.3: 8 MBiOS 5: 100 MB, but not persistent!Android Chrome: 250 MBCompare to typical size of 512 MB or more for desktop browsers.
Browsers != Embedded HTTP LibrariesCommon embedded HTTP libraries often have broken cachebehavior!java.net.URLConnectionjava.net.HttpURLConnectionorg.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.
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 Androids remote debugger Mobile bookmarklets and other tools
CPU and memory profiling CPU profile of each JS function
CPU and memory profiling Timeline of page memory usage Timeline of page events Size of DOM, #event listeners
SummaryChrome for Android gives you tremendous visibility and controlthrough its remote debugging interface.Inspect and control the DOM, get timeline information, CPU andmemory profiling, and more.iOS6 is introducing Remote Debugging for Mobile Safari! http://bit.ly/L1zXTX Very similar interface and functionality.
Know WHAT and HOW you are measuringKnow thy Browser● Real Device ○ Native Browser ○ App with embedded UIWebView● Simulator● Changed User-Agent String in Desktop BrowserGroketh thy Connectivity● Carrier Network ○ Which Carrier ○ Carrier Rewriting Proxies● WiFi ○ Connected to....?
TakeawaysDecide what and how you want to measureMobile performance deeply impacted by network and browser architectureMobile measurement tools have their limits, but are maturing rapidlyThis stuff is hard, but its an exciting time to be alive!
Google Booth - TalksTuesday, 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 contentWednesday, 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”
Google Booth - Office HoursTuesday, June 25 - Morning Break 10:30 - 10:30 : Q&A: Mobile Web Measurement with Matt and PatTuesday, June 26 - Afternoon Break 3:10 – 3:50 : Q&A: Your Chrome Wishlist, Suggestions and QuestionsWednesday, June 27 - Morning Break 10:00 – 10:30 : Q&A: Performance monitoring with Google Analytics