1.
@yottaa #WebPerf
So you want to build a
mobile app…
Brought to you by:

2.
@yottaa #WebPerf
Available info, tooling driven by market
http://ti.me/18FeIn4

3.
@yottaa #WebPerf
Prioritize based on volume
Share (%) of Smartphone Subscribers
January 2013 April 2013 Delta
Google 52.3% 52.0% -0.3%
Apple 37.8% 39.2% 1.4%
BlackBerry 5.9% 5.1% -0.8%
Microsoft 3.1% 3.0% -0.1%
Symbian 0.5% 0.5% 0.0%
http://bit.ly/1bRw6FC

4.
@yottaa #WebPerf
Prioritize further: who are your users?
Your momma’s… got game!
It’s actually Gen-Xers.
Millennials are into
fitness & entertainment
http://blog.flurry.com/

5.
@yottaa #WebPerf
What do your target users do and use?
80% of mobile
interaction is via
native apps
HTML5 apps are
great for:
• Productivity
• News
• Generally - forms
http://bit.ly/17G1Ng5

6.
@yottaa #WebPerf
Why are only 6% of apps HTML5?
No app store makes
it more difficult to
monetize
Build once, run
everywhere
translates to optimize
everywhere
HTML5’s “good
enough” experience
isn’t always good
enough

7.
@yottaa #WebPerf
For LinkedIN it the ecosystem was lacking
2012: HTML5 for efficiency & agility
8-10%
Mobile
users
Apps
running
out of
Memory
Lacked
testing &
profiling
2013: Native for user experience
Majority of
Traffic from
mobile
Better
features (use
HTML5, CSS
for email)
Apple and
Google drive
innovation
http://bit.ly/15NdyAg

8.
@yottaa #WebPerf
High-level Overview
Governing body: W3C
• 5 years to ratify…
• 200+ browser
interpretations
More security
vulnerabilities
• Can’t encrypt cached
data
• Encrypting data in motion
compromises
performance

9.
@yottaa #WebPerf
High-level Overview
Governing bodies: Apple and
Google
• At least one release/year
• iOS is highly standardized
& regulated
• More Android variety, but
still finite (~30 varieties vs.
over 200 for HTML5)
Better user experience
• Fewer security
vulnerabilities
• Device-specific
functionality is richer

10.
@yottaa #WebPerf
OK, to be fair…
http://blog.flurry.com
Over the past two years, Android has had 21 updates to their browser.

11.
@yottaa #WebPerf
What do you hold most dear?
1. User experience
2. Performance
3. Monetization
4. X-plat deployment $$
5. Fragmentation
6. Programming expertise
7. Updates & distribution
8. New innovation timeline
9. Security

12.
@yottaa #WebPerf
A bit of trivia
http://bit.ly/15iQlqz
STARTUP TIME W/8 TABS
AVERAGE STARTUP TIME
40-TAB LOAD (CACHED, HOT)
WEBKIT SUNSPIDER
JSBENCH
FACEBOOK JSGAMEBENCH
HARDWARE ACCELERATION
PAGE LOAD RELIABILITY
OVERALL WINNER

13.
@yottaa #WebPerf
Test…Testing…Testing 1, 2, 3
Question: How do your features
Appear to
your users?
Behave in
the wild?
Impact the
device?
Perform across
networks?

14.
@yottaa #WebPerf
Appearances
http://bit.ly/133ijam

15.
@yottaa #WebPerf
To Emulate or Simulate?
Emulator
• Mimics device hardware & software
• Android developers tend to complain about
performance
• Emulates GPU but tends to lag (instructions translated
to x86)
Simulator
• Mimics device software
• Apple stresses device testing b/c disk space, CPU &
memory speed different
• Faster cycle times, but requires recompiling to device
http://bit.ly/17G2hTH

16.
@yottaa #WebPerf
How to determine browser features
• UA sniffing
– Poor choice – detects
navigator.userAgent
– User agent string may have changed
– New browser versions or flavors
• Feature detection
– HTML5 + CSS3
– JavaScript

17.
@yottaa #WebPerf
rng.io - Ringmark
OSS maintained by Facebook @
https://github.com/facebook/rng.io
Native UX testing & development
Works with existing W3C tests
Full list of supported features across
browsers: http://bit.ly/1c0jDOj
Check whether an API is usable &
produces expected, specified output

