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

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
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. S P E E D I N D E X
   • Unifies rendering progress in one number
   Speed Index
   8618
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. D E S I G N C O M P O N E N T S
    • Core Branding &
    Main Navigation
    • Primary content
    

    View Slide

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

    View Slide

15. C O R E B R A N D I N G H E AT M A P
    Core Branding & Main Navigation
    8s
    

    View Slide

16. P R I M A RY C O N T E N T H E AT M A P
    11s
    Primary Content
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. T H A N K Y O U !
    sergey.chernyshev@gmail.com
    @SergeyChe
    

    View Slide