demystifying web performance
TRANSCRIPT
IAN GRUNERT • SENIOR DEVELOPER • ATLASSIAN • @IANGRUNERT
Demystifying Web Performance
Application Performance Index
Divide by the count
Good job! This request didn’t break user flow.
1/2 point for toleratingThis request broke user flow, but they didn’t get frustrated by it.
1 point for satisfied
Now you have your Application Performance Index, Apdex for short.
Navigation Timing
We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.D O N A L D E . K N U T H , S T R U C T U R E D P R O G R A M M I N G W I T H G O TO S TAT E M E N T S
“
”
Measure first, then optimise
Navigation Timing
Navigation Timing
Redirects
Unload
DNS TCP Request Response
Download & Parse
On Ready
Server Processing
T C P
R E D I R E C T
S E RV E R P R O C E S S I N G
D O W N L O A D
Navigation Timing
PA R S E + O N R E A D Y
Redirects cause roundtrips
Browser Confluence
GET /wiki/
302 /wiki/dashboard.action
GET /wiki/dashboard.action
200 /wiki/dashboard.action
Read the access logs
Tips and tricks
Make the server do the work
Reduce latency to serverSite logo linked to /wiki/, change to link to site home
These are golden for finding the worst offenders for redirects
Output the final destination in the href
The closer you are to the server, the faster the roundtrips are
S E RV E R P R O C E S S I N G
D O W N L O A D
Navigation Timing
T C P
R E D I R E C T
PA R S E + O N R E A D Y
TLS Handshake cause roundtrips
Browser Confluence
SYN
SYN ACK
ClientHello
ServerHello
ChangeCipherSpec
ChangeCipherSpec
T C P
S E RV E R P R O C E S S I N G
D O W N L O A D
Navigation Timing
S E RV E R P R O C E S S I N G
R E D I R E C T
PA R S E + O N R E A D Y
You should reduce your server response time under 200ms.PA G E S P E E D I N S I G H T S, G O O G L E
“ ”
Optimise Time To First Byte
Browser Confluence
GET /wiki/
Flush <head> with resources
Flush rest of response
Measure application render time
Browser Network Hop Network Hop
Measure this!
T C P
R E D I R E C T
S E RV E R P R O C E S S I N G
Navigation Timing
PA R S E + O N R E A D Y
D O W N L O A D
CDNs are magical
In HTTP/1.1, use batching to avoid waterfalling
Reduce Page Weight
We’ve saved over
at the 85%-ile
880ms
T C P
PA R S E + O N R E A D Y
S E RV E R P R O C E S S I N G
D O W N L O A D
Navigation TimingR E D I R E C T
Resource ordering matters, not just for
download!
We’ve saved over
at the 85%-ile
500ms
Confluence Cloud Performance Team
Setting Goals
Velocity-based
Great high-level performance measure. Hard to move.
High percentilesThe frustrating requests are the ones that are most memorable.
Apdex
Much easier to set goals after time has been spent to establish velocity.
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
Graphs to monitor progress
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
Generate a backlog
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
Tracking Results
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
Preventing Regressions
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
git-ratchet +
Atlassian Connect for Bitbucket
• Big cool statistic
• 2,569
• Add-Ons in Marketplace
Be Agile!
Thank you!
IAN GRUNERT • SENIOR DEVELOPER • ATLASSIAN • @IANGRUNERT