Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
U S I N G
H E AT M A P S
T O D E F I N E
P E R F O R M A N C E
M E T R I C S
S E R G E Y C H E R N Y S H E V
J U N E 2 7 ,...
W H Y D O W E M E A S U R E S P E E D ?
• Monitor for degradations (Ops)
• Analyze code for perf issues (Devs)
• Verify im...
S TAT S
• Google: +500ms => -25% searches (2006)
• Amazon: +100ms => -1% revenue (2008)
• Netflix: +GZip => -43% Traffic c...
R E A L U S E R M E A S U R E M E N T
• Real users (a lot of them)
• A lot of data (need to store it)
• All noise you can ...
S Y N T H E T I C T E S T I N G &
A N A LY S I S
• From particular location
• Tester controls instrumentation
• One metric...
T O D AY ' S M E T R I C S
• DNS, SSL/TLS, TTFB
• Page Load / Document Complete / Fully Loaded
• First Paint
• AFT
• Speed...
T I M E T O F I R S T PA I N T
• Shows when completely useless part is over
TTFP
3.5s
A F T ( A B O V E T H E F O L D T I M E )
• When everything is finally visible
AFT
15.3s
S P E E D I N D E X
• Unifies rendering progress in one number
Speed Index
8618
U S E R T I M I N G A P I
• Records custom JS timings on the page
• Measured by both RUM and Synthetic tools
• Can be hard...
M E A S U R E U S E R E X P E R I E N C E
• Great experience for users
• "Fast" is just a component
• Correlate what you m...
H E AT
M A P S
D I S C O V E R A N D
D E F I N E
W H AT M AT T E R S
U S I N G
U S E R A C T I O N H E AT M A P S
• Eye tracking
• Click tracking
• Hard to capture
• Shows current state
• Can be automa...
P R O D U C T F E AT U R E H E AT M A P S
• Hard to automate
• Each industry is different
• Usually multiple templates
tha...
I N T E R A C T I O N O N T H E W E B
1. Acknowledge action
2. Verify destination
3. Provide primary content
4. Allow inte...
D E S I G N C O M P O N E N T S
• Core Branding &
Main Navigation
• Primary content
H E AT M A P C U T- O U T S
Core Branding & Main Navigation Primary content
C O R E B R A N D I N G H E AT M A P
C O R E B R A N D I N G H E AT M A P
Core Branding & Main Navigation
8s
8s
3.5s
15.3s
P R I M A RY C O N T E N T H E AT M A P
11s
P R I M A RY C O N T E N T H E AT M A P
11s
Primary Content
3.5s
15.3s
E X T E N D E D M E T R I C S
• Time To First Paint (TTFP) - 3.5s
• Core Branding & Main Navigation - 8s
• Primary content...
S E L E C T O R - B A S E D I M P L E M E N TAT I O N
• Uses CSS selectors to define active zones
• Executes "custom metric...
T H A N K Y O U !
sergey.chernyshev@gmail.com
@SergeyChe
Nächste SlideShare
Wird geladen in …5
×

Using Heat Maps to improve Web Performance Metrics @ NY Web Performance Meetup

430 Aufrufe

Veröffentlicht am

Measurement of web page performance is critical when you need to track improvements and justify performance optimization budgets. Over the years, multitude of metrics were developed, from Time To First Byte and Page Load Time all the way to more modern and sophisticated metrics like Time to First Paint, ATF and Speed Index. Web browsers also added multiple APIs to allow more visibility into the stack with Navigation Timing, Resource Timing as well as User Timing APIs. The challenge with performance metrics is that they are all proxies for user experience and don’t necessarily translate directly into user satisfaction and business gains.

Sergey Chernyshev reviews the reasons why we need to track performance and introduces a new method for improving existing performance metrics using Heat Maps generated based on business requirements

