{"id":2410,"date":"2012-01-06T15:09:28","date_gmt":"2012-01-06T23:09:28","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=2410"},"modified":"2012-01-06T15:09:28","modified_gmt":"2012-01-06T23:09:28","slug":"timing-amo-user-experience","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/","title":{"rendered":"Timing AMO user experience"},"content":{"rendered":"

There are lots of ways to measure the performance of a site. On addons.mozilla.org<\/a> we measure a few of them: how long it takes to render pages, the cache performance and responsiveness for content delivery networks globally. But with the advent of the navigation timing API<\/a> in Firefox 7<\/a> we’ve been able to add the most important measurement of all – the actual performance in the browser.<\/p>\n

Along with a few other Mozilla sites, we’ve been using pystatsd<\/a> and Graphite for a while. This produces useful graphs of the site health and performance. For example, this graph plots HTTP responses we serve out from Python (this is not the amount of traffic to our site which is much larger).<\/p>\n

\"\"<\/a><\/p>\n

To facilitate using the timing API we wrote a module between statsd and Django called django-statsd<\/a> that, amongst other things, provides a way to interface between the browser and Python backend. The library has support for boomerang<\/a>, a great front end timing library. I quickly wrote a much simpler service called stick<\/a>, which sends a small subset of timings that we want.<\/p>\n

Using stick is straightforward – once you’ve setup your Python backed and included your JavaScript, you call it in your page. For example:<\/p>\n

stick.send('https:\/\/to.your.site\/record')<\/pre>\n
The API returns with timestamps for each of the events. To give us meaningful numbers, we then subtract the timestamp for each of the events from navigationStart<\/code> so we can tell the timings relative to that start point. And here’s the end result in our Graphite server:<\/p>\n
\"\"<\/a><\/p>\n
For internal sites we collect 100% of the data. However, on our live site we get quite a lot of traffic, so we’ve rolled this out by collecting only 1% of traffic. We’ll start increasing this percentage once we are confident this won’t be causing problems. We’ll also be adding it to the about:addons page which gets quite a bit of traffic.<\/p>\n
We’ll be tweaking things to ensure we pass through the right numbers and interpret them correctly. The amount of data is probably too low to be useful, right now, but I can’t help but wonder what the peak around 12.30pm today was…<\/p>\n","protected":false},"excerpt":{"rendered":"
There are lots of ways to measure the performance of a site. On addons.mozilla.org we measure a few of them: how long it takes to render pages, the cache performance and responsiveness for content delivery networks globally. But with the … Continue reading<\/a><\/p>\n","protected":false},"author":271,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[553,13605],"coauthors":[],"yoast_head":"\nTiming AMO user experience - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy McKay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/\",\"name\":\"Timing AMO user experience - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png\",\"datePublished\":\"2012-01-06T23:09:28+00:00\",\"dateModified\":\"2012-01-06T23:09:28+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Timing AMO user experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8\",\"name\":\"Andy McKay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/96eb032e0f9fa78d076a49a55bf3cd09\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g\",\"caption\":\"Andy McKay\"},\"description\":\"Andy is an Engineering Manager at Mozilla. As a Canadian he tweets and blogs about curling, skiing, politics, maple syrup, bears and all things from the great white north.\",\"sameAs\":[\"http:\/\/mckay.pub\",\"https:\/\/x.com\/andymckay\"],\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/amckaymozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Timing AMO user experience - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/","twitter_misc":{"Written by":"Andy McKay","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/","url":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/","name":"Timing AMO user experience - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png","datePublished":"2012-01-06T23:09:28+00:00","dateModified":"2012-01-06T23:09:28+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2012\/01\/Screen-Shot-2012-01-06-at-2.10.46-PM.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2012\/01\/06\/timing-amo-user-experience\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Timing AMO user experience"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/7e1881db0e8a23a4a06695f8a0efd6b8","name":"Andy McKay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/96eb032e0f9fa78d076a49a55bf3cd09","url":"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad304e7a7d4f6fba05a81b10810fe6fd?s=96&d=mm&r=g","caption":"Andy McKay"},"description":"Andy is an Engineering Manager at Mozilla. As a Canadian he tweets and blogs about curling, skiing, politics, maple syrup, bears and all things from the great white north.","sameAs":["http:\/\/mckay.pub","https:\/\/x.com\/andymckay"],"url":"https:\/\/blog.mozilla.org\/webdev\/author\/amckaymozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2410"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=2410"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/2410\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=2410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=2410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=2410"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=2410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}