{"id":869,"date":"2010-01-12T14:16:11","date_gmt":"2010-01-12T22:16:11","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=869"},"modified":"2010-01-12T17:24:20","modified_gmt":"2010-01-13T01:24:20","slug":"making-getpersonas-com-blazing-fast","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2010\/01\/12\/making-getpersonas-com-blazing-fast\/","title":{"rendered":"Making getpersonas.com blazing fast"},"content":{"rendered":"

I love speed. I’m a speed fanatic. Fast cars, planes, skydiving, anything involving triple digit MPH. But the thing that I like fast the most is websites. Millisecond response times, content delivery networks, caching, sprites, you name it. <\/p>\n

In case you didn’t already know, Personas (AKA ‘lightweight themes’) have been integrated into Firefox 3.6. With the impeding tsunami of traffic from millions of Firefox users headed towards getpersonas.com, I knew my time had come. Donning Firebug, YSlow and webpagetest.org<\/a>, I set out to squeeze every last drop of performance out of it.<\/p>\n

I knew my work would be painstaking, arduous and gut-wrenching, but I couldn’t let the fear of disappointing millions of Firefox users around the world stop me. <\/p>\n

Minify<\/h3>\n

My first task: concatenation and minification of JavaScript and CSS. My weapon of choice: Minify<\/a>.<\/p>\n

Minify is a neat little PHP library that will take a list of CSS or JavaScript files, concatenate into one file, minify (remove whitespace and linebreaks) and gzip them. The plus is it doesn’t involve running any code before you push your files live, you can point your CSS & JavaScript URLs directly at Minify like so: http:\/\/getpersonas-cdn.mozilla.net\/static\/min\/?g=css&r=59272. (g=css tells Minify I want the ‘css’ group of files)<\/p>\n

The benefits of Minify are less HTTP requests and small file sizes due to minification and gzip. For getpersonas.com, 3 JavaScript files were reduced to 11<\/sup>.<\/p>\n

Move JavaScript to the bottom of all pages<\/h3>\n

Next, in order to make getpersonas.com appear<\/strong> faster, I knew I had to move JavaScript to the bottom of every page.<\/p>\n

From a previous test on webpagetest.org<\/a>, it was apparent that users were waiting for the JavaScript in the head of the page to download before any other content. This is a well-known ‘feature’ of all web browsers. JavaScript blocks parallel downloading for all hostnames<\/a>, period. The remedy? Move JavaScript to the end of the page.<\/p>\n

Thankfully I hadn’t written any inline JavaScript, so moving the reference to the main JavaScript file to the bottom of every page was relatively simple. The benefit? Rendering of each page started 500ms earlier<\/strong>. While seemingly small, half a second is enough for a user to detect.<\/p>\n

Add far-future expires headers<\/h3>\n

My next task? Adding far-future expires headers to all CSS, JS and images.<\/p>\n

When visitors browse your website, they often view multiple pages that share common resources. Images, CSS, JavaScript, etc. Unfortunately, browsers need to check each file on every page load to see if it has changed. This requires many requests to the webserver, each incurring a non-trivial cost, sometimes in the hundreds of milliseconds. The method to avoid this is to use far-future expires headers.<\/p>\n

Expires headers tell browsers how long they can store a file in their cache. If the expires headers tell browsers to cache a file for a long time, the browser doesn’t need to check to see if it has changed. This is what they look like:<\/p>\n

Expires: Thu, 15 Apr 2020 20:00:00 GMT<\/code><\/p>\n

In this case, the file doesn’t expire until April 15, 2020 at 8:00pm. Adding this to a .htaccess file in \/static gave all our images proper expires headers:<\/p>\n

<FilesMatch \"\\.(jpg|jpeg|png|gif|ico)$\">
\nExpiresActive On
\nExpiresDefault \"access plus 10 years\"
\n<\/FilesMatch><\/code><\/p>\n

“But wait!”, you say. How will browsers know when the file has changed if it never checks for a new version? Easy, change the filename or append a query string. All persona images have a modified timestamp at the end of their URLs: http:\/\/getpersonas-cdn.mozilla.net\/static\/8\/8\/48888\/preview.jpg?1260925626 and CSS & JavaScript have their SVN revision number instead: http:\/\/getpersonas-cdn.mozilla.net\/static\/min\/?g=js&r=59113. (And Minify is configured to send far-future expires headers) For ‘regular’ images used throughout the site appending a new version # to the end of the url is easy enough.<\/p>\n

For users, this means a faster overall<\/strong> site. Repeat view time decreased from 1.6 seconds to 0.7 seconds. <\/p>\n

Use a CDN<\/h3>\n

Last but not least, we needed to move our content closer to users around the world. How? A content delivery network (CDN).<\/p>\n

A big problem with the Internet is people all around the world use it. Sometimes from thousands of miles away from your webserver. Fiber optic cables under the ocean may be fast, but 50 or 100ms of round-trip time adds up when users need to download dozens of files. Short of inventing faster-than-light communication, the next easiest thing to do is move your content closer to your users.<\/p>\n

Instead of buying our own servers and copying files to them, we’re using a CDN for getpersonas.com. A CDN has servers set up around the world and has done all the hard work for us already \ud83d\ude42 .<\/p>\n

All our images, JavaScript and CSS are served from the CDN’s servers. The way we achieved this is by setting up a separate hostname that points to them (getpersonas-cdn.mozilla.net). When a browser requests a file from getpersonas-cdn.mozilla.net, the CDN fetches it from our webservers, caches it (because of our far-future expires headers \ud83d\ude42 ) and serves it to the browser.<\/p>\n

Since our CDN has servers in multiple locations around the world, users download files faster and with better latency. <\/p>\n

Results?<\/h3>\n

This post wouldn’t be worth reading without some pretty charts and graphs now would it? (Results according to webpagetest.org<\/a>, a great performance tester)<\/p>\n

Summary:<\/h4>\n