Velocity 2012 - Taming the Mobile Beast
-
Upload
patrick-meenan -
Category
Technology
-
view
42.753 -
download
1
description
Transcript of Velocity 2012 - Taming the Mobile Beast
![Page 1: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/1.jpg)
Taming theMobile BeastPatrick Meenan Matt Welsh@patmeenan @mdwelsh
Google, Inc. Google, Inc.
http
://w
ww
.flic
kr.c
om/p
hoto
s/na
o-ch
a/26
6045
9899
/
![Page 2: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/2.jpg)
2.25B Global Internet Users
1.1B Mobile Users
Source: UN/ITU internetworldstats.com
Mobile is huge!
![Page 3: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/3.jpg)
Source: OnDevice Research
For many, a mobile device is the only way to access the Internet
CountryMobile-Only
Internet Users
Egypt 70%
India 59%
South Africa 57%
Indonesia 44%
United States 25%
http://www.flickr.com/photos/43560604@N03/6845754798/
![Page 4: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/4.jpg)
... and growing with respect to desktop
![Page 5: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/5.jpg)
Desktop Web Performance Optimization
![Page 6: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/6.jpg)
Mobile Web Performance Optimization
![Page 7: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/7.jpg)
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
![Page 8: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/8.jpg)
Measurement Tools
![Page 9: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/9.jpg)
Mobitest - www.blaze.io/mobile/
![Page 10: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/10.jpg)
WebPageTest - www.webpagetest.org
Web Page Test now supports Android and
iOS!
![Page 11: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/11.jpg)
Waterfall Basics
![Page 12: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/12.jpg)
Waterfall Components
![Page 13: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/13.jpg)
Waterfalls as seen by HARViewer
DNS TCP Waiting Receiving Lookup Connect for response response
![Page 14: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/14.jpg)
Studying Mobile Waterfalls
![Page 15: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/15.jpg)
Visualizing a mobile website load (brown.edu)
75 seconds!
![Page 16: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/16.jpg)
brown.edu's mobile home page
124 KB, 1800x800background image that is completely
obscured
![Page 17: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/17.jpg)
![Page 18: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/18.jpg)
![Page 19: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/19.jpg)
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.
![Page 20: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/20.jpg)
● 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
![Page 21: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/21.jpg)
Making a Mobile Connection
![Page 22: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/22.jpg)
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
![Page 23: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/23.jpg)
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
![Page 24: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/24.jpg)
Bandwidth Impact
20 Top sites measured in October, 2011
3G
LTE
![Page 25: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/25.jpg)
Latency Impact
20 Top sites measured in October, 2011DSL/Cable Dial
3G
LTE
![Page 26: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/26.jpg)
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.
![Page 27: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/27.jpg)
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.
![Page 28: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/28.jpg)
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
![Page 29: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/29.jpg)
The same thing on T-Mobile:
1 sec delay
2 sec delay
3 sec delay
4 sec delay
5 sec delay
![Page 30: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/30.jpg)
The same thing on T-Mobile:
Between 2 and 3 sec,huge increase in load time
![Page 31: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/31.jpg)
Example 3G Radio Resource Control State Machine
Data from: http://www.eecs.umich.edu/~fengqian/paper/aro_mobisys11.pdf
IDLE
No radioconnection
CELL_DCH
Dedicated radio channel
CELL_FACH
Sharedradio channelTransmit 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
![Page 32: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/32.jpg)
Browser Connection Limits
![Page 33: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/33.jpg)
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
![Page 34: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/34.jpg)
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
![Page 35: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/35.jpg)
The number of parallel connections varies tremendously across mobile browsers.
brown.edu on iOS 5:
Browser Connection Limits
Looks like a lot of parallelism
![Page 36: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/36.jpg)
The number of parallel connections varies tremendously across mobile browsers.
brown.edu on Chrome for Android:
Browser Connection Limits
Also 6 connections per domain
![Page 37: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/37.jpg)
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.
![Page 38: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/38.jpg)
Are more connections always better?
Parallel TCP connections are typically used for two purposes:1) Saturate the network2) 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
![Page 39: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/39.jpg)
HTTP Pipelining
![Page 40: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/40.jpg)
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.
![Page 41: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/41.jpg)
Carrier Network Proxies
![Page 42: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/42.jpg)
Carrier network proxies
Most large carriers do transparent web proxying
Simple page with a 1MB JavaScript file, loaded over WiFi:
976KB, as expected
![Page 43: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/43.jpg)
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!
![Page 44: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/44.jpg)
JavaScript Execution Time
![Page 45: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/45.jpg)
JavaScript is typically a lot slower on mobile devices.SunSpider benchmark results:
Dual Core Mac Pro: 266.1 ms
Galaxy Nexus (stock browser): 1899 msGalaxy Nexus (Chrome): 1574 ms
iPhone 3GS (iOS 5): 4737 msiPhone 4S (iOS 5): 2200 msiPad 2 (iOS 5): 2097 ms
JavaScript Execution Time
![Page 46: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/46.jpg)
Browser Caching Behavior
![Page 47: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/47.jpg)
Mobile browsers have small caches:
Android 2.3: 8 MBiOS 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
![Page 48: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/48.jpg)
Common embedded HTTP libraries often have broken cache behavior!java.net.URLConnectionjava.net.HttpURLConnectionorg.apache.http.client.HttpClient
None of these do any caching at all.
android.webkit.WebViewDoes caching, but does not support redirection.
NSURLRequest - iOS5Does caching, but total cache size is 1 MB for small objects, 40 MB for large objects, 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.
![Page 49: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/49.jpg)
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
![Page 50: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/50.jpg)
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
![Page 51: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/51.jpg)
Remote DebuggingChrome on Android
![Page 52: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/52.jpg)
Chrome on Android has full support for Chrome Developer Tools
Remote Debugging Chrome on Android
USB tethering
Desktop Chrome
![Page 53: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/53.jpg)
1) Fire up Chrome on your device
2) Settings > Developer Tools > Enable USB Web debugging
Getting Started
![Page 54: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/54.jpg)
3) On desktop, run:
adb forward tcp:9222 localabstract:chrome_devtools_remote
4) On desktop, visit:
http://localhost:9222
Getting Started
![Page 55: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/55.jpg)
5) Pick the tab you want to debug:
Getting Started
![Page 56: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/56.jpg)
6) You'll initially see a blank window:
Getting Started
![Page 57: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/57.jpg)
7) Hit reload on the phone to get a timeline:
Getting Started
![Page 58: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/58.jpg)
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?
![Page 59: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/59.jpg)
Network events timeline
Each resource is one line
Size, type, time
Timeline
DOMContentevent onload event
![Page 60: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/60.jpg)
Exploring a single request / response
Request Headers
Response headers
![Page 61: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/61.jpg)
Exploring the DOM
Mouse over a DOM element
Element is highlighted on
device!
![Page 62: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/62.jpg)
CPU and memory profiling
![Page 63: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/63.jpg)
CPU and memory profiling
CPU profile of each JS function
![Page 64: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/64.jpg)
CPU and memory profiling
Timeline of page memory usage
Timeline of page events
Size of DOM,#event listeners
![Page 65: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/65.jpg)
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/L1zXTXVery similar interface and functionality.
Summary
![Page 66: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/66.jpg)
Mobile Bookmarklets
![Page 67: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/67.jpg)
http://stevesouders.com/mobileperf/mobileperfbkm.php
Meta Bookmarklet
![Page 68: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/68.jpg)
http://getfirebug.com/firebuglite#Stable
Firebug Lite
![Page 70: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/70.jpg)
http://stevesouders.com/mobileperf/pageresources.php
Page Resources
![Page 72: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/72.jpg)
Page Resources - Jdrop
![Page 73: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/73.jpg)
http://mir.aculo.us/dom-monster/
DOMMonster
![Page 74: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/74.jpg)
http://stevesouders.com/mobileperf/docsource.php
Docsource
![Page 75: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/75.jpg)
https://github.com/driverdan/cssess
cssess
![Page 78: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/78.jpg)
https://github.com/Yottaa/NavigationTimingBookmarklethttp://code.google.com/p/navlet/https://github.com/kaaes/timing
Navigation timing bookmarklets
![Page 79: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/79.jpg)
https://bugs.webkit.org/show_bug.cgi?id=61138
webkit Resource Timing
Watch this space:
![Page 80: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/80.jpg)
Other Tools
![Page 81: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/81.jpg)
https://developers.google.com/speed/pagespeed/insights
PageSpeed Insights
![Page 82: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/82.jpg)
http://pcapperf.appspot.com/
PCAP Web Performance Analyzer
Web
tcpdump/packet capture
![Page 83: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/83.jpg)
http://calendar.perfplanet.com/2011/i-see-http/
icy
![Page 84: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/84.jpg)
http://www.iwebinspector.com/
iWebInspector
![Page 85: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/85.jpg)
http://people.apache.org/~pmuellr/weinre/docs/latest/
winre
![Page 86: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/86.jpg)
https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg
User Agent Switcher Extensions
![Page 87: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/87.jpg)
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting#TOC-setUserAgent
WebPagetest User-Agent SpoofingsetUserAgent ...setViewportSize <width> <height>navigate www.cnn.com
![Page 88: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/88.jpg)
Monitoring
![Page 89: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/89.jpg)
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)
![Page 90: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/90.jpg)
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
![Page 91: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/91.jpg)
Latency Impact
![Page 92: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/92.jpg)
Real-User Measurement
dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
![Page 93: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/93.jpg)
Google Analytics
![Page 94: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/94.jpg)
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
![Page 95: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/95.jpg)
Tuesday, June 26 - Morning Break10:15 – 10:30 : Site Speed Reports in Google Analytics: Measuring your website’s performance
Afternoon Break3:10 – 3:25 : Measuring user perceived latency with Google Analytics Site Speed reports:
hands-on demo and insights3:30 – 3:45 : Async Scripts and why you care, particularly for third-party content
Wednesday, June 27th - Morning Break10:00 – 10:15 : PageSpeed Automatic Optimizations10:15 – 10:30 : PageSpeed Insights for Chrome with mobile support – Demo
Afternoon Break3:10pm – 3:25pm : Measuring Web Performance3:30pm – 3:45pm : HTTP Streaming – discuss the true latency bottleneck with
bi-directional HTTP streaming and “full-duplex HTTP”
Google Booth - Talks
![Page 96: Velocity 2012 - Taming the Mobile Beast](https://reader034.fdocuments.net/reader034/viewer/2022052521/540e3a558d7f72747e8b4cb9/html5/thumbnails/96.jpg)
Tuesday, June 25 - Morning Break10:30 - 10:30 : Q&A: Mobile Web Measurement with Matt and Pat
Tuesday, June 26 - Afternoon Break3:10 – 3:50 : Q&A: Your Chrome Wishlist, Suggestions and Questions
Wednesday, June 27 - Morning Break10:00 – 10:30 : Q&A: Performance monitoring with Google Analytics
Google Booth - Office Hours