HOW TO MAKE YOUR WEBSITE

LOAD FAST

How to make your website load ridiculously fast

The importance of speed

Website speed is important. You've most likely heard about the effect page loading time can have on page abandonment. Google, Amazon, Mozilla and Yahoo have all shown why website speed matters, with Amazon for instance increasing its revenue by 1% for every 100ms of improved page load time. In 2010, Google announced that site speed would be used as a search ranking factor.

The importance of speed

The importance of speed

Even though our own website wasn't in the slow bracket, we wanted to show our users (and our clients) how making some small tweaks can actually make your website lightening fast.

How we made it ridiculously fast

Here's a summary of what we did: • Removed CakePHP and MySQL as they were overkill for our website's need. They were only really being used to

serve blog posts and make development slightly easier. • Compiled everything to HTML. No more server side interpretation. Used Grunt build task to compileJade and

Stylus files into HTML and CSS. Then concatenated and minified HTML, CSS, JavaScript for reduced requests and less wasted bandwidth.

• Hosted the site inside an Amazon S3 bucket in the new Sydney, Australia environment. • Delayed loading of non critical client side JavaScript components (for instance, our latest tweet and google map is

retrieved after the page has loaded everything else). • Compressed all PNG images using ImageOptim. • Hosted all images on a CDN (Content Delivery Network) which replicates world wide for super fast delivery. We

currently use Edgecast hosted by GoGrid but Amazon also has it's Cloudfront CDN. See a comparison between Edgecast and Cloudfront.

• Used multiple subdomains (ie, cdn1.inlight.com.au and cdn2.inlight.com.au) to distribute all image requests across to over come the multiple request limits web browsers impose.

• Reduced JavaScript libraries used and opted for lighter weight implementations (ie, syntax highlighting of code snippets now uses embedded GitHub Gists).

Results

The observational speed when visiting the new website vs the previous website shows an obvious improvement in overall speed. In terms of actual performance:

• Latency reduced from 220ms to 30ms for every request. For every 10 non concurrent requests (images, CSS, JS) you are saving approximately 2 seconds of page load time.

• On average the website is 10 - 15x faster. You can replay the test if you are interested or view the video below.

Speed vs. old website

Faster than Microsoft Bing!

Future Enhancements

We still have some more ideas on how to further increase the website speed and we'll look to improve on these iteratively over time.

• Reduce the number of images loaded on each page by merging small images into sprite maps.

• Lazy load images, videos, slides, code snippets. The concept of "Lazy Loading" is based on the idea that you only download items as the user scrolls / arrives at that location of the page. Sebastiano Armeli presented a great talk at MelbJS and Web Directions South this year called Lazy Load Everything.

• GZIP all content. The gzip compression mechanism is supported by almost all browsers these days !

Summary

The processes included some simple steps and some more complicated. At the very least it's worth looking at your own website architecture and whether you are delivering the best experience to your visitors. Simple steps such as relocating your hosting nearer to your audience and using content delivery networks to distribute your requests, will go a long way in improving the website experience. We definitely had fun turbo charging the website. If you'd like to chat with us about your website or find out more, feel free to contact us. !