Alfa Jango Blog Engineering, Software, and Entrepreneurship

Posts Tagged ‘Optimization’

Caching, Zipping, and (Amazon CloudFront) CDN For A Rails App

Friday, June 18th, 2010

This is Article #4 of a 4-part series. For a good primer, check out the first two articles listed below. For the reasoning and analysis behind the “Recommended” option in this article, check out Part 3, How to Combine GZip + CDN for Fastest Page Loads. Otherwise, jump right in!

  • The Importance of Page Load Speed
  • Improve Page Load Speed (by 80%) by Improving Component Load Speed
  • How to Combine GZip + CDN for Fastest Page Loads
  • Caching, Zipping, and (Amazon CloudFront) CDN For A Rails App
    • Prerequisites
      1. Cached stylesheets and javascripts
      2. Creating an Amazon AWS Account
    • Setup S3 Buckets
    • Setup CloudFront Distributions
    • Create CNAME records (optional)
    • Install Rails S3 Synch Plugin
      1. Installing AWS-S3 Gem
      2. Configure S3 Synch Plugin
      3. Add S3 Synch to Deployment
    • Option A: Compressible Assets from App Server, Images from CloudFront (recommended)
      1. Configure Rails Asset Host
      2. Create A-name Record
      3. Configure Apache
    • Option B: Serve Everything from CloudFront (easier, but not recommended)
      1. Configure Rails Asset Host
      2. Pre-compile Cached Stylesheet and Javascript File
    • Conclusion

In this article, we’re going to speed up our Rails application by up to 75%, simply by optimizing our Rails asset host. We’re going to serve our components (stylesheets, javascripts, images, etc.) from a combination of our app’s server and Amazon CloudFront (Option A, recommended), or entirely from CloudFront (Option B – easier).

The best option for you may depend on your specific needs, but I’ll cover both processes below. For a an in-depth analysis of why Option A is recommended over Option B, see the last article in this series, How to Combine GZip + CDN for Fastest Page Loads.

(more…)

Improve Page Load Speed (by 80%) by Improving Component Load Speed

Tuesday, June 1st, 2010

This is Article #2 of a 4-part series. This article (along with Article #1) serves as a primer for the next two entries in this series, which discuss the most efficient way to put these concepts into practice in your web application. For more a more in-depth look at these concepts, see Yahoo!’s Best Practices for Speeding Up Your Web Site and Google’s Speed Tracer tutorial

  • The Importance of Page Load Speed
  • Improve Page Load Speed by Improving Asset Load Speed
    • 3 Techniques to Speed Up Asset Loading
      • Better Caching with Expires header
      • Zipping
      • Content Delivery Network (CDN)

In my last post, I discussed why it’s becoming increasingly important to ensure your website loads quickly for users (and Googlebots). At the end of the article, I mentioned a quote from Yahoo!’s article, Best Practices for Speeding Up Your Web Site:

80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule.

In other words, you can get the most “bang for your buck” when it comes to page load optimization by speeding up the loading of your site components (a.k.a. “assets”, such as javascripts, CSS stylesheets, images, etc.). In this post, I’ll discuss the 3 main techniques used to improve asset load speed.

Asset load optimization often results in a reduction in asset-load-time by 75-90%. Since asset-load-time accounts for 80-90% of your total page-load-time, this equates to an overall reduction in page-load-time by up to 80%!

Below are graphs showing the load time of RateMyStudentRental.com before and after (respectively) implementing the asset-optimization shown here. Using Google’s Speed Tracer extension, we can see that total load time decreased from 40 milliseconds down to 15ms.


(more…)

Is Your Site Too Slow?
(The Importance of Page Load Speed)

Friday, May 14th, 2010

This is article #1 of a 4-part series. This article (along with Article #2) serves as a primer for the last two entries in this series, which discuss the most efficient way to put these concepts into practice in your web application. For more a more in-depth look at these concepts, see Yahoo!’s Best Practices for Speeding Up Your Web Site and Google’s Speed Tracer tutorial

Page load speed is becoming increasingly important as rich web applications become more interactive. It’s not just about usability anymore; it can now directly affect your placement in search engine results, now that Google uses page load speed in their ranking algorithm. Are you ready for a reality check? Get Google Webmaster Tools for your site, and go to the Labs >> Site Performance to view your average page load time, as seen by Google’s web crawlers. That’s right, Google is already tracking your site’s performance history.

Google Webmaster Tools is even kind enough to tell you how you stack up against the rest of the web. Here is what Webmaster Tools had to say about one of our sites before optimizing it for quick page loading:

On average, pages in your site take 4.5 seconds to load (updated on Feb 21, 2010). This is slower than 70% of sites. These estimates are of low accuracy (fewer than 100 data points). The chart below shows how your site’s average page load time has changed over the last few months. For your reference, it also shows the 20th percentile value across all sites, separating slow and fast load times.

Ouch. Did I mention this would be a painful reality check?

Now to be fair, there’s a very reasonable explanation for this. Google claims that the majority of users will click “back” to the search results page if a link takes too long to load. So, if a webpage is too slow for the visitor to read it, the relevance of the content is…well, irrelevant. I should point out, however, that it’s unknown precisely how much page load speed affects your placement in search results.

(more…)