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

1e2ff8ee6ac0e790883b1cdc420f158d?s=128

Sergey Chernyshev

April 14, 2016
Tweet

Transcript

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

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

    S P E E D I N D E X

    • Unifies rendering progress in one number Speed Index 8618
  8. 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. 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. 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. 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. 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. 13.

    D E S I G N C O M P

    O N E N T S • Core Branding & Main Navigation • Primary content
  14. 14.

    H E AT M A P C U T- O

    U T S Core Branding & Main Navigation Primary content
  15. 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. 16.

    P R I M A RY C O N T

    E N T H E AT M A P 11s Primary Content
  17. 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. 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