Asset Redux - Front end performance on Rails

Slide 1

Slide 1 text

ASSET REDUX London Web — August 2014

Slide 2

Slide 2 text

Phil Nash @philnash [email protected]

Slide 3

Slide 3 text

PERFORMANCE & RAILS

Slide 4

Slide 4 text

FRONT END PERFORMANCE

Slide 5

Slide 5 text

Why front end performance? • Sites are getting bigger • More people are going mobile • I'm a busy person

Slide 6

Slide 6 text

Top 1000 sites Month/Year Average page size Average number of requests June/2011 690kB 85 June/2014 1492kB 108 Source: http archive

Slide 7

Slide 7 text

Why Rails? • It's what I know

Slide 8

Slide 8 text

Why Rails? But seriously...

Slide 9

Slide 9 text

WHY AM I TALKING ABOUT THIS?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

PERFORMANT BY DEFAULT

Slide 13

Slide 13 text

TOOLS

Slide 14

Slide 14 text

Tools • WebPageTest • Google PageSpeed Insights • YSlow • Real User Monitoring

Slide 15

Slide 15 text

The problems • Bandwidth • Latency • User attention

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

FAST FRONT ENDS

Slide 18

Slide 18 text

WARNING!

Slide 19

Slide 19 text

TEXT ASSETS

Slide 20

Slide 20 text

CONCATENATE AND MINIFY Thanks asset pipeline!

Slide 21

Slide 21 text

CHOOSE WHAT TO CONCATENATE

Slide 22

Slide 22 text

GZIP Thanks asset pipeline!

Slide 23

Slide 23 text

I <3 ASSET PIPELINE

Slide 24

Slide 24 text

nginx l o c a t i o n ~ ^ / ( a s s e t s ) / { r o o t / p a t h / t o / p u b l i c ; g z i p _ s t a t i c o n ; # t o s e r v e p r e - g z i p p e d v e r s i o n e x p i r e s m a x ; a d d _ h e a d e r C a c h e - C o n t r o l p u b l i c ; } Source: RailsGuides 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 .

Slide 25

Slide 25 text

Heroku • heroku_rails_deflate • rack-zippy

Slide 26

Slide 26 text

CACHE HEADERS

Slide 27

Slide 27 text

nginx l o c a t i o n ~ ^ / ( a s s e t s ) / { r o o t / p a t h / t o / p u b l i c ; g z i p _ s t a t i c o n ; e x p i r e s m a x ; a d d _ h e a d e r C a c h e - C o n t r o l p u b l i c ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 .

Slide 28

Slide 28 text

Heroku M y A p p : : A p p l i c a t i o n . c o n f i g u r e d o c o n f i g . s e r v e _ s t a t i c _ a s s e t s = t r u e c o n f i g . s t a t i c _ c a c h e _ c o n t r o l = " p u b l i c , m a x - a g e = 3 1 5 3 6 0 0 0 " e n d 0 1 . 0 2 . 0 3 . 0 4 .

Slide 29

Slide 29 text

THE DOM AND THE CSSOM

Slide 30

Slide 30 text

Source: High performance browser networking

Slide 31

Slide 31 text

CSS IN THE HEAD JS AT THE BOTTOM

Slide 32

Slide 32 text

TURBOLINKS

Slide 33

Slide 33 text

TURBOLINKS

Slide 34

Slide 34 text

CSS and the critical path Inline the CSS required for above the fold in the head Load the rest at the bottom Patrick Hamann on CSS and the critical path The Guardian team load CSS from localStorage Critical path CSS generator

Slide 35

Slide 35 text

IMAGES

Slide 36

Slide 36 text

LOSSLESS COMPRESSION

Slide 37

Slide 37 text

Assets Get the asset pipeline to do it! sprockets-image_compressor

Slide 38

Slide 38 text

Uploads Plugins! paperclip-optimizer carrierwave-imageoptimizer

Slide 39

Slide 39 text

PROGRESSIVE JPEGS

Slide 40

Slide 40 text

Source: Book of speed

Slide 41

Slide 41 text

Assets Get the asset pipeline to do it! image_optim

Slide 42

Slide 42 text

Paperclip h a s _ a t t a c h e d _ f i l e : i m a g e , { : s t y l e s = > { : p r o g r e s s i v e = > ' 1 x 1 < ' } , : c o n v e r t _ o p t i o n s = > { : p r o g r e s s i v e = > ' - i n t e r l a c e P l a n e ' } } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .

Slide 43

Slide 43 text

INLINING

Slide 44

Slide 44 text

Inlining rails-sass-images . m a i l a { b a c k g r o u n d - i m a g e : i n l i n e( " s v g / m a i l . s v g " ) ; } 0 1 . 0 2 . 0 3 .

Slide 45

Slide 45 text

HTTP 2.0

Slide 46

Slide 46 text

SPDY

Slide 47

Slide 47 text

HTTP 2.0/SPDY Features • Single connection - multiplexed streams • Request prioritization • Server push