measuring front-end performance - what, when and how?

Gareth Hughes, @brassic_lint

Measuring Front-end Performance:

What, When and How?

Gareth Hughes, @brassic_lint

What?

–Akamai study, 2009

http://uk.akamai.com/html/about/press/releases/2009/press_091409.html

“47% of consumers expect a web page to load in 2 seconds or less”

–Akamai study, 2009

“47% of consumers expect a web page to load in 2 seconds or less”

Anatomy of an HTTP request

TTFB(Time to First Byte)

Time to glass

RenderTree

HTML

CSS

DOM

CSSOM

Layout Paint

DOM ContentLoaded Render

Start

JavaScript

DOM

CSSOM

In the browser

http://www.w3.org/TR/navigation-timing/

In the browser

http://www.w3.org/TR/resource-timing/

In the browserfunction myTimings() { performance.mark("startTask1"); doTask1(); // Some developer code performance.mark("endTask1"); performance.mark("startTask2"); doTask2(); // Some developer code performance.mark("endTask2");

}

http://www.w3.org/TR/user-timing/

Speed Index

What?

• Response End / TTFBHow quickly has my server served the base page

• DOM Content LoadedA good analogy for “Page is usable”

• Render Start / First PaintGives us an indication of when the user actually sees something

• Total Page LoadAlthough this includes all 3rd-party and deferred content, it can help get a “feel” for how well everything is working

• User TimingsThis is a little more work, but allows the ability to instrument the areas important to you

• Speed IndexThis is a great single metric to give a pretty good idea of overall user experience

What?

When?

Requirements

Design

Development

Test

Release / Maintenance

–Brad Frost

http://bradfrost.com/blog/post/performance-as-design/

“Good performance is good design”

Performance Budgets• Defines tangible numbers or metrics• May be defined by an aspiration or industry standards• Enforces the performance standards• Instills a “culture of performance” in the project team• Gives a mark to measure by• You probably already have one!• Start vague, but define early• “Performance is everyone’s problem”

When?

At every stage of the lifecycle!

How?

SyntheticDomo arigato, Mr. Roboto

http://www.webpagetest.org • Free!• Real browsers• Global• Scripting• API• Mobile devices• OSS

Real User Monitoring

• sitespeed.ioUses WPT & PhantomJS to run performance audits on site.• Can be used internally (CLI tool)

• PerfBar (http://wpotools.github.io/perfBar/)Surfaces NavTiming data in the browser• Useful on UAT-type environments

• CI plugins• Test for performance as part of the CI process

Other Tools

Reporting Data

SpeedCurvehttps://speedcurve.com

Custom DashboardsGraphite / Splunk

How?• Synthetic

External, controlled testing• Real User Monitoring

Browser-based reporting of real user’s experience• Don’t choose!

Both synthetic and RUM provide valuable insight into performance and should be seen as complementary - either alone gives a narrow view

• ReportDisplay data on dashboards, make it visible and relevant

Summary

• What: Decide what metrics are relevant to User Experience

• When: At every stage of the lifecycle

• How: Using tools and reports to make the data relevant and

actionable

–Ian Malpass, Etsy,

https://codeascraft.com/2011/02/15/measure-anything-measure-everything/

“If it moves, we track it. Sometimes we’ll draw a graph of something that isn’t moving yet, just in case it decides to

make a run for it.”

Gareth Hughes, @brassic_lint

Thank you!http://www.slideshare.net/GarethHughes3

Gareth Hughes, @brassic_lint