Velocity 2012 - Taming the Mobile Beast
•
79 likes•54,258 views
Presentation by Matt Welsh and Patrick Meenan from Google on tools and things to be aware of when developing for the mobile web.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Velocity 2012 - Taming the Mobile Beast
Similar to Velocity 2012 - Taming the Mobile Beast (20)
More from Patrick Meenan
More from Patrick Meenan (20)
Recently uploaded
Recently uploaded (20)
Velocity 2012 - Taming the Mobile Beast
- 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
- 10. WebPageTest - www.webpagetest.org Web Page Test now supports Android and iOS!
- 11. Waterfall Basics
- 13. Waterfalls as seen by HARViewer DNS TCP Waiting Receiving Lookup Connect for response response
- 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
- 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.
- 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!
- 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
- 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.
- 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