Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataBoomerang: How fast do users think your site is? Philip Tellis / philip@bluesmoon.info ConFoo.ca/2011 – 2011.03.09-11 ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang Data$ ﬁnger philip Philip Tellis philip@bluesmoon.info @bluesmoon geek - paranoid - speedfreak yahoo http://bluesmoon.info/ ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangOnly 10–20% of page load time is spent on systems we control ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangIt’s what we can’t control that users notice http://twitter.com/stoyanstefanov/status/43747252317077504 ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control browsers ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control plugins ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control OSes ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control viruses ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control antiviruses ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control microwaves ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control baby monitors ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control naughty neighbours ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control ﬁle shares ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control governments ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control rodents ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe can’t control Try simulating all that in the lab! ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe need to measure real end-user performance ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWe need to measure real end-user performance from the real end-user’s perspective ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWhile this might work, it isn’t necessarily representative ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerang What about JavaScript?ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangboomerang is...A piece of javascript that you add to your web page where itmeasures and beacons back to you, the end user’s perceivedperformance of your page ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangHow? <script src="boomerang.js" type="text/javascript"> </script> <script type="text/javascript"> BOOMR.init({ user_ip: "<network ident>", beacon_url: "http://mysite.com/beacon.php" }); </script> ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Time How does it work? The adversary Using boomerang Measure twice Data boomerangWhat does it do? Measures user’s network throughput and latency to your server Measures the current page’s load time Beacons these results back to your server ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data Accuracy How does boomerang work?ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data Accuracy Let’s take that one at a timeConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyMeasuring latency Download a 32 byte gif 10 times in sequence Measure the time to download each Discard the ﬁrst measurement because it’s overpriced9 Calculate the arithmetic mean, standard deviation and margin of error of the rest ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyMeasuring throughput After the latency test is done, we download progressively larger images Stop at the ﬁrst image that times out Redownload that image a few more times Calculate the median, standard deviation and margin of error of the largest image ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyMeasuring latency before throughput helps here Those 10 latency images do a lot to widen the TCP window size The bandwidth images make much better use of available bandwidth The image we end with makes the best use of bandwidth ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyHow do we measure page load time? In the onbeforeunload event, measure the time and store it in a cookie In the onload event, check the cookie, and measure the difference with the current time We also make sure that the page that set the cookie is the referrer of the current page ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyWhat? Two pages? Yes, this needs two pages and cookies. If those aren’t supported, we try to use the WebTiming API10 . ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Latency How does it work? Bandwidth/Throughput Using boomerang Load time Data AccuracyHow accurate is it? Latency measurements are very accurate (±1%) Bandwidth is to an order of magnitude. For bad connections can be ±30% Page load time sometimes has outliers, you need post-ﬁltering The margin of error tells you how good your data is ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataInclude it on your page <script src="boomerang.js" type="text/javascript"> </script> <script type="text/javascript"> BOOMR.init({ user_ip: "<network ident>", beacon_url: "http://mysite.com/beacon.php" }); </script> ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX Data For most sites, that’s about itConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX Data You probably want to do moreConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataMeasure more than just load time <html><head> <script> var t_pagestart=new Date().getTime(); </script> ... <script> var th=new Date().getTime(); </script> </head> <body> ... <script> var tj=new Date().getTime(); </script> ... ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX Data...<script src="boomerang.js"></script>...var te=new Date().getTime();BOOMR.plugins.RT.setTimer("t_head", th-t_pagestart). setTimer("t_body", te-th). setTimer("t_js", te-tj);</script></body></html> ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataThis adds the t_head, t_body and t_js ﬁelds to the beacon ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataLoading dynamic content BOOMR.init({ user_ip: "<network ident>", beacon_url: "http://mysite.com/beacon.php", auto_run: false }); ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataLoading dynamic content // Just before download starts BOOMR.plugins.RT.startTimer("t_done"); ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataLoading dynamic content // Just after download finishes BOOMR.plugins.RT.done(); ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction Basic How does it work? In-page timers Using boomerang AJAX DataMuch more http://yahoo.github.com/boomerang/doc/howtos/ ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataThe beacon GET request to the beacon URL (response ignored) All parameters passed in the query string Extra timers are passed in as a comma separated list in t_other before_beacon JavaScript event ﬁred just before the beacon is sent ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataWhat should we do with the data? Sanity checking to: Remove fake data Remove abusive data Maybe just rate limiting ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataWhat can we do with the data? Statistical analysis to: Remove outliers Aggregate based on bandwidth blocks Measure trends over time and correlate them with code changes ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataBandwidth blocks ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataBandwidth blocks Data points from some countries may require narrower bands ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataGeographic data Looking at latency from different geographic locations can tell you where your next mirror should be ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataISPs Grouping data by ISP can tell you who’s behaving badly ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataMore data Write plugins to get more performance data We already have a DNS plugin I’ve just completed a plugin to measure IPv6 support and latency What about a full WebTiming plugin? I’m also looking at measuring connection setup time ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction shoulda How does it work? coulda Using boomerang woulda DataYou decide Once you have the data, you can do anything with it ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataBoomerang: It (almost) always comes back http://github.com/yahoo/boomerang http://yahoo.github.com/boomerang/doc/ ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataPhoto credits ﬂickr.com/photos/21233184@N02/4389412851 http://xkcd.com/445/ ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataContact me Philip Tellis philip@bluesmoon.info @bluesmoon geek - paranoid - speedfreak yahoo http://bluesmoon.info/ slideshare.net/bluesmoon joind.in/talk/view/2913 ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataReferences github.com/yahoo/boomerang More bandwidth doesn’t matter (much) – Mike Belshe Analysing Bandwidth & Latency – YUI Blog It’s the latency, stupid – Stuart Cheshire The statistics of web performance ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataOverpriced images The ﬁrst image might require a DNS lookup and TCP handshake Slow start is not an issue since 32 bytes ﬁt in 1 packet ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

Introduction How does it work? Using boomerang DataWebTiming API JavaScript interface to network timing information including DNS, TCP connect, download, etc. Supported by: Microsoft Internet Explorer 9 Google Chrome (WebKit) W3C speciﬁcation ConFoo.ca/2011 – 2011.03.09-11 Boomerang: How fast do users think your site is?

http://www.berejeb.com	16
http://feeds.feedburner.com	4
http://www.devetdesign.com	3

Boomerang: How fast do users think your site is?

by Philip Tellis on Mar 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 23

Statistics

Boomerang: How fast do users think your site is? — Presentation Transcript