Asset Redux - Front end performance on Rails (Phil Nash)
-
Upload
future-insights -
Category
Technology
-
view
147 -
download
4
description
Transcript of Asset Redux - Front end performance on Rails (Phil Nash)
![Page 1: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/1.jpg)
ASSET REDUXLondon Web — August 2014
![Page 3: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/3.jpg)
PERFORMANCE &RAILS
![Page 4: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/4.jpg)
FRONT ENDPERFORMANCE
![Page 5: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/5.jpg)
Why front end performance?
• Sites are getting bigger• More people are going mobile• I'm a busy person
![Page 6: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/6.jpg)
Top 1000 sites
Month/Year Average page size Average number of requests
June/2011 690kB 85
June/2014 1492kB 108
Source: http archive
![Page 7: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/7.jpg)
Why Rails?
• It's what I know
![Page 8: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/8.jpg)
Why Rails?
But seriously...
![Page 9: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/9.jpg)
WHY AM I TALKINGABOUT THIS?
![Page 10: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/10.jpg)
![Page 11: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/11.jpg)
![Page 12: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/12.jpg)
PERFORMANT BYDEFAULT
![Page 13: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/13.jpg)
TOOLS
![Page 14: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/14.jpg)
Tools
• WebPageTest• Google PageSpeed Insights• YSlow• Real User Monitoring
![Page 15: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/15.jpg)
The problems
• Bandwidth• Latency• User attention
![Page 16: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/16.jpg)
Delay User perception
0-100ms Instant
100-300ms Small perceptible delay
300-1000ms Machine is working
1000+ms Likely mental context switch
10000+ms Task is abandoned
Source: High performance browser networking
![Page 17: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/17.jpg)
FAST FRONT ENDS
![Page 18: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/18.jpg)
WARNING!
![Page 19: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/19.jpg)
TEXT ASSETS
![Page 20: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/20.jpg)
CONCATENATE ANDMINIFY
Thanks asset pipeline!
![Page 21: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/21.jpg)
CHOOSE WHAT TOCONCATENATE
![Page 22: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/22.jpg)
GZIPThanks asset pipeline!
![Page 23: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/23.jpg)
I <3 ASSETPIPELINE
![Page 24: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/24.jpg)
nginx
location ~ ̂/(assets)/ {
root /path/to/public;
gzip_static on; # to serve pre-gzipped version
expires max;
add_header Cache-Control public;
}
Source: RailsGuides
01.
02.
03.
04.
05.
06.
![Page 25: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/25.jpg)
Heroku
• heroku_rails_deflate• rack-zippy
![Page 26: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/26.jpg)
CACHE HEADERS
![Page 27: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/27.jpg)
nginx
location ~ ̂/(assets)/ {
root /path/to/public;
gzip_static on;
expires max;
add_header Cache-Control public;
}
01.
02.
03.
04.
05.
06.
![Page 28: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/28.jpg)
Heroku
MyApp::Application.configure do
config.serve_static_assets = true
config.static_cache_control = "public, max-age=31536000"
end
01.
02.
03.
04.
![Page 29: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/29.jpg)
THE DOM AND THECSSOM
![Page 30: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/30.jpg)
Source: High performance browser networking
![Page 31: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/31.jpg)
CSS IN THE HEADJS AT THE BOTTOM
![Page 32: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/32.jpg)
TURBOLINKS
![Page 33: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/33.jpg)
TURBOLINKS
![Page 34: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/34.jpg)
CSS and the critical path
Inline the CSS required for above the fold in the headLoad the rest at the bottom
Patrick Hamann on CSS and the critical path
The Guardian team load CSS from localStorage
Critical path CSS generator
![Page 35: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/35.jpg)
IMAGES
![Page 36: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/36.jpg)
LOSSLESSCOMPRESSION
![Page 37: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/37.jpg)
Assets
Get the asset pipeline to do it!
sprockets-image_compressor
![Page 38: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/38.jpg)
Uploads
Plugins!
paperclip-optimizer
carrierwave-imageoptimizer
![Page 39: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/39.jpg)
PROGRESSIVEJPEGS
![Page 42: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/42.jpg)
Paperclip
has_attached_file :image, {
:styles => {
:progressive => '1x1<'
},
:convert_options => {
:progressive => '-interlace Plane'
}
}
01.
02.
03.
04.
05.
06.
07.
08.
![Page 43: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/43.jpg)
INLINING
![Page 44: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/44.jpg)
Inlining
rails-sass-images
.mail a {
background-image: inline("svg/mail.svg");
}
01.
02.
03.
![Page 45: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/45.jpg)
HTTP 2.0
![Page 46: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/46.jpg)
SPDY
![Page 47: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/47.jpg)
HTTP 2.0/SPDY Features
• Single connection - multiplexed streams• Request prioritization• Server push
![Page 48: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/48.jpg)
![Page 49: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/49.jpg)
Fixing for SPDY
• Stop concatenating/inlining
![Page 50: Asset Redux - Front end performance on Rails (Phil Nash)](https://reader030.fdocuments.in/reader030/viewer/2022013121/54bfd3654a79595d628b45ee/html5/thumbnails/50.jpg)
THANKS