Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  19. T H A N K Y O U !
    [email protected]
    @SergeyChe

    View full-size slide