$30 off During Our Annual Pro Sale. View Details »

Using Heat Maps to improve performance metrics

Using Heat Maps to improve performance metrics

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

Sergey Chernyshev

April 14, 2016
Tweet

More Decks by Sergey Chernyshev

Other Decks in Technology

Transcript

  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 O R G A N I Z E R , 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. 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. 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
  4. M E A S U R E U S E

    R E X P E R I E N C E • Good experience for users • "Fast" is just a component • Do not measure what's easy - measure what matters. N O T T E C H N O L O G Y
  5. 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
  6. 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
  7. S P E E D I N D E X

    • Unifies rendering progress in one number Speed Index 8618
  8. 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
  9. 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
  10. 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, not the intent for new features • Can be automated
  11. 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 • Good news - business team already knows the answers
  12. 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
  13. D E S I G N C O M P

    O N E N T S • Core Branding & Main Navigation • Primary content
  14. H E AT M A P C U T- O

    U T S Core Branding & Main Navigation Primary content
  15. C O R E B R A N D I

    N G H E AT M A P Core Branding & Main Navigation 8s
  16. P R I M A RY C O N T

    E N T H E AT M A P 11s Primary Content
  17. 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
  18. 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
  19. T H A N K Y O U ! sergey.chernyshev@gmail.com

    @SergeyChe