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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. Desktoppr.co
   

   View Slide

7. We
   Love
   Gifs
   

   View Slide

8. View Slide

9. Introducing...
   

   View Slide

10. Introducing...
    

    View Slide

11. View Slide

12. 9157ms
    Page Load:
    

    View Slide

13. ...what?
    

    View Slide

14. View Slide

15. Fonts
    20KB
    Images
    442KB
    JS
    379KB
    CSS
    65KB
    HTML
    17KB
    TOTAL
    902.85KB
    

    View Slide

16. So lets make it
    FASTER!
    

    View Slide

17. < 2 Seconds
    Speed. Not Concurrency.
    Goal
    

    View Slide

18. Steve Souders
    “80-90% of the end
    user response time is
    spent on the frontend.
    Start there.”
    

    View Slide

19. View Slide

20. Backend Frontend
    

    View Slide

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

    View Slide

22. Frontend
    

    View Slide

23. How To
    MEASURE?
    

    View Slide

24. Navigation
    Timing API
    

    View Slide

25. OPEN SOURCE!
    

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. Note:
    We’re
    benchmarking with
    an empty cache
    

    View Slide

32. View Slide

33. View Slide

34. Start
    Render Time
    Page Load
    Time
    

    View Slide

35. View Slide

36. # config/environments/production.rb
    config.assets.compress = true
    # true by default in rails
    Minify CSS
    & JavaScript
    

    View Slide

37. 9157ms
    

    View Slide

38. 8061ms
    

    View Slide

39. # config.ru
    require ::File.expand_path('...', __FILE__)
    use Rack::Deflater # add this line
    run Giftoppr::Application
    gzip
    (html, css, javascript)
    

    View Slide

40. 8061ms
    

    View Slide

41. 7390ms
    

    View Slide

42. View Slide

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
    

    View Slide

44. ImageOptim
    

    View Slide

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

    View Slide

46. 7390ms
    

    View Slide

47. 6599ms
    

    View Slide

48. View Slide

49. ...
    
    

    View Slide

50. 6599ms
    

    View Slide

51. 5659ms
    

    View Slide

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

    View Slide

53. 5659ms
    

    View Slide

54. 6133ms
    

    View Slide

55. Why did it get
    SLOWER‽
    

    View Slide

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

    View Slide

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

    View Slide

58. Note:
    Watch your Load and
    DOMContentLoaded
    events!
    

    View Slide

59. ~300ms
    

    View Slide

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

    View Slide

61. 6133ms
    

    View Slide

62. 2079ms
    

    View Slide

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)
    

    View Slide

64. Tip:
    DNS Prefetching
    
    

    View Slide

65. Tip:
    Cookie-less
    Domains
    

    View Slide

66. 2079ms
    

    View Slide

67. 1945ms
    

    View Slide

68. Goal Achieved
    < 2 SECONDS!
    

    View Slide

69. Bonus Round!
    

    View Slide

70. SPDY for Static Assets
    

    View Slide

71. 1945ms
    

    View Slide

72. 1856ms
    

    View Slide

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

    View Slide

74. View Slide

75. # Gemfile
    gem "turbolinks" # Default in Rails 4
    Tip:
    HTML5 History API
    

    View Slide

76. Danger!
    3rd Party JavaScript
    

    View Slide

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

    View Slide

78. View Slide

79. 1856ms
    

    View Slide

80. 4716ms
    

    View Slide

81. Oh! Btw...
    

    View Slide

82. View Slide

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

    View Slide