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

Transcript

1. Keith and Mario’s Guide to FAST WEBSITES @keithpitt @mariovisic
6. Desktoppr.co
7. We Love Gifs
9. Introducing...
10. Introducing...
12. 9157ms Page Load:
13. ...what?
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.”
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!
27. http://kaaes.github.com/timing/info.html ``
31. Note: We’re benchmarking with an empty cache
34. Start Render Time Page Load Time
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
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
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...
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!!”
79. 1856ms
80. 4716ms
81. Oh! Btw...
83. Thanks! @keithpitt @mariovisic PS. We have Desktoppr Stickers.