The Fast, The Slow and the Lazy

2,369 views

Published on

Presentation about front end performance improvements with specific hints if you're running Ruby on Rails. Original presentation at the Boston-rb group in April 12, 2011

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,369
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
18
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

The Fast, The Slow and the Lazy

  1. 1. The Fast, The Slow and the Lazy Maurício Linhares - @mauriciojr http://techbot.me/segunda-feira, 11 de abril de 2011
  2. 2. Who? Java, Ruby, Objective-C, whatever Developer at OfficeDrop.com Agile Coach that hates scrum and loves coding Used to sing in a Heavy Metal bandsegunda-feira, 11 de abril de 2011
  3. 3. Where?segunda-feira, 11 de abril de 2011
  4. 4. Learn to respect the HTTP protocol What about reading the RFC?segunda-feira, 11 de abril de 2011
  5. 5. A GET is, in fact, “GET a COPY” And copying should not change your database, right?segunda-feira, 11 de abril de 2011
  6. 6. When should we GET? View information (images, movies, HTML documents) Searching (people should be able to bookmark search results) Web analytics (beacons and all that stuff)segunda-feira, 11 de abril de 2011
  7. 7. POST is SENDING stuff to the server And this would change your DATABASEsegunda-feira, 11 de abril de 2011
  8. 8. Idempotency principle Many GETs == same result Many POSTs == not necessarily the same resultsegunda-feira, 11 de abril de 2011
  9. 9. Google Web Accelerator An epic and dramatic story about how an #epic #win becomes an #epic #failsegunda-feira, 11 de abril de 2011
  10. 10. Front End Optimization Easier than getting the Celtics to win an NBA championshipsegunda-feira, 11 de abril de 2011
  11. 11. Use a proxy server to deliver your content Nginx, please !"#$%& !"#$%& !"#$%& ( ) * !"#$%&segunda-feira, 11 de abril de 2011
  12. 12. Define a far future expires header for all of your static assetssegunda-feira, 11 de abril de 2011
  13. 13. Issues? If you update the file, the browser will not notice; You’ll have to rename the file or add a timestamp to tell the browser it has changed (Rails does it for you!) /javascripts/jquery.js?12398766segunda-feira, 11 de abril de 2011
  14. 14. Nginx config location ~ ^/(images|javascripts|stylesheets)/ { root /home/deployer/shop/current/public;   expires max;   break; }segunda-feira, 11 de abril de 2011
  15. 15. Turn on GZIP compression in your proxysegunda-feira, 11 de abril de 2011
  16. 16. Nginx config gzip on; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 500; gzip_disable "MSIE [1-6]."; gzip_types text/html text/xml text/ javascript;segunda-feira, 11 de abril de 2011
  17. 17. CSS files should be at the beginning of your pagesegunda-feira, 11 de abril de 2011
  18. 18. Use CSS spritessegunda-feira, 11 de abril de 2011
  19. 19. At the CSS CSS <div  style="background-­‐image:  url (a_lot_of_sprites.gif);        background-­‐position:  -­‐260px  -­‐90px;        width:  26px;  height:  24px;"> </div>segunda-feira, 11 de abril de 2011
  20. 20. Get a CDN to serve your static assets and user generated content CDN == Content Delivery Network S3, CloudFiles, Akamai, whatever...segunda-feira, 11 de abril de 2011
  21. 21. Using Paperclip? has_attached_file :uploaded_data, :storage => :s3, :s3_credentials => "#{RAILS_ROOT}/config/s3.yml", :s3_headers => { "Expires" => "Thu, 31 Dec 2037 23:55:55 GMT", "Cache-Control" => "max-age=315360000" }, :path => "/:class/:attachment/:id/:style_:filename", :styles => { :thumb => 173x84# }, :convert_options => { :all => -strip }segunda-feira, 11 de abril de 2011
  22. 22. Merge all your CSS and JavaScript files in a single file for each :cache => “all_styles” If you’re using Railssegunda-feira, 11 de abril de 2011
  23. 23. Crush all your PNG files pngcrush for the winsegunda-feira, 11 de abril de 2011
  24. 24. Serve static assets from many different hosts assets1.myblog.com.br assets2.myblog.com.br assets3.myblog.com.br assets4.myblog.com.brsegunda-feira, 11 de abril de 2011
  25. 25. Remove all metadata from your JPEGs convert -strip source.jpeg destination.jpeg ImageMagicksegunda-feira, 11 de abril de 2011
  26. 26. JavaScript optimizationssegunda-feira, 11 de abril de 2011
  27. 27. Place scripts at the END of your pagesegunda-feira, 11 de abril de 2011
  28. 28. Download script files asynchronously document.write(“<script src=‘something.js’>”) AJAX call then eval the body (RJS? Remember?) dom.createElement( “script” )segunda-feira, 11 de abril de 2011
  29. 29. Minify your Scripts YUI Compressor JSMIN JS Minifiersegunda-feira, 11 de abril de 2011
  30. 30. Separate your scripts in MUST HAVE and CAN WAIT beforeOnload.js afterOnload.jssegunda-feira, 11 de abril de 2011
  31. 31. Use AJAX requests to navigate on your website Twitter.com? That’s it!segunda-feira, 11 de abril de 2011
  32. 32. Questions? Curses, compliments and money, now accepting all credit cardssegunda-feira, 11 de abril de 2011

×