how to solve a few client-side performance issues in rails. introduces clientperf gem for rails

1. Client-Side Performance
Measurement &
Optimization with Rails
Eric Falcao, FiveRuns
http://austinentrepreneur.wordpress.com
efalcao@gmail.com

2. The Performance
Golden Rule
“Only 10-20% of the end user response time
is spent downloading the HTML document.
The other 80-90% is spent downloading all
the components in the page”
-- Steve Souders

3. Page on uship.com (30k views/day)
after implementing only one best practice

4. Performance Optimization
Without Measuring?
Good intent but not very scientific
There’s no easy as in Rails-easy way to measure
client-side performance

5. clientperf
gem install clientperf
clientperf /path/to/rails/app
rake db:migrate

6. /clientperf

7. Make Less HTTP Requests
Less requests, less HTTP overhead
Combine components wherever possible:

8. Gzip Components
http {
...
gzip on;
gzip_min_length 1100;
gzip_types text/plain text/html application/x-javascript text/css
application/atom+xml text/xml text/js text/javascript;
...
}
Huge reduction in response size (~70%)

9. Add an expires header
Eliminates 304 Not Modified Requests
Rails helps...
...but you need to add this:
server {
...
root /home/uberhour/uberhour/current/public;
location ~ ^/(images|javascripts|stylesheets)/ {
root /home/uberhour/uberhour/current/public;
expires 365d;
}
...
}

10. Put Stylesheets at the Top
Allows the browser to start rendering the page
as content is downloaded
Everybody already does this....moving along!

11. Scripts at the Bottom
Scripts are downloaded and block the rest of the
component requests while they are being loaded
in the layout:
in the view:

12. Just a Start
There are now 34 rules broken into 7 categories

13. Resources
http://developer.yahoo.com/performance/
http://developer.yahoo.com/yslow/
http://github.com/efalcao/clientperf/

14. Questions?