@yottaa #WebPerf

So you want to build a mobile app…

Brought to you by:

@yottaa #WebPerf

Available info, tooling driven by market

http://ti.me/18FeIn4

@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

@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/

@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

@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

@yottaa #WebPerf

For LinkedIN it the ecosystem was lacking

2012: HTML5 for efficiency & agility

8-10%Mobileusers

Appsrunningout ofMemory

Lackedtesting &profiling

2013: Native for user experience

Majority of Traffic from

mobile

Betterfeatures (useHTML5, CSS

for email)

Apple andGoogle drive

innovation

http://bit.ly/15NdyAg

@yottaa #WebPerf

High-level OverviewGoverning body: W3C• 5 years to ratify…• 200+ browser

interpretations

More security vulnerabilities• Can’t encrypt cached

data• Encrypting data in

motion compromises performance

@yottaa #WebPerf

High-level OverviewGoverning 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

@yottaa #WebPerf

OK, to be fair…

http://blog.flurry.com

Over the past two years, Android has had 21 updates to their browser.

@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

@yottaa #WebPerf

A bit of trivia

http://bit.ly/15iQlqz

STARTUP TIME W/8 TABSAVERAGE STARTUP TIME40-TAB LOAD (CACHED, HOT)WEBKIT SUNSPIDERJSBENCHFACEBOOK JSGAMEBENCHHARDWARE ACCELERATIONPAGE LOAD RELIABILITYOVERALL WINNER

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

@yottaa #WebPerf

Appearances

http://bit.ly/133ijam

@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

@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

@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

@yottaa #WebPerf

Grab the brass browser ringRing 0State 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 1Enable 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)

@yottaa #WebPerf

How Ringmark workstest("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", "*" );});

@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

@yottaa #WebPerf

Modernizrjavascript 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

@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']);

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

@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 Polyfillshttp://addyosmani.com/blog/writing-polyfills/

Ultimate Guide to Mobile Emulators & Simulatorshttp://www.mobilexweb.com/emulators

@yottaa #WebPerf

Has.jsphiggins42./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.bind}else{ // you should get a new browser.}

@yottaa #WebPerf

Networks

@yottaa #WebPerf

@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

@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!

@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

@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%

@yottaa #WebPerf

Real Life

@yottaa #WebPerf

@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

@yottaa #WebPerf

Device

@yottaa #WebPerf

@yottaa #WebPerf

Yottaa

Mobile Performance TestingUnderstand performance across the globeSee iOS and Android end user rendering (diffs)Verify graceful degradation across various networks

Mobile MonitoringEliminate downtime, errorsUnderstand site performance & competitive positionPrioritize optimization, feature work w/historical analysis

Mobile OptimizationOvercome slow / variable networks with adaptive infrastructureOptimize dynamic content: offload bandwidth, intelligently cache, adapt imagesMaximize user experience with federated CDN delivery, global server load balancingGuarantee availability and network elasticity by analyzing and managing traffic

http://www.yottaa.com

@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

@yottaa #WebPerf

Thank You!

Follow us! @yottaa

www.yottaa.com/signup

@yottaa #WebPerf