Taming the Mobile Beast Patrick Meenan Matt Welsh @patmeenan - - PowerPoint PPT Presentation

Taming the Mobile Beast

Patrick Meenan Matt Welsh @patmeenan @mdwelsh Google, Inc. Google, Inc.

http://www.flickr.com/photos/nao-cha/2660459899/

2.25B Global Internet Users 1.1B Mobile Users

Source: UN/ITU internetworldstats.com

Mobile is huge!

Source: OnDevice Research

For many, a mobile device is the

• nly way to access the Internet

Country Mobile-Only Internet Users Egypt 70% India 59% South Africa 57% Indonesia 44% United States 25%

http://www.flickr.com/photos/43560604@N03/6845754798/

... and growing with respect to desktop

Desktop Web Performance Optimization

Mobile Web Performance Optimization

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

Measurement Tools

Mobitest - www.blaze.io/mobile/

WebPageTest - www.webpagetest.org

Web Page Test now supports Android and iOS!

Waterfall Basics

Waterfall Components

Waterfalls as seen by HARViewer

DNS TCP Waiting Receiving Lookup Connect for response response

Studying Mobile Waterfalls

Visualizing a mobile website load (brown.edu)

75 seconds!

brown.edu's mobile home page

124 KB, 1800x800 background image that is completely

• bscured

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.

• 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

Here Be Dragons

Making a Mobile Connection

Typical Mobile Network Performance

Country Average RTT Average Downlink Throughput Average Uplink 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 Source: Ookla/Speedtest.net

Compare to typical desktop and WiFi performance: < 50 ms RTT, 5 Mbps throughput in the US

Typical Mobile Network Performance

Country Average RTT Average Downlink Throughput Average Uplink 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 Source: Ookla/Speedtest.net

Things are changing fast! LTE promises < 100 ms RTT, 50+ Mbps downlink

Bandwidth Impact

20 Top sites measured in October, 2011 3G LTE

Latency Impact

20 Top sites measured in October, 2011

DSL/ Cable Dial

3G LTE

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.

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.

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

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

Data from: http://www.eecs.umich.edu/~fengqian/paper/aro_mobisys11.pdf

IDLE

No radio connection

CELL_ DCH

Dedicated radio channel

CELL_ FACH

Shared radio channel

Transmit data Delay: 1-2 sec Idle for 5 sec Idle for 12 sec Buffer size > threshold The exact delays and idle timeouts depend on the carrier, which equipment they have installed, and how it is configured. This depends on the network, not the device. Run your own test now! http://goo.gl/F5sKV

Browser Connection Limits

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

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

The number of parallel connections varies tremendously across mobile browsers.

brown.edu on iOS 5:

Browser Connection Limits

Looks like a lot of parallelism

The number of parallel connections varies tremendously across mobile browsers.

brown.edu on Chrome for Android:

Browser Connection Limits

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 256

Caveats: It takes a lot of experimentation and probing to get some

• f these numbers. iOS results, in particular, should be taken with a

grain 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 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

HTTP Pipelining

HTTP Pipelining

Been in the spec since HTTP/1.1, but largely ignored by desktop browser vendors Originally thought it would break the Internet

Several requests with identical start times, staggered completion times

Android 2.3.4 (Gingerbread)

Android Browser has been using pipelining for a long time! Mobile Safari on iOS 5 is using it now, too. Android ICS and Chrome do not use pipelining, however.

Carrier Network Proxies

Carrier network proxies

Most large carriers do transparent web proxying Simple page with a 1MB JavaScript file, loaded over WiFi:

976KB, as expected

Carrier network proxies

Most large carriers do transparent web proxying Simple page with a 1MB JavaScript file, loaded over WiFi: The same page, loaded on T-Mobile UMTS:

976KB, as expected 7.6KB !?!?!?!!

T-Mobile's proxy uses gzip!

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 JavaScript Execution Time

Browser Caching Behavior

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. Not all caches are created equal

Common embedded HTTP libraries often have broken cache behavior!

java.net.URLConnection java.net.HttpURLConnection

• rg.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

• bjects, no caching for objects > 2MB.

Browsers != Embedded HTTP Libraries

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.

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. Summary

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

Remote Debugging Chrome on Android

Chrome on Android has full support for Chrome Developer Tools Remote Debugging Chrome on Android

USB tethering Desktop Chrome

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

3) On desktop, run:

adb forward tcp:9222 localabstract:chrome_devtools_remote

4) On desktop, visit: http://localhost:9222 Getting Started

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

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

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

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

So what can you do with this?

Network events timeline

Each resource is

• ne line

Size, type, time Timeline DOMContent event

• nload event

Exploring a single request / response

Request Headers Response headers

Exploring the DOM

Mouse over a DOM element Element is highlighted on device!

CPU and memory profiling

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

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. Summary

Mobile Bookmarklets

http://stevesouders.com/mobileperf/mobileperfbkm.php

Meta Bookmarklet

http://getfirebug.com/firebuglite#Stable

Firebug Lite

http://yslow.org/mobile/

YSlow Mobile

http://stevesouders.com/mobileperf/pageresources.php

Page Resources

http://jdrop.org

Jdrop

Page Resources - Jdrop

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

DOMMonster

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

Docsource

https://github.com/driverdan/cssess

cssess

http://snoopy.allmarkedup.com/

Snoopy

http://spriteme.org/

SpriteMe

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

Navigation timing bookmarklets

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

Other Tools

https://developers.google.com/speed/pagespeed/insights

PageSpeed Insights

http://pcapperf.appspot.com/

PCAP Web Performance Analyzer

Web tcpdump/packet capture

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

icy

http://www.iwebinspector.com/

iWebInspector

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

winre

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

User Agent Switcher Extensions

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setUserAgent

WebPagetest User-Agent Spoofing

setUserAgent ... setViewportSize <width> <height> navigate www.cnn.com

Monitoring

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)

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....?

Know WHAT and HOW you are measuring

Latency Impact

Real-User Measurement

dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Google Analytics

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!

Takeaways

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”

Google Booth - Talks

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

Google Booth - Office Hours

Thank You!

PatMeenan@gmail.com @PatMeenan mdw@mdw.la @mdwelsh