How To Make Your Website Load Fast
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

How To Make Your Website Load Fast

on

  • 1,384 views

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

Statistics

Views

Total Views
1,384
Views on SlideShare
1,297
Embed Views
87

Actions

Likes
0
Downloads
1
Comments
0

5 Embeds 87

http://localhost 53
http://inlight-www-test.s3-website-ap-southeast-2.amazonaws.com 15
http://inlight.com.au 13
http://192.168.0.90 4
http://192.168.0.60 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How To Make Your Website Load Fast Presentation Transcript

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