Taming theMobile BeastPatrick Meenan   Matt Welsh@patmeenan       @mdwelsh                                http://www.flick...
Mobile is huge!2.25B Global Internet Users    1.1B Mobile Users                              Source: UN/ITU internetworlds...
For many, a mobile device is the                                                        only way to access the Internet   ...
... and growing with respect to desktop
Desktop Web Performance Optimization
Mobile Web Performance Optimization
What well cover today: Getting a handle on mobile web performance How to collect measurements on mobile devices Deep dive ...
Measurement Tools
Mobitest - www.blaze.io/mobile/
WebPageTest - www.webpagetest.org Web Page Test nowsupports Android and        iOS!
Waterfall Basics
Waterfall Components
Waterfalls as seen by HARViewer              DNS TCP       Waiting       Receiving              Lookup Connect for respons...
Studying Mobile Waterfalls
Visualizing a mobile website load (brown.edu)                                                75 seconds!
brown.edus mobile home page124 KB, 1800x800background image that is completely          obscured
The web was not designed for mobile Huge disparity between modern web design and mobile devices...  ●   Increasingly rich ...
Here Be Dragons● Making a mobile connection: Radio Resource Control● Browser connection limits● HTTP Pipelining● Caching: ...
Making a Mobile Connection
Typical Mobile Network Performance   Country         Average RTT   Average Downlink   Average Uplink Throughput           ...
Typical Mobile Network Performance   Country        Average RTT   Average Downlink   Average Uplink Throughput            ...
Bandwidth Impact         3G                       LTE                   20 Top sites measured in October, 2011
Latency Impact                                     3G                  LTE          DSL/                        Dial   20 ...
Making a Radio ConnectionBefore a cellular device can transmit or receive data, it has toestablish a radio channel with th...
Probing the Radio State MachineTry this sometime:Build a webpage that loads a small (1KB) image at increasingintervals. Wa...
Probing the Radio State MachineTry this sometime:Build a webpage that loads a small (1KB) image at increasingintervals. Wa...
The same thing on T-Mobile:                              1 sec delay                                  2 sec delay         ...
The same thing on T-Mobile:                              Between 2 and 3 sec,                              huge increase i...
Example 3G Radio Resource Control State Machine  No radio  connection                       Idle for 12 sec               ...
Browser Connection Limits
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Android...
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Android...
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on iOS 5: ...
Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Chrome ...
Browser Connection Limits - Summary         Browser                  Connections Per Domain   Total Connections         An...
Are more connections always better?Parallel TCP connections are typically used for two purposes:  1) Saturate the network ...
HTTP Pipelining
HTTP Pipelining  Been in the spec since HTTP/1.1, but largely ignored by desktop browser vendors  Originally thought it wo...
Carrier Network Proxies
Carrier network proxiesMost large carriers do transparent web proxyingSimple page with a 1MB JavaScript file, loaded over ...
Carrier network proxiesMost large carriers do transparent web proxyingSimple page with a 1MB JavaScript file, loaded over ...
JavaScript Execution Time
JavaScript Execution TimeJavaScript is typically a lot slower on mobile devices.       SunSpider benchmark results:Dual Co...
Browser Caching Behavior
Not all caches are created equalMobile browsers have small caches:Android 2.3:        8 MBiOS 5:              100 MB, but ...
Browsers != Embedded HTTP LibrariesCommon embedded HTTP libraries often have broken cachebehavior!java.net.URLConnectionja...
SummaryMobile networks have high round-trip-times: hundreds of ms.Mobile connections can take several seconds to get estab...
Roadmap Getting a handle on mobile web performance How to collect measurements on mobile devices Deep dive into mobile web...
Remote DebuggingChrome on Android
Remote Debugging Chrome on AndroidChrome on Android has full support for Chrome Developer Tools                           ...
Getting Started1) Fire up Chrome on your device2) Settings > Developer Tools > Enable USB Web debugging
Getting Started3) On desktop, run:   adb forward tcp:9222 localabstract:chrome_devtools_remote4) On desktop, visit:   http...
Getting Started5) Pick the tab you want to debug:
Getting Started6) Youll initially see a blank window:
Getting Started7) Hit reload on the phone to get a timeline:
So what can you do with this?Anything you can do with Chrome Dev Tools on desktop! ●   Network events timeline ●   Inspect...
Network events timelineEach resource is   one line                                                        Timeline        ...
Exploring a single request / response                                         Request Headers                             ...
Exploring the DOM Mouse over a DOM element                      Element is                    highlighted on              ...
CPU and memory profiling
CPU and memory profiling                           CPU profile of each                              JS function
CPU and memory profiling                           Timeline of page                            memory usage               ...
SummaryChrome for Android gives you tremendous visibility and controlthrough its remote debugging interface.Inspect and co...
Mobile Bookmarklets
Meta Bookmarklet               http://stevesouders.com/mobileperf/mobileperfbkm.php
Firebug Lite               http://getfirebug.com/firebuglite#Stable
YSlow Mobile               http://yslow.org/mobile/
Page Resources                 http://stevesouders.com/mobileperf/pageresources.php
Jdrop        http://jdrop.org
Page Resources - Jdrop
DOMMonster             http://mir.aculo.us/dom-monster/
Docsource            http://stevesouders.com/mobileperf/docsource.php
cssess         https://github.com/driverdan/cssess
Snoopy         http://snoopy.allmarkedup.com/
SpriteMe           http://spriteme.org/
Navigation timing bookmarklets       https://github.com/Yottaa/NavigationTimingBookmarklet       http://code.google.com/p/...
webkit Resource Timing                    Watch this space:      https://bugs.webkit.org/show_bug.cgi?id=61138
Other Tools
PageSpeed Insights               https://developers.google.com/speed/pagespeed/insights
PCAP Web Performance Analyzer                                     Web            tcpdump/packet capture                   ...
icy      http://calendar.perfplanet.com/2011/i-see-http/
iWebInspector                http://www.iwebinspector.com/
winre        http://people.apache.org/~pmuellr/weinre/docs/latest/
User Agent Switcher Extensions            https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg
WebPagetest User-Agent SpoofingsetUserAgent ...setViewportSize <width> <height>navigate www.cnn.com                      h...
Monitoring
Measuring mobile web behavior is hard! Most mobile browsers have no instrumentation interface. But, things are improving: ...
Know WHAT and HOW you are measuringKnow thy Browser● Real Device  ○ Native Browser  ○ App with embedded UIWebView● Simulat...
Latency Impact
Real-User Measurement                        dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
Google Analytics
TakeawaysDecide what and how you want to measureMobile performance deeply impacted by network and browser architectureMobi...
Google Booth - TalksTuesday, June 26 - Morning Break       10:15 – 10:30 : Site Speed Reports in Google Analytics: Measuri...
Google Booth - Office HoursTuesday, June 25 - Morning Break    10:30 - 10:30 : Q&A: Mobile Web Measurement with Matt and P...
Thank You!PatMeenan@gmail.com   @PatMeenanmdw@mdw.la            @mdwelsh
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile Beast
Upcoming SlideShare
Loading in...5
×