Video of the talk: https://www.youtube.com/watch?v=t6l9U5bC8jA

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Using Heat Maps to improve Web Performance Metrics @ NY Web Performance Meetup

  1. 1. U S I N G H E AT M A P S T O D E F I N E P E R F O R M A N C E M E T R I C S S E R G E Y C H E R N Y S H E V J U N E 2 7 , 2 0 1 6 @ N E W Y O R K W E B P E R F O R M A N C E M E E T U P
  2. 2. W H Y D O W E M E A S U R E S P E E D ? • Monitor for degradations (Ops) • Analyze code for perf issues (Devs) • Verify improvements (Devs) • Prioritize improvements (Business) • Budget for WPO initiatives (Business)
  3. 3. S TAT S • Google: +500ms => -25% searches (2006) • Amazon: +100ms => -1% revenue (2008) • Netflix: +GZip => -43% Traffic cost (2008) • Shopzilla: -5s => +12% Conversion rate (2009) • Google: +400ms => -0.21% searches after experiment! (2009) • Mozilla: -2.2s => +15.4% Downloads (2010) • Edmunds: -77% load time => +20% page views (2011) • DoubleClick: -1 redirect => +12% CTR (2011) • Etsy: +160Kb => +12% bounce rate (2014) • Trainline: -0.3s => +$11.5M / year revenue (2016) WPOStats.com
  4. 4. R E A L U S E R M E A S U R E M E N T • Real users (a lot of them) • A lot of data (need to store it) • All noise you can get, requires filtering • Metrics are distributions • Can correlate to business KPIs
  5. 5. S Y N T H E T I C T E S T I N G & A N A LY S I S • From particular location • Tester controls instrumentation • One metric value • Data can have lots of details for analysis
  6. 6. T O D AY ' S M E T R I C S • DNS, SSL/TLS, TTFB • Page Load / Document Complete / Fully Loaded • First Paint • AFT • SpeedIndex
  7. 7. T I M E T O F I R S T PA I N T • Shows when completely useless part is over TTFP 3.5s
  8. 8. A F T ( A B O V E T H E F O L D T I M E ) • When everything is finally visible AFT 15.3s
  9. 9. S P E E D I N D E X • Unifies rendering progress in one number Speed Index 8618
  10. 10. U S E R T I M I N G A P I • Records custom JS timings on the page • Measured by both RUM and Synthetic tools • Can be hard to match with user's reality • Requires JavaScript instrumentation
  11. 11. M E A S U R E U S E R E X P E R I E N C E • Great experience for users • "Fast" is just a component • Correlate what you measure to business KPIs • Do not measure what's easy, measure what matters N O T T E C H N O L O G Y
  12. 12. H E AT M A P S D I S C O V E R A N D D E F I N E W H AT M AT T E R S U S I N G
  13. 13. U S E R A C T I O N H E AT M A P S • Eye tracking • Click tracking • Hard to capture • Shows current state • Can be automated
  14. 14. P R O D U C T F E AT U R E H E AT M A P S • Hard to automate • Each industry is different • Usually multiple templates that power many pages • Business team already knows the answers
  15. 15. I N T E R A C T I O N O N T H E W E B 1. Acknowledge action 2. Verify destination 3. Provide primary content 4. Allow interaction 5. Show secondary content 6. Invisible tasks
  16. 16. D E S I G N C O M P O N E N T S • Core Branding & Main Navigation • Primary content
  17. 17. H E AT M A P C U T- O U T S Core Branding & Main Navigation Primary content
  18. 18. C O R E B R A N D I N G H E AT M A P
  19. 19. C O R E B R A N D I N G H E AT M A P Core Branding & Main Navigation 8s 8s 3.5s 15.3s
  20. 20. P R I M A RY C O N T E N T H E AT M A P
  21. 21. 11s P R I M A RY C O N T E N T H E AT M A P 11s Primary Content 3.5s 15.3s
  22. 22. E X T E N D E D M E T R I C S • Time To First Paint (TTFP) - 3.5s • Core Branding & Main Navigation - 8s • Primary content - 11s • ... • Above The Fold (AFT) - 15.3s
  23. 23. S E L E C T O R - B A S E D I M P L E M E N TAT I O N • Uses CSS selectors to define active zones • Executes "custom metric" function in WebPageTest to get cutout coordinates • Downloads test results and video frames using WPT API • Manipulates video frames and feeds into visualmetrics.py and uses 99% threshold to grab times • Kudos to Patrick Meenan for awesome tools
  24. 24. T H A N K Y O U ! sergey.chernyshev@gmail.com @SergeyChe

×