Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 o...
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 clien...
How we made it ridiculously fast
Here's a summary of what we did:
• Removed CakePHP and MySQL as they were overkill for ou...
Results
The observational speed when visiting the new website
vs the previous website shows an obvious improvement
in over...
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 o...
Summary
The processes included some simple steps and some more
complicated.
At the very least it's worth looking at your o...
How To Make Your Website Load Fast
Upcoming SlideShare
Loading in …5
×

How To Make Your Website Load Fast

1,819 views

Published on

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!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How To Make Your Website Load Fast

  1. 1. HOW TO MAKE YOUR WEBSITE LOAD FAST
  2. 2. How to make your website load ridiculously fast
  3. 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. 4. The importance of speed
  5. 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. 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. 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. 8. Speed vs. old website
  9. 9. Faster than Microsoft Bing!
  10. 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. 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. !

×