Velocity 2012 - Taming the Mobile Beast

46,155

Published on

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

Published in: Technology, Business
3 Comments
79 Likes
Statistics
Notes
  • thanks for your presentation, the tools recommended by you proved to be very useful
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • fffffffffffffffffffffffffffffffffffffffffffffffff
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • sdfsdfsdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
46,155
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
377
Comments
3
Likes
79
Embeds 0
No embeds

No notes for slide

Velocity 2012 - Taming the Mobile Beast

  1. 1. Taming theMobile BeastPatrick Meenan Matt Welsh@patmeenan @mdwelsh http://www.flickr.com/photos/nao-cha/2660459899/Google, Inc. Google, Inc.
  2. 2. Mobile is huge!2.25B Global Internet Users 1.1B Mobile Users Source: UN/ITU internetworldstats.com
  3. 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 Researchhttp://www.flickr.com/photos/43560604@N03/6845754798/
  4. 4. ... and growing with respect to desktop
  5. 5. Desktop Web Performance Optimization
  6. 6. Mobile Web Performance Optimization
  7. 7. 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
  8. 8. Measurement Tools
  9. 9. Mobitest - www.blaze.io/mobile/
  10. 10. WebPageTest - www.webpagetest.org Web Page Test nowsupports Android and iOS!
  11. 11. Waterfall Basics
  12. 12. Waterfall Components
  13. 13. Waterfalls as seen by HARViewer DNS TCP Waiting Receiving Lookup Connect for response response
  14. 14. Studying Mobile Waterfalls
  15. 15. Visualizing a mobile website load (brown.edu) 75 seconds!
  16. 16. brown.edus mobile home page124 KB, 1800x800background image that is completely obscured
  17. 17. 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.
  18. 18. 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
  19. 19. Making a Mobile Connection
  20. 20. 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
  21. 21. 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
  22. 22. Bandwidth Impact 3G LTE 20 Top sites measured in October, 2011
  23. 23. Latency Impact 3G LTE DSL/ Dial 20 Top sites measured in October, 2011 Cable
  24. 24. 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.
  25. 25. 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.
  26. 26. 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
  27. 27. The same thing on T-Mobile: 1 sec delay 2 sec delay 3 sec delay 4 sec delay 5 sec delay
  28. 28. The same thing on T-Mobile: Between 2 and 3 sec, huge increase in load time
  29. 29. 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
  30. 30. Browser Connection Limits
  31. 31. Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Android 2.3.5 Gingerbread: Total of 4 parallel connections
  32. 32. 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
  33. 33. Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on iOS 5: Looks like a lot of parallelism
  34. 34. Browser Connection LimitsThe number of parallel connections varies tremendously acrossmobile browsers.brown.edu on Chrome for Android: Also 6 connections per domain
  35. 35. 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.
  36. 36. 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
  37. 37. HTTP Pipelining
  38. 38. 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.
  39. 39. Carrier Network Proxies
  40. 40. Carrier network proxiesMost large carriers do transparent web proxyingSimple page with a 1MB JavaScript file, loaded over WiFi: 976KB, as expected
  41. 41. Carrier network proxiesMost large carriers do transparent web proxyingSimple page with a 1MB JavaScript file, loaded over WiFi: 976KB, as expectedThe same page, loaded on T-Mobile UMTS: 7.6KB !?!?!?!! T-Mobiles proxy uses gzip!
  42. 42. JavaScript Execution Time
  43. 43. JavaScript Execution TimeJavaScript is typically a lot slower on mobile devices. SunSpider benchmark results:Dual Core Mac Pro: 266.1 msGalaxy Nexus (stock browser): 1899 msGalaxy Nexus (Chrome): 1574 msiPhone 3GS (iOS 5): 4737 msiPhone 4S (iOS 5): 2200 msiPad 2 (iOS 5): 2097 ms
  44. 44. Browser Caching Behavior
  45. 45. 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.
  46. 46. 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.
  47. 47. SummaryMobile 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: Aint so fast.Not all mobile caches are created equal.
  48. 48. 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
  49. 49. Remote DebuggingChrome on Android
  50. 50. Remote Debugging Chrome on AndroidChrome on Android has full support for Chrome Developer Tools Desktop Chrome USB tethering
  51. 51. Getting Started1) Fire up Chrome on your device2) Settings > Developer Tools > Enable USB Web debugging
  52. 52. Getting Started3) On desktop, run: adb forward tcp:9222 localabstract:chrome_devtools_remote4) On desktop, visit: http://localhost:9222
  53. 53. Getting Started5) Pick the tab you want to debug:
  54. 54. Getting Started6) Youll initially see a blank window:
  55. 55. Getting Started7) Hit reload on the phone to get a timeline:
  56. 56. 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
  57. 57. Network events timelineEach resource is one line Timeline Size, type, time DOMContent onload event event
  58. 58. Exploring a single request / response Request Headers Response headers
  59. 59. Exploring the DOM Mouse over a DOM element Element is highlighted on device!
  60. 60. CPU and memory profiling
  61. 61. CPU and memory profiling CPU profile of each JS function
  62. 62. CPU and memory profiling Timeline of page memory usage Timeline of page events Size of DOM, #event listeners
  63. 63. 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.
  64. 64. Mobile Bookmarklets
  65. 65. Meta Bookmarklet http://stevesouders.com/mobileperf/mobileperfbkm.php
  66. 66. Firebug Lite http://getfirebug.com/firebuglite#Stable
  67. 67. YSlow Mobile http://yslow.org/mobile/
  68. 68. Page Resources http://stevesouders.com/mobileperf/pageresources.php
  69. 69. Jdrop http://jdrop.org
  70. 70. Page Resources - Jdrop
  71. 71. DOMMonster http://mir.aculo.us/dom-monster/
  72. 72. Docsource http://stevesouders.com/mobileperf/docsource.php
  73. 73. cssess https://github.com/driverdan/cssess
  74. 74. Snoopy http://snoopy.allmarkedup.com/
  75. 75. SpriteMe http://spriteme.org/
  76. 76. Navigation timing bookmarklets https://github.com/Yottaa/NavigationTimingBookmarklet http://code.google.com/p/navlet/ https://github.com/kaaes/timing
  77. 77. webkit Resource Timing Watch this space: https://bugs.webkit.org/show_bug.cgi?id=61138
  78. 78. Other Tools
  79. 79. PageSpeed Insights https://developers.google.com/speed/pagespeed/insights
  80. 80. PCAP Web Performance Analyzer Web tcpdump/packet capture http://pcapperf.appspot.com/
  81. 81. icy http://calendar.perfplanet.com/2011/i-see-http/
  82. 82. iWebInspector http://www.iwebinspector.com/
  83. 83. winre http://people.apache.org/~pmuellr/weinre/docs/latest/
  84. 84. User Agent Switcher Extensions https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg
  85. 85. WebPagetest User-Agent SpoofingsetUserAgent ...setViewportSize <width> <height>navigate www.cnn.com https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setUserAgent
  86. 86. Monitoring
  87. 87. 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)
  88. 88. 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....?
  89. 89. Latency Impact
  90. 90. Real-User Measurement dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
  91. 91. Google Analytics
  92. 92. 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!
  93. 93. 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”
  94. 94. 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
  95. 95. Thank You!PatMeenan@gmail.com @PatMeenanmdw@mdw.la @mdwelsh
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×