Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | alex-burciu |
View: | 1,307 times |
Download: | 2 times |
Website Latency Diagnostics alex.burciu @bad robot.amazon.com
Agenda
• Web Performance Optimization
• Measuring Web Latency
• Latency Monitoring and Analysis
• Testing Latency
Web Performance Optimization
• Customer satisfaction & loyalty – White page of death – “World Wide Wait”
• Faster pages = longer sessions
– Sales opportunities – Ads impressions
• Competitive Advantage
– Better customer experience – Factor in SEO rankings
Latency Metrics
• Understand what you’re optimizing and quantify impact. – serverRenderTime (webserver render time)
• time delay on the webserver since receiving the HTTP request to when generating and emitting the last byte of content to the client.
– clientPageLoaded (browser render time) • time delay spent on the browser since receiving the first
HTML response byte to when the DOM load event is fired.
– clickToPageLoaded (complete rendering time) • time delay experienced by the customer since when
initiating navigation to when the page loaded.
Metrics Relations
(?) clickToPageLoaded = serverRenderTime + clientPageLoaded
(?) serverRenderTime > clientPageLoaded
Browser-webserver Interaction
serverRenderTime
Response Transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
clientPageLoaded
serverRenderTime
clientPageLoaded
Response transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
HTTP Flushing
HTTP Caching
clientPageLoaded
Unload Redirect Cache
DOM PL Click
Back-Forward Rendering Cache
Redirect Cache
PL Click
Pre-rendering
serverRenderTime
Transfer RTT Unload Redirect Cache DNS TCP SSL
DOM PL Click
clientPageLoaded
Navigation Timing (pre-request)
Click Cache DNS TCP Connection SSL Redirect Req... Unload
Navigation Timing (pre-request)
Click Unload Cache DNS TCP Connection SSL Redirect Req...
secureConnectionStart unloadEventStart
connectStart requestStart
navigationStart
redirectStart
unloadEventEnd
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectEnd
DOM Processing
Navigation Timing (post-request)
Request onLoad PL Response
Navigation Timing (post-request)
DOM Processing Request onLoad
domLoading
domInteractive
loadEventStart
requestStart
responseEnd
responseStart
domComplete
loadEventEnd
domContentLoadedEventStart
domContentLoadedEventEnd
PL Response
PageLoad Lifetime
0 2,000 4,000 6,000 8,000 10,000 12,000 14,000
navigationStart
redirect
fetchStart
connect
dns
requestStart
responseStart
domLoading
unloadEvent
domInteractive
domContentLoaded
domComplete
loadEvent
Navigation Timing JavaScript API >> window.performance.timing PerformanceTiming
connectEnd: 1344530318281 connectStart: 1344530318281 domComplete: 1344530330212 domContentLoadedEventEnd: 1344530321367 domContentLoadedEventStart: 1344530320211 domInteractive: 1344530320048 domLoading: 1344530318567 domainLookupEnd: 1344530317143 domainLookupStart: 1344530317143 fetchStart: 1344530318281 loadEventEnd: 1344530330214 loadEventStart: 1344530330212 navigationStart: 1344530317144 redirectEnd: 1344530318281 redirectStart: 1344530317149 requestStart: 1344530318283 responseEnd: 1344530319479 responseStart: 1344530318566 secureConnectionStart: 0 unloadEventEnd: 1344530319045 unloadEventStart: 1344530318567
Page Responsiveness clickToFirstByte = responseStart - navigationStart
Influencing factor
Network Server Backend
Application Browser
Front-end Application
Unload ✓ ✓
Redirect ✓ ✓ ✓
Cache ✓ ✓
DNS ✓ ✓
Connection ✓ ✓ ✓ ✓
SSL ✓ ✓
Request ✓ ✓ ✓
Response ✓ ✓ ✓
End-to-end Latency clickToPageLoaded = loadEventEnd - navigationStart
Influencing factor
Network Server Backend
Application Browser
Front-end Application
clickToFB ✓ ✓ ✓ ✓ ✓
DOM Interactive
✓ ✓ ✓ ✓ ✓
DOM Content Loaded
✓ ✓ ✓
DOM Complete
✓ ✓ ✓
DOM Load Event
✓ ✓
Testing Web Performance
Synthetic Benchmarking
– Generated traffic
– Limited context
– Subset of pages
– On-demand
– Expensive
Real Users Monitoring
– Prod traffic
– Context-aware
– All visited pages
– Continuous
– Cheap
Average Daily Latency in 3 months
Average Daily Latency in 3 months
Avg Daily Latency vs Traffic
Avg Daily Latency vs Traffic
Avg Hourly Latency vs Traffic
Prev Week Avg Hourly Latency &Traffic
Percentile Metrics
• P(x) = variable value for which x% of the variables are smaller
P25 = first quartile (Q1) P50 = median (Q2) P75 = third quartile (Q3)
• Example
– 10, 770, 40, 60, 50, 880, 9999, 30, 30, 20, 10 – 10, 10, 20, 30, 30, 40, 50, 60, 770, 880, 9999
• Average vs P50: 1,081 > 40
Prev Week Hourly Latency Percentiles
Understats and overstats
• The inverse of a percentile.
• Percentiles – Constant percentage (e.g. 50%) – Variable measurement (e.g. latency in ms)
• Understatistics and overstatistics
– Constant measurement (e.g. latency <1000ms) – Variable percentage (e.g. percentage of hits)
• Understat x = percentage of hits with latency under x ms
Prev Week Traffic% under 2 seconds
Prev Week Traffic% under 2 seconds
Avg vs P50 5-minute Latency
P50 for components before response
P50 for components after response
domContentLoaded per browser
DOM Content Loaded domLoadingToDomContentLoaded = domContentLoadedEventStart - domLoading
Influencing Factor
Network Server Backend
Application Browser
Front-end Application
DOM Content Loaded
✓ ✓ ✓
Root Cause: Content Change
“Jeff Letter” on Gateway Page
Date Press Release Title
7/31/2012 Updated Amazon Cloud Player Includes New Scan and Match Technology, Free Audio Quality Upgrades, and More
7/26/2012 Amazon.com Announces Second Quarter Sales up 29% to $12.83 Billion
7/23/2012
Amazon Launches Innovative New Education Initiative, Paying 95% of Tuition Costs for Employees to Pursue Their Aspirations – Whether at Amazon, or in Another Industry
7/23/2012 Amazon.com Books Editors Announce the Big Fall Books Preview
7/20/2012
On Prime Instant Video First: Amazon Announces Digital Video License Agreement with Warner Bros. Domestic Television Distribution, Bringing Acclaimed TV Shows Exclusively to Kindle Fire and Prime Customers
7/19/2012 Amazon Web Services Introduces New Amazon EC2 High I/O Instance Type
7/12/2012 Amazon.com to Webcast Second Quarter 2012 Financial Results Conference Call
Example Latency Root Causes
A/B Latency Testing
Key Takeaways
• Invest in Latency Monitoring – 80% of the latency is on the client – Navigation Timing cross-browser API
• Browser rendering is complex
– Latency easily influenced by context – Lab traffic is different from the mix from real customers
• Look at your data
– Average poorly represents a population – Control releases using A/B testing
Q&A
“Premature optimization is the root of all evil.” – Donald Knuth