Website speed is important. Slow page load leads to site abandonment. Fast loading leads to better search rankings and increased revenue. This presentation provides some tech tips on how to make your website ridiculously fast!

1. HOW TO MAKE
YOUR WEBSITE
LOAD FAST

2. How to make your website load ridiculously fast

3. 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.

4. The importance of speed

5. 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.

6. 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).

7. 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.

8. Speed vs. old website

9. Faster than Microsoft Bing!

10. 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
!

11. 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.
!