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