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
Slide 2
Slide 2 text
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)
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
S P E E D I N D E X
• Unifies rendering progress in one number
Speed Index
8618
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
D E S I G N C O M P O N E N T S
• Core Branding &
Main Navigation
• Primary content
Slide 14
Slide 14 text
H E AT M A P C U T- O U T S
Core Branding & Main Navigation Primary content
Slide 15
Slide 15 text
C O R E B R A N D I N G H E AT M A P
Core Branding & Main Navigation
8s
Slide 16
Slide 16 text
P R I M A RY C O N T E N T H E AT M A P
11s
Primary Content
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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