Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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 p...
–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
Render
Tree
HTML
CSS
DOM
CSSOM
Layout Paint
DOM
Content
Loaded
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 browser
function myTimings()
{
performance.mark("startTask1");
doTask1(); // Some developer code
performance.mark("...
Speed Index
What?
• Response End / TTFB
How quickly has my server served the base page
• DOM Content Loaded
A good analogy for “Page is usab...
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
• Enforc...
When?
At every stage of the lifecycle!
How?
Synthetic
Domo arigato, Mr. Roboto
http://www.webpagetest.org
• Free!
• Real browsers
• Global
• Scripting
• API
• Mobile devices
• OSS
Real User Monitoring
• sitespeed.io
Uses WPT & PhantomJS to run performance audits on site.
• Can be used internally (CLI tool)
• PerfBar (http...
Reporting Data
SpeedCurve
https://speedcurve.com
Custom Dashboards
Graphite / Splunk
How?
• Synthetic
External, controlled testing
• Real User Monitoring
Browser-based reporting of real user’s experience
• D...
Summary
• What: Decide what metrics are relevant to User Experience
• When: At every stage of the lifecycle
• How: Using t...
–Ian Malpass, Etsy,
https://codeascraft.com/2011/02/15/measure-anything-measure-everything/
“If it moves, we track it. Som...
Gareth Hughes, @brassic_lint
Thank you!
http://www.slideshare.net/GarethHughes3
Gareth Hughes, @brassic_lint
Measuring Front-End Performance - What, When and How?
Measuring Front-End Performance - What, When and How?
Próxima SlideShare
Cargando en…5
×

Measuring Front-End Performance - What, When and How?

1.591 visualizaciones

Publicado el

During this session we will look at the art of monitoring the front-end performance of your web site or application from inception to production.

We’ll start be looking at what measurable metrics are available, and how they can be used to represent performance and user experience. Moving on to looking at how we can measure and control performance throughout the development lifecycle, including a look at some of the tools available for measurement and reporting.

Delivered to Paris Performance User Group - 2/11/2015

Publicado en: Tecnología
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤ https://tinyurl.com/rockhardxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Sé el primero en recomendar esto

Measuring Front-End Performance - What, When and How?

  1. 1. Gareth Hughes, @brassic_lint Measuring Front-end Performance: What, When and How? Gareth Hughes, @brassic_lint
  2. 2. What?
  3. 3. –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”
  4. 4. –Akamai study, 2009 “47% of consumers expect a web page to load in 2 seconds or less”
  5. 5. Anatomy of an HTTP request TTFB (Time to First Byte)
  6. 6. Time to glass Render Tree HTML CSS DOM CSSOM Layout Paint DOM Content Loaded Render Start JavaScript DOM CSSOM
  7. 7. In the browser http://www.w3.org/TR/navigation-timing/
  8. 8. In the browser http://www.w3.org/TR/resource-timing/
  9. 9. In the browser function 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/
  10. 10. Speed Index
  11. 11. What?
  12. 12. • Response End / TTFB How quickly has my server served the base page • DOM Content Loaded A good analogy for “Page is usable” • Render Start / First Paint Gives us an indication of when the user actually sees something • Total Page Load Although this includes all 3rd-party and deferred content, it can help get a “feel” for how well everything is working • User Timings This is a little more work, but allows the ability to instrument the areas important to you • Speed Index This is a great single metric to give a pretty good idea of overall user experience What?
  13. 13. When?
  14. 14. Requirements Design Development Test Release / Maintenance
  15. 15. –Brad Frost http://bradfrost.com/blog/post/performance-as-design/ “Good performance is good design”
  16. 16. 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”
  17. 17. When? At every stage of the lifecycle!
  18. 18. How?
  19. 19. Synthetic Domo arigato, Mr. Roboto
  20. 20. http://www.webpagetest.org • Free! • Real browsers • Global • Scripting • API • Mobile devices • OSS
  21. 21. Real User Monitoring
  22. 22. • sitespeed.io Uses 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
  23. 23. Reporting Data
  24. 24. SpeedCurve https://speedcurve.com
  25. 25. Custom Dashboards Graphite / Splunk
  26. 26. 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 • Report Display data on dashboards, make it visible and relevant
  27. 27. 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
  28. 28. –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.”
  29. 29. Gareth Hughes, @brassic_lint Thank you! http://www.slideshare.net/GarethHughes3 Gareth Hughes, @brassic_lint

×