18.
@yottaa #WebPerf
Grab the brass browser ring
Ring 0
State of the world today.
Actively used mobile web features.
• Application Cache
• Canvas
• CSS 2.1
• CSS 3D Transforms
• CSS3 Animation
• CSS3 Background
• CSS3 Color
• CSS Min, Max
• CSS Opacity
• CSS3 Text
• CSS3 2D Transforms
• CSS3 Transitions
• CSS3 UI
• CSS3 Values
• Data URL
• Doctype
• Geolocation
• JSON
• Masking Images
• Web Messaging
• Progress Event
• Prompts
• Selectors 2
• Video
• Viewport
• Web Storage
Ring 1
Enable 2D game, audio, video, camera
Most popular types of mobile apps today.
• Audio, Multi-Track
• Blob
• CSS3 Background, Standard
• CSS3 Fonts
• CSS3 MediaQueries
• CSS Overflow Scrolling
• CSS Position Fixed
• CSS3 Text, Standard
• CSS3 UI, Standard
• Device Orientation Event
• FileReader
• FormData
• HTML5 Forms, Inputs
• Hashchange
• History
• Media Capture Input
• IndexedDB
• Multi Touch Event
• Offline Mode
• Ring 1 Performance
• Touch Event
• URL
• Web Workers
• XHR2
Ring 2
3D games, messaging, video streaming
Work in progress.
• Animation Timing
• Canvas 3D
• Canvas 3D, Standard
• CSS Unspecified
• CSS3 Animation, Standard
• CSS3 BorderImage
• CSS Element
• CSS3 Flexbox
• CSS3 Flexbox, Standard
• CSS3 Images
• CSS3 Images, Standard
• CSS Overflow Scrolling, Standard
• CSS3 2D Transforms, Standard
• CSS3 Transitions, Standard
• Custom Data Attributes
• Fullscreen
• HTML5 Layout & Semantic
• Iframe Sandboxing
• IndexedDB, Standard
• Performance Timing
• Network Info
• Notifications
• Ring 2 Performance
• SharedWorkers
• SVG
• SVG Animation
• SVG Inline
• Video Tracks
• Vibration
• Page Visibility
• WebRTC (Real time Audio & Video)

