ASSET REDUXLondon Web — August 2014

Phil Nash@philnash

philnash@twilio.com

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

Source: Book of speed

Assets

Get the asset pipeline to do it!

image_optim

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

Questions?@philnash

philnash@twilio.com