Website Latency Diagnostics

1,997 views

Published on

Understanding what contributes to slow-loading web-pages as perceived by your real users the first step to tackle potential performance improvements. A faster website means better user-experience which translates into incremental business benefits.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,997
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Website Latency Diagnostics

  1. 1. Website Latency Diagnostics alex.burciu @ amazon.com bad robot.
  2. 2. Agenda• Web Performance Optimization• Measuring Web Latency• Latency Monitoring and Analysis• Testing Latency
  3. 3. 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
  4. 4. 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.
  5. 5. Metrics Relations(?) clickToPageLoaded = serverRenderTime + clientPageLoaded(?) serverRenderTime > clientPageLoaded
  6. 6. Browser-webserver Interaction serverRenderTimeClick PL Unload RTT Response Transfer DOM Redirect Cache clientPageLoaded DNS TCP SSL
  7. 7. HTTP Flushing serverRenderTimeClick PL Unload RTT Response transfer DOM Redirect Cache clientPageLoaded DNS TCP SSL
  8. 8. HTTP Caching clientPageLoadedClick PL Unload DOM Redirect Cache
  9. 9. Back-Forward Rendering CacheClick PL Redirect Cache
  10. 10. Pre-rendering serverRenderTime PL Click Unload RTT Transfer DOM Redirect Cache clientPageLoaded DNS TCP SSL
  11. 11. Navigation Timing (pre-request)Click Redirect Cache DNS TCP Connection SSL Req... Unload
  12. 12. Navigation Timing (pre-request) navigationStart fetchStart unloadEventStart domainLookupStart secureConnectionStart redirectStart connectStart requestStartClick Unload Redirect Cache DNS TCP Connection SSL Req... redirectEnd connectEndunloadEventEnd domainLookupEnd
  13. 13. Navigation Timing (post-request) Response Request DOM Processing onLoad PL
  14. 14. Navigation Timing (post-request) domLoadingrequestStart domInteractive responseStart domContentLoadedEventStart loadEventStart Request Response DOM Processing onLoad PL responseEnd domComplete domContentLoadedEventEnd loadEventEnd
  15. 15. PageLoad Lifetime navigationStart redirect fetchStart connect dns requestStart responseStart domLoading unloadEvent domInteractive domContentLoaded domComplete loadEvent0 2,000 4,000 6,000 8,000 10,000 12,000 14,000
  16. 16. Navigation Timing JavaScript API>> window.performance.timingPerformanceTiming 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
  17. 17. Page Responsiveness clickToFirstByte = responseStart - navigationStart Influencing Backend Front-end Network Server Browser factor Application ApplicationUnload ✓ ✓Redirect ✓ ✓ ✓Cache ✓ ✓DNS ✓ ✓Connection ✓ ✓ ✓ ✓SSL ✓ ✓Request ✓ ✓ ✓Response ✓ ✓ ✓
  18. 18. End-to-end Latency clickToPageLoaded = loadEventEnd - navigationStart Influencing Backend Front-end Network Server Browser factor Application ApplicationclickToFB ✓ ✓ ✓ ✓ ✓DOM ✓ ✓ ✓ ✓ ✓InteractiveDOMContent ✓ ✓ ✓LoadedDOM ✓ ✓ ✓CompleteDOM Load ✓ ✓Event
  19. 19. Testing Web PerformanceSynthetic Benchmarking – Generated traffic – Limited context Real Users Monitoring – Subset of pages – Prod traffic – On-demand – Context-aware – Expensive – All visited pages – Continuous – Cheap
  20. 20. Average Daily Latency in 3 months
  21. 21. Average Daily Latency in 3 months
  22. 22. Avg Daily Latency vs Traffic
  23. 23. Avg Daily Latency vs Traffic
  24. 24. Avg Hourly Latency vs Traffic
  25. 25. Prev Week Avg Hourly Latency &Traffic
  26. 26. 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
  27. 27. Prev Week Hourly Latency Percentiles
  28. 28. 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
  29. 29. Prev Week Traffic% under 2 seconds
  30. 30. Prev Week Traffic% under 2 seconds
  31. 31. Avg vs P50 5-minute Latency
  32. 32. P50 for components before response
  33. 33. P50 for components after response
  34. 34. domContentLoaded per browser
  35. 35. DOM Content Loaded domLoadingToDomContentLoaded = domContentLoadedEventStart - domLoading Influencing Backend Front-end Network Server Browser Factor Application ApplicationDOMContent ✓ ✓ ✓Loaded
  36. 36. Root Cause: Content Change Date Press Release Title Updated Amazon Cloud Player Includes New Scan7/31/2012 and Match Technology, Free Audio Quality Upgrades, and More Amazon.com Announces Second Quarter Sales7/26/2012 up 29% to $12.83 Billion Amazon Launches Innovative New Education Initiative, Paying 95% of Tuition Costs for7/23/2012 Employees to Pursue Their Aspirations – Whether at Amazon, or in Another Industry Amazon.com Books Editors Announce the Big Fall7/23/2012 Books Preview On Prime Instant Video First: Amazon Announces Digital Video License Agreement with Warner7/20/2012 Bros. Domestic Television Distribution, Bringing Acclaimed TV Shows Exclusively to Kindle Fire and Prime Customers Amazon Web Services Introduces New Amazon “Jeff Letter”7/19/2012 EC2 High I/O Instance Type on Gateway Page Amazon.com to Webcast Second Quarter 20127/12/2012 Financial Results Conference Call
  37. 37. Example Latency Root Causes
  38. 38. A/B Latency Testing
  39. 39. 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
  40. 40. Q&A “Premature optimization is the root of all evil.” – Donald Knuth

×