Page Responsiveness is the amount of time it takes to load a webpage on a browser. There are some different tools to measure page responsiveness, here is 2 example of them

1. Yahoo! YSlow, from within the Firefox
2. Web Inspector on Safari

How can you improve responsiveness? by improving browser load time. You want to install YSlow to figure out what is wrong with your front end browser performance. When you run YSlow against a website, it will give you a report card offering suggestions for improving the page’s performance, summarizes the page's components, displays page's statistics. YSlow also provides tools for performance analysis. YSlow will analyzes and give you 35 best practices recommendations based on a set of rules for high performance web pages. Now let us take a quick look on how you can achieve some of those recommendations. Rails code snippet used on this post is based on version 2.3

Make Fewer HTTP requests

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. You can include all javascripts in the javascripts directory using :all as the source:

javascript_include_tag :all

If you have sub-directories under javascripts, you should set :recursive

javascript_include_tag :all, :recursive => true

Make it even better, cache multiple javascripts into one files

javascript_include_tag :all, :recursive => true, :cache => true

Remember caching will only happen if ActionController::Base.perform_caching is set to true which is the default for production environment. You can also apply this strategy to your stylesheets

stylesheet_link_tag :all, :recursive => true, :cache => true

The last thing that usually cost HTTP requests a lot is external background images. You want to combining them with CSS sprites. To find out how you can create CSS sprites with Rails you can start from this slide.

Use a Dedicated Asset Server

You can easily done this by setting ActionController::Base.asset_host in the application configuration

ActionController::Base.asset_host = "assets.example.com"

Helpers will take that

image_tag("rails.png")
# => <img alt="Rails" src="http://assets.example.com/images/rails.png?1230601161" />
stylesheet_link_tag("application")
# => <link href="http://assets.example.com/stylesheets/application.css?1232285206" media="screen" rel="stylesheet" type="text/css" />

Add Expires Headers

It is the web server responsibility to set the far-future expiration date on cache assets. Here's an example for Apache

ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
    ExpiresDefault "access plus 1 year"
</FilesMatch>

Compress Components with gzip

Another task for the web server. In Apache, enabling output compression is fairly straightforward and this is a example for your .htaccess

Options -Indexes
Order allow,deny
Allow from all
AddOutputFilterbyType DEFLATE text/plain text/html text/css application/javascript text/xml application/xml application/xml+rss text/javascript

Obviously, there is some more YSlow recommendations to be done, but the above are the quick improvements that should have improved the user experience a bit. Feel free to share your tips/tricks on the comment form below.