Keith and Mario’s Guide to
FAST WEBSITES @keithpitt
@mariovisic
Desktoppr
.co
We Love Gifs
Introducing...
Introducing...
Page Load:
9157ms
...what?
Fonts 20KB HTML 17KB
Images 442KB
CSS 65KB
JS 379KB TOTAL
902.85KB
So lets make it
FASTER!
Goal
< 2 Seconds Speed. Not Concurrency.
â&#x20AC;&#x153;80-90% of the end
user response time is spent on the frontend. Start there.â&#x20AC;? Steve Souders
Backend
Frontend
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Frontend
How To
MEASURE?
Navigation Timing API
OPEN SOURCE!
``
http://kaaes.github.com/timing/info.html
Note:
Weâ&#x20AC;&#x2122;re benchmarking with an empty cache
Start Page Load Render Time Time
Minify CSS & JavaScript # config/environments/production.rb config.assets.compress = true # true by default in rails
9157ms
8061ms
gzip
(html, css, javascript) # config.ru require ::File.expand_path('...', __FILE__) use Rack::Deflater # add this line run Giftoppr::Application
8061ms
7390ms
Compress Images # Gemfile gem "carrierwave-processing" # app/uploaders/preview_uploader.rb class PreviewUploader < CarrierWave::Uploader::Base # ... process :convert => "jpg" process :strip process :quality => 80 end
ImageOptim
Tip:
Use sprites or font libraries for small images.
7390ms
6599ms
JavaScript at the Bottom ... <script src="/assets/application.js"></script> </body> </html>
6599ms
5659ms
Asynchronously Loading JavaScript # application.html.erb <script><!-- inline head.js script loader --></script> <script>head.js("/assets/application.js");</script>
5659ms
6133ms
Why did it get
SLOWER‽
Note:
Only 1 JavaScript file, and increased page size.
Tip:
Be smart about how you split up your assets.
Note:
Watch your Load and DOMContentLoaded events!
~300ms
Content Delivery Network
# Gemfile gem "asset_sync" # Heroku Environment Variables export ASSET_SYNC_GZIP_COMPRESSION="true"
6133ms
2079ms
CDN (Multiple Hosts) # 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
Tip:
DNS Prefetching <link rel="dns-prefetch" href="//a0.assetdomain.com">
Tip:
Cookie-less Domains
2079ms
1945ms
Goal Achieved
< 2 SECONDS!
Bonus Round!
SPDY for Static Assets
1945ms
1856ms
9157ms
We saved...
7301ms
1856ms
Tip:
HTML5 History API # Gemfile gem "turbolinks" # Default in Rails 4
Danger!
3rd Party JavaScript
â&#x20AC;&#x153;Look at all these social buttons! We need those!!â&#x20AC;?
1856ms
4716ms
Oh! Btw...
Thanks!
PS. We have Desktoppr Stickers. @keithpitt
@mariovisic