19.
@yottaa #WebPerf
How Ringmark works
test("postMessage", function() {
var postMessage = window.postMessage;
assert( !!postMessage, "postMessage supported" );
});
test("onmessage", function() {
assert( "onmessage" in window, "onmessage supported" );
});
asyncTest("postMessage/onmessage In Practice", function( async ) {
window.onmessage = function( event ) {
async.step(function() {
assert( true, "onmessage event fired" );
assert( event.data === "This is Ground Control", "message
content matched expected" );
async.done();
});
};
window.postMessage( "This is Ground Control", "*" );
});

20.
@yottaa #WebPerf
Lord of the Rings: Dolphin (and BB10)
Also: http://www.browserscope.org/?category=ringmark&v=top-m
http://www.youtube.com/watch?v=8KAXh81hIwY

21.
@yottaa #WebPerf
Modernizr
javascript library
For development
with HTML5 + CSS3
Ensure support for
old browsers
Checks for native
browser support of
new web features
Generates custom
object to test what
you need

22.
@yottaa #WebPerf
Example method in Modernizr
Polyfills are
scripts that
simulate the
behavior of
native API in
older browsers
This method:
Modernizr.load
has been
released
standalone as
yesnope.js
Modernizr.load([
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run analytics after you've already run the rest of your app.
'post-analytics.js'
]);

23.
@yottaa #WebPerf
Using Modernizr
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
• Modernizr attempts
to load a script that
requires jQuery
• Immediately after, it
tests to determine
whether the jQuery
object is available
• If not, loads a local
copy of jQuery
WIN: Modernizr.load
handles the execution
order for you.

24.
@yottaa #WebPerf
Useful Links
The All-In-One Entirely-Not-Alphabetical No-
Bullshit Guide to HTML5 Fallbacks (yes, really)
http://bit.ly/12griWY
Writing Cross-Browser JavaScript Polyfills
http://addyosmani.com/blog/writing-polyfills/
Ultimate Guide to Mobile Emulators & Simulators
http://www.mobilexweb.com/emulators

25.
@yottaa #WebPerf
Has.js
phiggins42./has.js
on Github
For development
with JavaScript
Self-contained tests
& unified framework
Checks for native
browser support of
JavaScript features
Modular/a-la-carte to
test only what you
need
if(has("function-
bind")){
// your enviroment
has a native
Function.prototype.bin
d
}else{
// you should get
a new browser.
}

26.
@yottaa #WebPerf
Networks
@yottaa #WebPerf

27.
@yottaa #WebPerf
AT&T Application Resource Optimizer
• All Platforms
– pcap/tcpdump network trace
– Wi-Fi Hotspot + Wireshark/NetMon
• iOS
– Remote Virtual Interface
– Uses Instruments to collect pcap over 3G/LTE
• Android
– Native Collector
– Requires root
https://github.com/attdevsupport/ARO

28.
@yottaa #WebPerf
Close Connections
HttpURLConnection getimagecloseconn = (HttpURLConnection)
urln.openConnection();
getimagecloseconn.setRequestProperty("connection", "close");
getimagecloseconn.connect();
String cachecontrol = getimagecloseconn.getHeaderField("Cache-
Control"); InputStream isclose =
getimagecloseconn.getInputStream();
bitmap = BitmapFactory.decodeStream(isclose);
getimagecloseconn.disconnect();
>80% of apps DO NOT close connections!

29.
@yottaa #WebPerf
Cache Your Data
• 17% of mobile traffic is duplicate downloads
– Reading from local cache is 75-99% faster than downloading
from the web
– Even when supported, it’s OFF by default!!
• Each file uniquely tagged, revalidated for
reach request
– Requests use the radio, drain the battery
– Also add 500-3,000 ms of latency
• Carefully assign Max-Age times
– App won’t check for the file on server until reached
– Retrieval is strictly file processing: up to 98% faster, no radio
http://soc.att.com/138bhRJ http://yhoo.it/1c6wcHV

30.
@yottaa #WebPerf
Manage Connections
if (Tel.getDataActivity() >0){
if (Tel.getDataActivity() <4){
//ok, we are passed the minimum time to check //and we found
network activity-
//download the image here using image getter
imagegetter(counter, numberofimages); //and show the ad
AdRequest adRequest = new AdRequest();
adRequest.addTestDevice(AdRequest.TEST_EMULATOR);
adView.loadAd(adRequest);
// Initiate a generic request to load it with an ad
adView.loadAd(new AdRequest());
Grouping data, ads, analytics can save > 50%

31.
@yottaa #WebPerf
Real Life
@yottaa #WebPerf

32.
@yottaa #WebPerf
DIY - Move Yourself
• Lose the signal
– Find a basement or elevator
• Mix it up
– Walk in and out of WiFi areas
• Have a cuppa
– Find slow, saturated WiFi (coffee shop, train)
• Shut up and drive
– Ride along in a car to swap towers, signals
• Paint a picture
– Map your findings to understand and prioritize
http://bit.ly/14MOmNr

33.
@yottaa #WebPerf
Device
@yottaa #WebPerf

34.
@yottaa #WebPerf
Yottaa
Mobile Performance Testing
Understand performance across the globe
See iOS and Android end user rendering (diffs)
Verify graceful degradation across various networks
Mobile Monitoring
Eliminate downtime, errors
Understand site performance & competitive position
Prioritize optimization, feature work w/historical analysis
Mobile Optimization
Overcome slow / variable networks with adaptive infrastructure
Optimize dynamic content: offload bandwidth, intelligently cache, adapt images
Maximize user experience with federated CDN delivery, global server load balancing
Guarantee availability and network elasticity by analyzing and managing traffic
http://www.yottaa.com

35.
@yottaa #WebPerf
In Summary
Heavily tested hybrid apps are most likely the ideal solution
Native is more
work, but nets a
better experience
There is no
substitute for real
world testing
If there’s a tool, use
it! ARO, Ringmark,
Modernizr, Yottaa
Mobile networks are
unreliable. Code for
graceful degradation

36.
@yottaa #WebPerf
Thank You!
Follow us! @yottaa
www.yottaa.com/signup
@yottaa #WebPerf