+ All Categories
Home > Technology > Website Latency Diagnostics

Website Latency Diagnostics

Date post: 15-Jan-2015
Category:
Upload: alex-burciu
View: 1,307 times
Download: 2 times
Share this document with a friend
Description:
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.
Popular Tags:
40
Website Latency Diagnostics alex.burciu @amazon.com
Transcript
Page 1: Website Latency Diagnostics

Website Latency Diagnostics alex.burciu @bad robot.amazon.com

Page 2: Website Latency Diagnostics

Agenda

• Web Performance Optimization

• Measuring Web Latency

• Latency Monitoring and Analysis

• Testing Latency

Page 3: Website Latency Diagnostics

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

Page 4: Website Latency Diagnostics

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.

Page 5: Website Latency Diagnostics

Metrics Relations

(?) clickToPageLoaded = serverRenderTime + clientPageLoaded

(?) serverRenderTime > clientPageLoaded

Page 6: Website Latency Diagnostics

Browser-webserver Interaction

serverRenderTime

Response Transfer RTT Unload Redirect Cache DNS TCP SSL

DOM PL Click

clientPageLoaded

Page 7: Website Latency Diagnostics

serverRenderTime

clientPageLoaded

Response transfer RTT Unload Redirect Cache DNS TCP SSL

DOM PL Click

HTTP Flushing

Page 8: Website Latency Diagnostics

HTTP Caching

clientPageLoaded

Unload Redirect Cache

DOM PL Click

Page 9: Website Latency Diagnostics

Back-Forward Rendering Cache

Redirect Cache

PL Click

Page 10: Website Latency Diagnostics

Pre-rendering

serverRenderTime

Transfer RTT Unload Redirect Cache DNS TCP SSL

DOM PL Click

clientPageLoaded

Page 11: Website Latency Diagnostics

Navigation Timing (pre-request)

Click Cache DNS TCP Connection SSL Redirect Req... Unload

Page 12: Website Latency Diagnostics

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

Page 13: Website Latency Diagnostics

DOM Processing

Navigation Timing (post-request)

Request onLoad PL Response

Page 14: Website Latency Diagnostics

Navigation Timing (post-request)

DOM Processing Request onLoad

domLoading

domInteractive

loadEventStart

requestStart

responseEnd

responseStart

domComplete

loadEventEnd

domContentLoadedEventStart

domContentLoadedEventEnd

PL Response

Page 15: Website Latency Diagnostics

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

Page 16: Website Latency Diagnostics

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 17: Website Latency Diagnostics

Page Responsiveness clickToFirstByte = responseStart - navigationStart

Influencing factor

Network Server Backend

Application Browser

Front-end Application

Unload ✓ ✓

Redirect ✓ ✓ ✓

Cache ✓ ✓

DNS ✓ ✓

Connection ✓ ✓ ✓ ✓

SSL ✓ ✓

Request ✓ ✓ ✓

Response ✓ ✓ ✓

Page 18: Website Latency Diagnostics

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

✓ ✓

Page 19: Website Latency Diagnostics

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

Page 20: Website Latency Diagnostics

Average Daily Latency in 3 months

Page 21: Website Latency Diagnostics

Average Daily Latency in 3 months

Page 22: Website Latency Diagnostics

Avg Daily Latency vs Traffic

Page 23: Website Latency Diagnostics

Avg Daily Latency vs Traffic

Page 24: Website Latency Diagnostics

Avg Hourly Latency vs Traffic

Page 25: Website Latency Diagnostics

Prev Week Avg Hourly Latency &Traffic

Page 26: Website Latency Diagnostics

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

Page 27: Website Latency Diagnostics

Prev Week Hourly Latency Percentiles

Page 28: Website Latency Diagnostics

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

Page 29: Website Latency Diagnostics

Prev Week Traffic% under 2 seconds

Page 30: Website Latency Diagnostics

Prev Week Traffic% under 2 seconds

Page 31: Website Latency Diagnostics

Avg vs P50 5-minute Latency

Page 32: Website Latency Diagnostics

P50 for components before response

Page 33: Website Latency Diagnostics

P50 for components after response

Page 34: Website Latency Diagnostics

domContentLoaded per browser

Page 35: Website Latency Diagnostics

DOM Content Loaded domLoadingToDomContentLoaded = domContentLoadedEventStart - domLoading

Influencing Factor

Network Server Backend

Application Browser

Front-end Application

DOM Content Loaded

✓ ✓ ✓

Page 36: Website Latency Diagnostics

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

Page 37: Website Latency Diagnostics

Example Latency Root Causes

Page 38: Website Latency Diagnostics

A/B Latency Testing

Page 39: Website Latency Diagnostics

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

Page 40: Website Latency Diagnostics

Q&A

“Premature optimization is the root of all evil.” – Donald Knuth


Recommended