Keith and Marios Guide to Fast Websites

E14f55d3f939977cecbf51b64ff6f861?s=47 Keith Pitt
February 22, 2013

Keith and Marios Guide to Fast Websites

This is a presentation that @mariovisic (http://twitter.com/mariovisic) and I (http://twitter.com/keithpitt) performed at the first ever Ruby Conference Australia, 2013.

In the presentation, we take an open source web app (which currently loads in 9 seconds online) and try to make it load in under 2 seconds, using a variety of very easy techniques.

We also demonstrate how to measure performance accurately using open source tools.

You can watch the video of this presentation here: http://vimeo.com/61342267

You can get the full keynote presentation here: https://github.com/desktoppr/keith-and-marios-guide-to-fast-websites

E14f55d3f939977cecbf51b64ff6f861?s=128

Keith Pitt

February 22, 2013
Tweet

Transcript

  1. Keith and Mario’s Guide to FAST WEBSITES @keithpitt @mariovisic

  2. None
  3. None
  4. None
  5. None
  6. Desktoppr.co

  7. We Love Gifs

  8. None
  9. Introducing...

  10. Introducing...

  11. None
  12. 9157ms Page Load:

  13. ...what?

  14. None
  15. Fonts 20KB Images 442KB JS 379KB CSS 65KB HTML 17KB

    TOTAL 902.85KB
  16. So lets make it FASTER!

  17. < 2 Seconds Speed. Not Concurrency. Goal

  18. Steve Souders “80-90% of the end user response time is

    spent on the frontend. Start there.”
  19. None
  20. Backend Frontend

  21. http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

  22. Frontend

  23. How To MEASURE?

  24. Navigation Timing API

  25. OPEN SOURCE!

  26. None
  27. http://kaaes.github.com/timing/info.html ``

  28. None
  29. None
  30. None
  31. Note: We’re benchmarking with an empty cache

  32. None
  33. None
  34. Start Render Time Page Load Time

  35. None
  36. # config/environments/production.rb config.assets.compress = true # true by default in

    rails Minify CSS & JavaScript
  37. 9157ms

  38. 8061ms

  39. # config.ru require ::File.expand_path('...', __FILE__) use Rack::Deflater # add this

    line run Giftoppr::Application gzip (html, css, javascript)
  40. 8061ms

  41. 7390ms

  42. None
  43. # Gemfile gem "carrierwave-processing" # app/uploaders/preview_uploader.rb class PreviewUploader < CarrierWave::Uploader::Base

    # ... process :convert => "jpg" process :strip process :quality => 80 end Compress Images
  44. ImageOptim

  45. Tip: Use sprites or font libraries for small images.

  46. 7390ms

  47. 6599ms

  48. None
  49. ... <script src="/assets/application.js"></script> </body> </html> JavaScript at the Bottom

  50. 6599ms

  51. 5659ms

  52. # application.html.erb <script><!-- inline head.js script loader --></script> <script>head.js("/assets/application.js");</script> Asynchronously

    Loading JavaScript
  53. 5659ms

  54. 6133ms

  55. Why did it get SLOWER‽

  56. Note: Only 1 JavaScript file, and increased page size.

  57. Tip: Be smart about how you split up your assets.

  58. Note: Watch your Load and DOMContentLoaded events!

  59. ~300ms

  60. # Gemfile gem "asset_sync" # Heroku Environment Variables export ASSET_SYNC_GZIP_COMPRESSION="true"

    Content Delivery Network
  61. 6133ms

  62. 2079ms

  63. # config/environments/production.rb config.action_controller.asset_host = "http://%d.assets.com" # config/initializers/carrierwave.rb CarrierWave.configure do |config|

    config.asset_host = lambda do lambda do |file| "http://%d.assets.com".gsub /%d/, (file.path.sum % 4).to_s end end end CDN (Multiple Hosts)
  64. Tip: DNS Prefetching <link rel="dns-prefetch" href="//a0.assetdomain.com">

  65. Tip: Cookie-less Domains

  66. 2079ms

  67. 1945ms

  68. Goal Achieved < 2 SECONDS!

  69. Bonus Round!

  70. SPDY for Static Assets

  71. 1945ms

  72. 1856ms

  73. 1856ms 9157ms 7301ms We saved...

  74. None
  75. # Gemfile gem "turbolinks" # Default in Rails 4 Tip:

    HTML5 History API
  76. Danger! 3rd Party JavaScript

  77. “Look at all these social buttons! We need those!!”

  78. None
  79. 1856ms

  80. 4716ms

  81. Oh! Btw...

  82. None
  83. Thanks! @keithpitt @mariovisic PS. We have Desktoppr Stickers.