Save 37% off PRO during our Black Friday Sale! »

Asset Redux - Front end performance on Rails

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
August 21, 2014

Asset Redux - Front end performance on Rails

Web application speed is paramount. Our users want our application and they want it now! We can optimise application code, database queries and so on, but that's all wasted if the page takes ages to appear. A fast back end and a slow front end can end up leaving a bad taste in the mouth.

Using Rails, we'll look at the best ways to speed up the delivery of your application. Going beyond just minifying our assets, we'll look at techniques to get our site in the user's browser quicker, improving both real and perceived speed. We'll also discover the best tools to use to check out speed and get a better idea of the user's opinion of the site.Once finished, our sites will load in a flash!

Links from the slides:

HTTP Archive trends: http://httparchive.org/trends.php

Tools

WebPageTest
Google PageSpeed Insights
Yahoo! YSlow

High Performance Browser Networking by Ilya Grigorik
Perception of speed
DOM, CSSOM and JavaScript

Rails guides on gzip compression

Serve gzipped assets on Heroku:
heroku_rails_deflate
rack-zippy

CSS and the critical path:
Patrick Hamann on CSS and the critical path
The Guardian team load CSS from localStorage
Critical path CSS generator

Lossless compression of images:
Asset pipeline preprocessor
paperclip-optimizer
carrierwave-imageoptimizer

Progressive JPEGs:
Book of Speed
image_optim

Inlining:
rails-sass-images

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

August 21, 2014
Tweet

Transcript

  1. ASSET REDUX London Web — August 2014

  2. Phil Nash @philnash philnash@twilio.com

  3. PERFORMANCE & RAILS

  4. FRONT END PERFORMANCE

  5. Why front end performance? •  Sites are getting bigger •

     More people are going mobile •  I'm a busy person
  6. Top 1000 sites Month/Year Average page size Average number of

    requests June/2011 690kB 85 June/2014 1492kB 108 Source: http archive
  7. Why Rails? •  It's what I know

  8. Why Rails? But seriously...

  9. WHY AM I TALKING ABOUT THIS?

  10. None
  11. None
  12. PERFORMANT BY DEFAULT

  13. TOOLS

  14. Tools •   WebPageTest •   Google PageSpeed Insights •

      YSlow •   Real User Monitoring
  15. The problems •  Bandwidth •  Latency •  User attention

  16. 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
  17. FAST FRONT ENDS

  18. WARNING!

  19. TEXT ASSETS

  20. CONCATENATE AND MINIFY Thanks asset pipeline!

  21. CHOOSE WHAT TO CONCATENATE

  22. GZIP Thanks asset pipeline!

  23. I <3 ASSET PIPELINE

  24. 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 .
  25. Heroku •  heroku_rails_deflate •  rack-zippy

  26. CACHE HEADERS

  27. 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 .
  28. 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 .
  29. THE DOM AND THE CSSOM

  30. Source: High performance browser networking

  31. CSS IN THE HEAD JS AT THE BOTTOM

  32. TURBOLINKS

  33. TURBOLINKS

  34. 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
  35. IMAGES

  36. LOSSLESS COMPRESSION

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

  38. Uploads Plugins! paperclip-optimizer carrierwave-imageoptimizer

  39. PROGRESSIVE JPEGS

  40. Source: Book of speed

  41. Assets Get the asset pipeline to do it! image_optim

  42. 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 .
  43. INLINING

  44. 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 .
  45. HTTP 2.0

  46. SPDY

  47. HTTP 2.0/SPDY Features •  Single connection - multiplexed streams •

     Request prioritization •  Server push
  48. None
  49. Fixing for SPDY •  Stop concatenating/inlining

  50. THANKS

  51. Questions? @philnash philnash@twilio.com