Client Side Measurement & Performance With Rails
-
Upload
efalcao -
Category
Technology
-
view
3.367 -
download
4
description
Transcript of Client Side Measurement & Performance With Rails
![Page 1: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/1.jpg)
Client-Side Performance Measurement & Optimization with RailsEric Falcao, FiveRuns
http://austinentrepreneur.wordpress.com
![Page 2: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/2.jpg)
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
![Page 3: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/3.jpg)
Page on uship.com (30k views/day)
after implementing only one best practice
![Page 4: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/4.jpg)
Performance Optimization Without Measuring?
Good intent but not very scientific
There’s no easy as in Rails-easy way to measure client-side performance
![Page 5: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/5.jpg)
clientperfgem install clientperfclientperf /path/to/rails/apprake db:migrate
![Page 6: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/6.jpg)
/clientperf
![Page 7: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/7.jpg)
Make Less HTTP RequestsLess requests, less HTTP overhead
Combine components wherever possible:
![Page 8: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/8.jpg)
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%)
![Page 9: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/9.jpg)
Add an expires header
server { ... root /home/uberhour/uberhour/current/public;
location ~ ^/(images|javascripts|stylesheets)/ { root /home/uberhour/uberhour/current/public; expires 365d; } ...}
Eliminates 304 Not Modified Requests
Rails helps...
...but you need to add this:
![Page 10: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/10.jpg)
Put Stylesheets at the Top
Everybody already does this....moving along!
Allows the browser to start rendering the page as content is downloaded
![Page 11: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/11.jpg)
Scripts at the BottomScripts are downloaded and block the rest of the component requests while they are being loaded
in the layout:
in the view:
![Page 12: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/12.jpg)
Just a Start
There are now 34 rules broken into 7 categories
![Page 13: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/13.jpg)
Resourceshttp://developer.yahoo.com/performance/
http://github.com/efalcao/clientperf/
http://developer.yahoo.com/yslow/
![Page 14: Client Side Measurement & Performance With Rails](https://reader034.fdocuments.in/reader034/viewer/2022052503/54531d6eaf795919308b50f7/html5/thumbnails/14.jpg)
Questions?