51
ASSET REDUX London Web — August 2014
| Date post: | 21-Jan-2015 |
| Category: |
Technology |
| Upload: | future-insights |
| View: | 144 times |
| Download: | 4 times |
ASSET REDUXLondon Web — August 2014
PERFORMANCE &RAILS
FRONT ENDPERFORMANCE
Why front end performance?
• Sites are getting bigger• More people are going mobile• I'm a busy person
Top 1000 sites
Month/Year Average page size Average number of requests
June/2011 690kB 85
June/2014 1492kB 108
Source: http archive
Why Rails?
• It's what I know
Why Rails?
But seriously...
WHY AM I TALKINGABOUT THIS?
PERFORMANT BYDEFAULT
TOOLS
Tools
• WebPageTest• Google PageSpeed Insights• YSlow• Real User Monitoring
The problems
• Bandwidth• Latency• User attention
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
FAST FRONT ENDS
WARNING!
TEXT ASSETS
CONCATENATE ANDMINIFY
Thanks asset pipeline!
CHOOSE WHAT TOCONCATENATE
GZIPThanks asset pipeline!
I <3 ASSETPIPELINE
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.
Heroku
• heroku_rails_deflate• rack-zippy
CACHE HEADERS
nginx
location ~ ̂/(assets)/ {
root /path/to/public;
gzip_static on;
expires max;
add_header Cache-Control public;
}
01.
02.
03.
04.
05.
06.
Heroku
MyApp::Application.configure do
config.serve_static_assets = true
config.static_cache_control = "public, max-age=31536000"
end
01.
02.
03.
04.
THE DOM AND THECSSOM
Source: High performance browser networking
CSS IN THE HEADJS AT THE BOTTOM
TURBOLINKS
TURBOLINKS
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
IMAGES
LOSSLESSCOMPRESSION
Assets
Get the asset pipeline to do it!
sprockets-image_compressor
Uploads
Plugins!
paperclip-optimizer
carrierwave-imageoptimizer
PROGRESSIVEJPEGS
Paperclip
has_attached_file :image, {
:styles => {
:progressive => '1x1<'
},
:convert_options => {
:progressive => '-interlace Plane'
}
}
01.
02.
03.
04.
05.
06.
07.
08.
INLINING
Inlining
rails-sass-images
.mail a {
background-image: inline("svg/mail.svg");
}
01.
02.
03.
HTTP 2.0
SPDY
HTTP 2.0/SPDY Features
• Single connection - multiplexed streams• Request prioritization• Server push
Fixing for SPDY
• Stop concatenating/inlining
THANKS
