Web Performance and Optimization in Rails

How do we measure our application performance?
How can we optimize our application?
This presentation covers *backend* and *frontend* with a focus on Ruby on Rails.

Transcript

1. Web Performance and Optimization in Rails
2. Constantin Hofstetter
 github.com/consti twitter.com/consti consti.de claimspotting (yc s08)
3. Backend Frontend How do we measure our application performance? How can we optimize our application?
4. Backend::Measure
5. Backend::Measure NewRelic RPM (Developer mode) gem ‘newrelic_rpm’ /newrelic in development Comes free with any
 version of New Relic
6. Backend::Measure rack-mini-profiler gem ‘rack-mini-profiler’ + flamegraph gem ‘flamegraph’ /?pp=flamegraph
7. Backend::Measure Derailed Benchmarks gem 'derailed' Benchmark Rails app, especially
 memory consumption
8. Backend::Measure Does the application have a memory leak?
 What causes the memory leak? How Ruby Uses Memory
 http://www.sitepoint.com/ruby-uses-memory/
9. Backend::Optimize
10. Backend::Optimize lol_dba gem install lol_dba Scan application for missing indices postgres query to find missing indices:
 http://is.gd/blue_elephant_pg
11. bullet Backend::Optimize gem ‘bullet’ Watch application for missing or
 unnecessary eager loadings (n+1)
12. Frontend::Measure
13. WebPagetest http://www.webpagetest.org Frontend::Measure
14. Google PageSpeed Insights Frontend::Measure
15. Frontend::Optimize
16. Static Assets File Uploads Other Optimizations Frontend::Optimize
17. Frontend::Optimize::StaticAssets Optimize Delivery • Leverage browser caching • Store on file storage web service (e.g. S3) • Use content delivery network (e.g. CloudFront) Create an S3 bucket and a CloudFront instance
 that points to the bucket. Use the asset_sync gem. Set config.action_controller.asset_host.
18. Frontend::Optimize::StaticAssets # in your asset_sync.rb config.custom_headers = { # for fonts and svg, you have to set Access-Control-Allow-Origin '.*\.[svg|woff|ttf|eot]' => { 'Access-Control-Allow-Origin' => '*', cache_control: "public, max-age=#{ 1.month.to_i }", expires: nil }, # Everything else, set cache-control to max-age 1 month '.*' => { cache_control: "public, max-age=#{ 1.month.to_i }", expires: nil } } asset_sync • Set CacheControl (time in seconds the client is allowed to cache
 the resource). Don’t use Expires (future date) • Set Access-Control-Allow-Origin for fonts and SVG
19. Frontend::Optimize::StaticAssets Minimize Payload <CSS/> <JS/> <HTML/> <SVG/> text files <JPG/> <PNG/> <GIF/> images
20. Frontend::Optimize::StaticAssets # in your asset_sync.rb config.gzip_compression = true Text compression • Enable gzip_compression • S3 will deliver compressed version if GET request
 includes `Accept-Encoding: gzip` Both, the original and gzipped
 version will be synced to S3.
22. Frontend::Optimize::StaticAssets Image compression • Lossless and (optional) lossy compression • ImageOptim (drag and drop assets/images folder) • ImageOptim-CLI with git pre-commit hook # in your_project/.git/hooks/pre-commit images=$(git diff --exit-code --cached --name-only
 --diff-filter=ACM -- '*.png' ‘*.jpg' ‘*.jpeg' '*.gif')
 $(exit $?) || echo $images | imageoptim && git add $images Also converts PNG-24 to
 PNG-8+alpha images.
23. Frontend::Optimize::StaticAssets 400kb 130kb
 (32% of original file size)
24. Static Assets File Uploads Other Optimizations Frontend::Optimize
25. Frontend::Optimize::FileUploads Optimize Upload • Have browser client upload directly to S3 • Add ActiveJob to postprocess files • Resize images on client (e.g. jQuery-File-Upload)
26. Frontend::Optimize::ImageUploads Minimize Payload Optimize images when post-processing # in config/initializers/carrierwave.rb module CarrierWave::MiniMagick def optimize manipulate! do |img| img.strip img.interlace(“Plane”) # makes image progressive if JPG img.quality(90) img = yield(img) if block_given? img end end end # in ImageUploader version :preview do process :optimize end Thumbnails should be
 stored as baseline and
 not as progressive JPGs.
27. Frontend::Optimize::ImageUploads Optimize Delivery • Store on file storage web service (e.g. S3) • Use content delivery network (e.g. CloudFront) • Leverage browser caching # in config/initializers/carrierwave.rb CarrierWave.configure do |config| config.asset_host = “http://d12345678.cloudfront.net” config.fog_attributes = { 'Cache-Control' => 1.month.to_i } … end
28. Static Assets File Uploads Other Optimizations Frontend::Optimize
29. Frontend::Optimize Turbolinks is great! It’s even better with Turbolinks.enableTransitionCache() Other Optimizations • Minimize external resources (e.g. Google Fonts) • Use Turbolinks
30. HTTP/2 multiplexing serve multiple resources in one response binary based protocol – allows for smaller payload header compression – compression to the max server push – proactively send resources to client
31. Backend • Profile application • Use tools for quick
 wins Frontend • Webpagetest etc. • Compress resources • Use CDN Things to come • Keep HTTP/2
 features in mind
32. We’re always hiring self-motivated
 Rails and Front-end developers. Just send an email to jobs@oozou.com