the truth about your web app's performance

The Truth About YourWeb App’s PerformanceJohn Riviello

@JohnRiv

Distinguished Engineer, Comcast Interactive Media

Web Conference at Penn State – June 22, 2015

John Riviello – The Truth Behind Your Web App’s Performance2

Frontend Performance Data

1. What do existing tools provide?

2. What data do you care about?

3. How do you gather that data?

4. What do you do with the data?


1. Existing Tools2. The Data You Care About3. Gathering the Data4. Analyzing the Data

Frontend Performance Data – Existing Tools

WebPagetest.org



http://www.sitespeed.io/



https://github.com/sitespeedio/grunt-sitespeedio



https://github.com/macbre/phantomas

https://github.com/gmetais/grunt-devperf


http://yellowlab.tools/


https://github.com/gmetais/grunt-yellowlabtools




grunt.initConfig({ yellowlabtools: { production: { urls: [ 'https://xtv.comcast.net' ], failConditions: [ // The global score is the one calculated by Yellow Lab Tools 'fail if at least one url has a global score < 80/100',

// Every single rule has its own score 'fail if at least one url has a rule score < 50/100',

// You can ignore certain rules 'ignore iframesCount',

// You can check a metric instead of the score by omitting '/100' 'fail if at least one url has a domElementsCount > 2000' ] } }});

Contribute to Open Source:https://github.com/gmetais/YellowLabTools

"RUM" by Tom B is licensed under CC BY-NC-SA 2.0

https://www.flickr.com/photos/tom-b/1330310701/

https://www.flickr.com/photos/tom-b/

https://creativecommons.org/licenses/by-nc-sa/2.0/

RealUserMonitoring

"yes, that's a rum filled coconut." by Brandon King is licensed under CC BY-NC 2.0 / Color adjusted from original

https://www.flickr.com/photos/bking/346334125

https://www.flickr.com/photos/bking/

https://creativecommons.org/licenses/by-nc/2.0/

http://www.appdynamics.com/product/browser-real-user-monitoring/

http://docs.newrelic.com/docs/new-relic-browser/page-load-timing-process

https://ruxit.com/features/real-user-monitoring.html

https://www.pingdom.com/rum/

https://docs.newrelic.com/docs/browser/new-relic-browser/browser-agent-apis/manually-reporting-page-load-timing-data

RealUserMonitoring

"yes, that's a rum filled coconut." by Brandon King is licensed under CC BY-NC 2.0 / Color adjusted from original

https://www.flickr.com/photos/bking/346334125



Illustration from http://www.w3.org/TR/navigation-timing/#processing-model


Frontend Performance Data – The Data You Care About


Frontend Performance Data – The Data You Care About

Example Factors That Impact Performance:


• User authentication state

• “Type” of user

• Number of “items” returned

• Flash SWF dependency

http://mashable.com/2014/01/31/gmail-slow/


“Gmail’s People

Widget appears to be

the cause of the

sluggishness, which is,

only affecting Gmail

on the web Google

says…This is noticeable

when users open an

email conversation with

a large number of

participants…”

Consider what other unique factors in your app may impact performance

Frontend Performance Data – Gathering the Data

Marking Timestamps


Back in the day:

> new Date().getTime();

1399754123456

ECMAScript 5.1:

> Date.now();

1399754123456

Most modern browsers have a better option…


W3C High Resolution Time


•DOMHighResTimeStamp is available via window.performance.now()

•Provides the time with sub-millisecond accuracy

•Measured relative to the navigationStart attribute of the PerformanceTiming interface

•Not subject to system clock skew or adjustments (uses a monotonically increasing clock)


W3C High Resolution Time – Sub-ms Example


> var dateTest = function() { var start = Date.now(), area = window.innerWidth*window.innerHeight; return Date.now() - start; }; dateTest(); 0

> var highResTest = function() { var start = window.performance.now(), area = window.innerWidth*window.innerHeight; return window.performance.now() - start; }; highResTest(); 0.01200000406242907


W3C High Resolution Time – Monotonic Clock


Why do we care?

“Most systems run a daemon which regularly

synchronizes the time. It is common for the clock to be

tweaked a few milliseconds every 15-20 minutes.

At that rate about 1% of 10 second intervals

measured would be inaccurate.”Source: Tony Gentilcore

http://gent.ilcore.com/2012/06/better-timer-for-javascript.html

Browser Support

https://github.com/Comcast/Surf-N-Perf

User Timingvs.

Surf-N-Perf"Hurricane Earl's Waves" by John Riviello is licensed under CC BY-NC-SA 2.0 / Color adjusted from original

https://www.flickr.com/photos/johnriv/4957633116/

https://www.flickr.com/photos/johnriv/






Frontend Performance Data – Gathering the Data with Surf-N-Perf

Setting & Getting a Mark


// User Timing API> window.performance.mark('foo');> window.performance.getEntriesByName('foo'); [PerformanceMark ] duration: 0 entryType: "mark" name: "foo" startTime: 3323.620999988634> window.performance.getEntriesByName('foo')[0].startTime; 3323.620999988634

// Surf-N-Perf> surfnperf.mark('foo');> surfnperf.getMark('foo'); 3323.620999988634


Navigation Timing Mark & User Mark Duration


// User Timing API> window.performance.mark('foo');> window.performance.measure('page_load_to_foo', 'loadEventEnd', 'foo');> window.performance.getEntriesByName('page_load_to_foo'); [PerformanceMeasure ] duration: 3201.620999988634 entryType: "measure" name: "page_load_to_foo" startTime: 122> window.performance.getEntriesByName('page_load_to_foo')[0].duration; 3201.620999988634

// Surf-N-Perf> surfnperf.mark('foo');> surfnperf.duration('loadEventEnd','foo'); 3202> surfnperf.duration('loadEventEnd','foo',{decimalPlaces:3}); 3201.621


Event Duration (i.e. 2 User Marks)


// User Timing API> window.performance.mark('barStart');> window.performance.mark('barEnd');> window.performance.measure('barEvent', 'barStart', 'barEnd');> window.performance.getEntriesByName(’barEvent')[0].duration; 3512.499000004027

// Surf-N-Perf> surfnperf.eventStart('bar');> surfnperf.eventEnd('bar');> surfnperf.eventDuration('bar'); 3512> surfnperf.eventDuration('bar',{decimalPlaces:12}); 3512.499000004027


Custom Event Data


// Surf-N-Perf> surfnperf.eventStart('bar');// surfnperf.eventEnd(KEY, CUSTOM_DATA_OBJECT);> surfnperf.eventEnd('bar', {baz:'qux'});> surfnperf.getEventData('bar', 'baz'); "qux"


Tying It Together with Backbone.fetch()


// Surf-N-Perf> var collection = new Backbone.Collection(); collection.url = '/get-data/';

surfnperf.eventStart('getData'); collection.fetch({ success: function(collection) { surfnperf.eventEnd('getData', {status:'success', items: collection.length}); }, error: function() { surfnperf.eventEnd('getData', {status:'error'}); }, });

> surfnperf.eventDuration('getData', {decimalPlaces:2}); 1464.75> surfnperf.getEventData('getData', 'status'); "success"> surfnperf.getEventData('getData', 'items'); 33


Custom Data (not tied to an event)


// Surf-N-Perf> surfnperf.setCustom('initialUrl', window.location.pathname);> surfnperf.getCustom('initialUrl'); "https://xtv.comcast.net/recent"


Common Navigation Timing Measurements


// Surf-N-Perf




> surfnperf.getNetworkTime(); // fetchStart to connectEnd




> surfnperf.getServerTime(); // requestStart to responseEnd




> surfnperf.getNetworkLatency(); // fetchStart to responseEnd




> surfnperf.getProcessingLoadTime(); // responseEnd to loadEventEnd




> surfnperf.getFullRequestLoadTime(); // navigationStart to loadEventEnd

Frontend Performance Data – Analyzing The Data


Average Response Timesare forAverage Products

99th PERCENTILE

(at a minimum)

Frontend Performance Data – The Future

Time to First Paint


Internet Explorer:

> window.performance.timing.msFirstPaint;

1434341969277

Google Chrome:

> window.chrome.loadTimes();

Object {

commitLoadTime: 1434341655.700179

connectionInfo: "http/1"

finishDocumentLoadTime: 1434341656.208713

finishLoadTime: 1434341656.733739 ...


Time to First Paint


Google Chrome (continued):

firstPaintAfterLoadTime: 1434341657.201959

firstPaintTime: 1434341655.978471

navigationType: "Other"

npnNegotiatedProtocol: "unknown"

requestTime: 1434341655.141803

startLoadTime: 1434341655.570092

wasAlternateProtocolAvailable: false

wasFetchedViaSpdy: false

wasNpnNegotiated: false

}


Time to First Paint


Alternatives:

-window.requestAnimationFrame()

- Load of last non-async resource in <head>

- Custom Metric (First Tweet, Hero Image, etc.)

http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/



Illustration from http://www.w3.org/TR/resource-timing/#processing-model

window.performance.getEntriesByType("resou

rce")



3rd Party Resource



3rd Party Resource with Timing-Allow-Origin:

*

Frontend Performance Data – Recap


• Performance is a feature!

• Measure first—at the 99th percentile

• Leverage W3C Performance APIs

• Log network latency, browser processing time, and the full webpage request & response

• Log major app-specific events with details

For Further Info & Feedback:

Twitter: @JohnRiv

GitHub: https://github.com/Comcast/Surf-N-Perf

SpeakerRate: http://spkr8.com/t/60261

https://github.com/Comcast/Surf-N-Perf

http://spkr8.com/t/60261



the truth about your web app's performance

Software

web apps performance5

web apps performance11

web apps performance16

web apps performance17

web apps performance21

web apps performance26

web apps performance36

web apps performance37