Owning Web Performance@wesleyhales

How long does it take the page to load?

@wesleyhales

What are we measuring?

@wesleyhales

The Perception of (Load) TimeSpeedperception.org

@wesleyhales

How the web perf industry “thinks” users interact with our page.

The average attention span of a human being dropped from 12 seconds in 2000 to 8.25 seconds in 2015.

- National Center for Biotechnology Information at the US National Library of Medicine

//Chromewindow.chrome.loadTimes().startLoadTime;

//IEwindow.performance.timing.msFirstPaint

Start render is measured by capturing video of the page load and looking at each frame for the first time the browser displays something other than a blank page.

Or…

Start Render / First Paint

Document Complete

What it means depends highly on what the page actually does. For example:

“The page was completely blank at onloadand the content was all rendered afterward in JavaScript”

https://www.webpagetest.org/forums/showthread.php?tid=13266

Critical ResourcesThe main blockers to fast rendering are stylesheets and synchronous scripts.

Stylesheets block all rendering in the page until they finish loading.

Synchronous scripts (e.g., <script src="main.js">) block rendering for all following DOM elements.

Synchronous scripts in the HEAD of the page block the entire page from rendering until they finish loading.

https://www.stevesouders.com/blog/2016/02/10/critical-metric-critical-resources/

a bug:fire drill when things are broken

a criteria at all stages:UX → development → production

a continuous process:Monitoring → learning → improvement

Performance is…

Fast is good… Faster is better

Google Dev Summit

@wesleyhales

Performance Reality

@wesleyhales

@wesleyhales

Happy Place

We can’t get to a happy place without monitoring…

@wesleyhales

Local vs. Remote Monitoring

@wesleyhales

Local vs. Remote Monitoring

@wesleyhales

Real User Monitoring (RUM)

• Provides a restricted subset of performance API’s and metrics.

• It’s restricted because such data may reveal private or sensitive information about the visitor.

Local vs. Remote Monitoring

@wesleyhales

Just because something is possible to measure, and perhaps is even highly desirable and useful to many developers, does not mean that it can be exposed as a RUM API.

http://bit.ly/29obv1d

What can we measure (remotely)?

@wesleyhales

Performance Timing APIs

• Performance Timeline• HR Time• Navigation Timing• Resource Timing• User Timing• Frame Timing• Server Timing

Navigation Timing API(The starting point of Web

Performance APIs)

@wesleyhales

@wesleyhales

Browser Support

http://www.w3.org/2015/10/webperf-all.html

Advance Browser Support

Navigation is about how user agents convert the requested

HTML, CSS, and JavaScript into rendered pixels, which is one of the most critical steps for users

to navigate a document.

@wesleyhales

From the spec…

window.performance.timingsimple-new.html

@wesleyhales

Measurements are in HRT

• All measurements are at microsecond precision.

• Does not depend on system clock or DOM processing

• Example: perf.now.html

performance.now()

@wesleyhales

window.performance.timing process model

@wesleyhales

Loadreport.js (2012-2015)

Same Pattern?

@wesleyhales

Browser without a UI

Able to run in a server environment

Intended for testing and automation

Headless Mode

@wesleyhales

Released Early 2015

Headless Web Browser

Based on WebKit

PhantomJS 2

@wesleyhales

Pros/Cons

Limited support for modern web features

No auto updates

Great for Continuous Integration!

PhantomJS 2

@wesleyhales

PhantomJS 2 Feature Detect

What About Headless Chrome?

https://www.youtube.com/watch?v=GivjumRiZ8c

Basic PhantomJS Scripts

@wesleyhales

@wesleyhales

Rewrite of loadreport.js

Leverages all implemented Navigation Timing APIs

(shims resource timing)

Speedgun.js

Speedgun.jsDemo normal and spider

@wesleyhales

@wesleyhales

Speedgun.io

Speedgun.js

Wrapper runs script on System out

@wesleyhales

Speedgun.io

Speedgun.js

Wrapper provides API

/go

/report

/beacon

/nodes

@wesleyhales

Speedgun.io

Speedgun.js

Wrapper provides API

/rest/performance/go?url=www.google.com

/rest/performance/report?uuid=629901

/rest/beacon/init

/rest/beacon/getlist

@wesleyhales

Speedgun.io

Speedgun.js

API Wrapper/go

/report

/beacon

/nodes

Docker Container

@wesleyhales

Speedgun.io

Speedgun.js

API Wrapper

Docker Container Docker Container

Postgres

@wesleyhales

Speedgun.jsDemo

Synthetic RUM

• Use Speedgun.io as centralized server

• All docker nodes send beacon with:• Current container CPU and

memory usage

• API demo...

http://wesleyhales.com/blog/2015/04/24/Speedgun/

Continuous Perf Monitoring

• Use Speedgun.io as centralized server

• All docker nodes send beacon with:• Current container CPU and

memory usage

• API demo...

Continuous Perf Monitoring - Local

Continuous Perf Monitoring - Remote

Thanks!!• speedgun.io (github)• Navigation Timing API• Navigation Timing 2• Resource Timing API• http://w3c.github.io/perf-timing-primer/

@wesleyhales

Perf Side Note: Browser Interventions

• Removing active scroll listeners• Blocking document.write• Throttling timers in background frames• Immediately fallback to system fonts on slow

connections• Lazy load images