Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keith and Marios Guide to Fast Websites

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

Keith Pitt

February 22, 2013
Tweet

More Decks by Keith Pitt

Other Decks in Programming

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