Blog

"80-90% of the end-user response time is spent on the front-end. Start there."

Inspired by the book High Performance Web Sites by Steve Souders, Richard Gonzales, one of our Senior Ruby on Rails developers, gave a lightning talk on 14 principles of building high performance web sites and how to implement them using Rails in one of our recent internal Rails Meetup.

"It's very exciting that today a lot of the principles of high performance web sites are already built into Rails through its new features," said Richard.

To give an overview of the 14 principles outlined in the book, Richard gave three best practices which you can easily implement using Rails:

1. Asset Management

Manage the placements of the assets in your page. Put stylesheets at the top, put the scripts at the bottom. Get the HTML structure and CSS to the user as soon as possible. Render the page before the scripts have initialized to avoid a blank page where user have to wait for scripts to download.

Rails Implementation: The asset pipeline, a new feature in Rails 3.1, provides a framework to organize and minify JavaScript and CSS files. It shortened the process of creating code by having the ability to write these assets in other languages such as CoffeeScript. 

Ruby on Rails also optimize performance through HTTP Streaming. This another new feature of Rails allows the browser to start downloading a Web page's stylesheets and JavaScript even while the server is still generating other parts of the page.

2. Caching

Caching plays an important role in the performance of a website. The objective of caching is to minimize the round trip. Steve Souders, the author of the book explained that caching is easily achieved by giving resources an expiration date far in the future using the Cache-Control response header.

Rails Implementation: Rails has its own caching facilities. It provides three types of caching techniques by default. If you were able to optimize it more, the better. For example, you can cache rarely updated data such as your website’s header or images to reduce response times by 50% or more.

3. Make Fewer HTTP Requests

Minify your assets. Assets pertains to your JavaScript, stylesheets, and images. Richard recommends to remove whitespaces in JavaScript and stylesheets. It can save you around at least 10-70% response time. Optimize your images for the web. Keep it small as possible. Use sprite sheets to combine various icons and imagery into a single image file.

Rails Implementation: Through the use of Sprockets which is already integrated in 3.1, it allows the developers to easily manage, update and debug their assets without doing any extra effort in preparing their assets for production. It compiles all the functions that a web application uses such as stylesheets and JavaScript files into a single file, which simplifies work for the developer and quickens the response time of the website.

---

Looking to build high performance website or web application? We love to hear about your project. Start a conversation with our team today.