measuring front-end performance - what, when and how?
TRANSCRIPT
![Page 1: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/1.jpg)
Gareth Hughes, @brassic_lint
Measuring Front-end Performance:
What, When and How?
Gareth Hughes, @brassic_lint
![Page 2: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/2.jpg)
What?
![Page 3: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/3.jpg)
–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”
![Page 4: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/4.jpg)
–Akamai study, 2009
“47% of consumers expect a web page to load in 2 seconds or less”
![Page 5: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/5.jpg)
Anatomy of an HTTP request
TTFB(Time to First Byte)
![Page 6: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/6.jpg)
Time to glass
RenderTree
HTML
CSS
DOM
CSSOM
Layout Paint
DOM ContentLoaded Render
Start
JavaScript
DOM
CSSOM
![Page 7: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/7.jpg)
In the browser
http://www.w3.org/TR/navigation-timing/
![Page 8: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/8.jpg)
In the browser
http://www.w3.org/TR/resource-timing/
![Page 9: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/9.jpg)
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/
![Page 10: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/10.jpg)
Speed Index
![Page 11: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/11.jpg)
What?
![Page 12: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/12.jpg)
• 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?
![Page 13: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/13.jpg)
When?
![Page 14: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/14.jpg)
Requirements
Design
Development
Test
Release / Maintenance
![Page 15: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/15.jpg)
–Brad Frost
http://bradfrost.com/blog/post/performance-as-design/
“Good performance is good design”
![Page 16: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/16.jpg)
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”
![Page 17: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/17.jpg)
When?
At every stage of the lifecycle!
![Page 18: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/18.jpg)
How?
![Page 19: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/19.jpg)
SyntheticDomo arigato, Mr. Roboto
![Page 20: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/20.jpg)
![Page 21: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/21.jpg)
http://www.webpagetest.org • Free!• Real browsers• Global• Scripting• API• Mobile devices• OSS
![Page 22: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/22.jpg)
Real User Monitoring
![Page 23: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/23.jpg)
![Page 24: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/24.jpg)
• 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
![Page 25: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/25.jpg)
Reporting Data
![Page 27: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/27.jpg)
Custom DashboardsGraphite / Splunk
![Page 28: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/28.jpg)
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
![Page 29: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/29.jpg)
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
![Page 30: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/30.jpg)
–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.”
![Page 31: Measuring Front-End Performance - What, When and How?](https://reader035.vdocuments.net/reader035/viewer/2022062310/587d53711a28abee158b50f5/html5/thumbnails/31.jpg)
Gareth Hughes, @brassic_lint
Thank you!http://www.slideshare.net/GarethHughes3
Gareth Hughes, @brassic_lint