Boomerang: Measuring Web Performance With JavaScript

Quick talk about how boomerang works, and some of the fun stuff we've found with it.

Transcript

1. Boomerang: Measuring Web Performance with JavaScript Philip Tellis / ptellis@soasta.com Stockholm #WebPerf Meetup / 2014-10-30 Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 1
2. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 2
3. I <3 JavaScript Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 3
4. I’m a Speedfreak (the network kind) Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 4
5. SOASTA mPulse & boomerang We measure real user website performance Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 5
6. This talk is (mostly) about how we abuse JavaScript to do it Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 6
7. First, a note about the code Note that in the code that follows, + new Date is equivalent to new Date().getTime() Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 7
8. 1 Latency Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 8
9. Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 9
10. Sort in ascending order of signal latency 1 Pulsars (light through vacuum) 2 Smoke Signals (light through air) 3 Electrons through copper / Light through fibre 4 Station Wagons (possibly highest bandwidth) Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 10
11. 1 Blinking Lights It takes about 16ms for light to get from SF to NYC (24ms through fibre) . . . Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 11
12. 1 Blinking Lights It takes about 16ms for light to get from SF to NYC (24ms through fibre) Though it takes about 100ms to ping... why? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 11
13. 1 HTTP Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 12
14. So to measure latency, we need to send 1 packet each way, and time it Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 13
15. 1 Network latency in JavaScript var ts, rtt, img = new Image; img.onload=function() { rtt=(+new Date - ts) }; ts = +new Date; img.src="/1x1.gif"; Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 14
16. 1 Notes • 1x1 gif is 35 bytes • including HTTP headers, this is smaller than a TCP packet • Fires onload on all browsers • 0 byte image fires onerror • which is indistinguishable from network error Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 15
17. 2 TCP handshake Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 16
18. 2 ACK-ACK-ACK Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 17
19. 2 Connection: keep-alive Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 18
20. 2 Network latency & TCP handshake in JavaScript var t=[], tcp, rtt; var ld = function() { t.push(+new Date); if(t.length > 2) // run 2 times done(); else { var img = new Image; img.onload = ld; img.src="/1x1.gif?" + Math.random() + ’=’ + new Date; } }; var done = function() { rtt=t[2]-t[1]; tcp=t[1]-t[0]-rtt; }; ld(); Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 19
21. Notice that we’ve ignored DNS lookup time here... how would you measure it? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 20
22. 3 Network Throughput Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 21
23. 3 Measuring Network Throughput data_length download_time Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 22
24. 3 Network Throughput in JavaScript // Assume global object // image={ url: ..., size: ... } var ts, rtt, bw, img = new Image; img.onload=function() { rtt=(+new Date - ts); bw = image.size*1000/rtt; // rtt is in ms }; ts = +new Date; img.src=image.url; Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 23
25. 3 Measuring Network Throughput If it were that simple, I wouldn’t be doing this talk. Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 24
26. 3 TCP Slow Start Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 25
27. 3 Measuring Network Throughput So to make the best use of bandwidth, we need resources that fit in a TCP window Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 26
28. 3 There is no single size that will tax all available networks http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 27
29. 3 Network Throughput in JavaScript – Take 2 // image object is now an array of multiple images var i=0; var ld = function() { if(i>0) image[i-1].end = +new Date; if(i >= image.length) done(); else { var img = new Image; img.onload = ld; image[i].start = +new Date; img.src=image[i].url; } i++; }; Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 28
30. 3 Measuring Network Throughput Slow network connection, meet really huge image Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 29
31. 3 Network Throughput in JavaScript – Take 3 var img = new Image; img.onload = ld; image[i].start = +new Date; image[i].timer = setTimeout(function() { image[i].expired=true }, image[i].timeout); img.src=image[i].url; Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 30
32. 3 Network Throughput in JavaScript – Take 3 if(i>0) { image[i-1].end = +new Date; clearTimeout(image[i-1].timer); } Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 31
33. 3 Network Throughput in JavaScript – Take 3 if(i >= image.length || (i > 0 && image[i-1].expired)) { done(); } Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 32
34. 3 Measuring Network Throughput Are we done yet? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 33
35. 3 Measuring Network Throughput Are we done yet? sure... Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 33
36. 3 Measuring Network Throughput Except network throughput is different every time you test it Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 34
37. 3 Measuring Network Throughput The code for that is NOT gonna fit on a slide Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 35
38. 3 Bandwidth is different around the world Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 36
39. 4 Page Load Time Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 37
40. 4 Page Load Time is Simple 1 Get a timestamp when user initiates page request 2 Get a timestamp when page completes loading 3 Pass it through advanced Mathematics engine: t_done = t_end − t_start Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 38
41. 4 Page Load Time This is easy with Navigation Timing enabled browsers (Except for all the versions with bugs) Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 39
42. 4 Page Load Time But what about legacy browsers? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 40
43. 4 Page Load Time End time is measured in the onload or pageshow events Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 41
44. 4 Page Load Time Start time is measured in the onbeforeunload event Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 42
45. But what if the user opens a link in a new tab? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 43
46. 4 Page Load Time Start time is measured in the onbeforeunload or onclick or onsubmit events Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 44
47. But not if the click happened on a FLASH object Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 45
48. 4 Page Load Time We also measure the onunload or pagehide events... This gives us first byte time Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 46
49. 4 Page Load Time We cannot attach events for first page loads, but with enough data we can estimate using statistical analysis Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 47
50. But... it’s not over yet <link rel="prerender"> Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 48
51. 4 Page Load Time A pre-rendered page’s onload event can fire before the user even clicks on the link Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 49
52. boomerang takes care of this by measuring "click to visible", "request to load", "request to visible", and "load to visible" Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 50
53. 5 Resource Timing Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 51
54. Using the Resource Timing API, get timing information for all resources on the page Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 52
55. Yes, this results in very large beacons, so we use POST, and we will soon merge in a patch to compress the data Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 53
56. And some hackery to capture XHR requests Create a wrapper around window.XMLHttpRequest and set timers on all its events Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 54
57. Full code is at github.com/lognormal/beyond-page-metrics/ Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 55
58. 6 Other Stuff Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 56
59. 6 Other Stuff We Measure • NavTiming, SPDY, FirstPaint – navtiming.js • navigation.connection.* – mobile.js • window.performance.memory – memory.js – Chrome 22+ reporting now. • Number of DOM nodes, images, scripts and byte size of HTML – memory.js Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 57
60. And we try to do it fast Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 58
61. 7 Keep it Clean Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 59
62. We recently started capturing all JavaScript errors that happen inside boomerang, and beaconing them back Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 60
63. So now we can find bugs as soon as it affects an end user Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 61
64. We found that Firefox 31 started throwing exceptions on direct dereferences of window.performance inside anonymous iframes https://bugzilla.mozilla.org/show_bug.cgi?id=1045096 Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 62
65. We tried to use if (window.hasOwnProperty("performance")) but that doesn’t work in IE10 because window is a host object Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 63
66. You have to use if ("performance" in window) which JSLint doesn’t like... Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 64
67. You have to use if ("performance" in window) which JSLint doesn’t like... But no one likes JSLint so it’s okay Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 64
68. And speaking of IE, did you know that "TypeError: Permission Denied" is localized, so you have to capture every single language to detect it? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 65
69. On a more interesting note, IE11 running in compatibility mode can make it seem like IE7 has magically received Navigation Timing support Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 66
70. We found that Chrome 38 started reporting 0 for firstPaintTime, and that helped the Chrome team realise, "This code (in Chrome)... we don’t know how it ever worked" https://code.google.com/p/chromium/issues/detail?id=422913 Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 67
71. We also found a much older Chrome bug where cached content was reported as having a negative load time in Resource Timing Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 68
72. We found that Mobile Safari’s NavigationTiming implementation had weird bugs, but could not find a good pattern Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 69
73. And Android 2.3’s browser has a document.createEvent method that exists, but always throws, so capability detection doesn’t work nicely Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 70
74. As we found that users have different bugs too ;) Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 71
75. ni! din tur nu Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 72
76. – .done() Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 73
77. Tack! Frågor? Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 74
78. Code/References • http://lognormal.github.com/boomerang/doc/ (BSD Licensed) • www.lognormal.com Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 75
79. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog Stockholm #WebPerf Meetup / 2014-10-30 Boomerang: Measuring Web Performance with JavaScript 76