Slides from Phil Nash's presentation at the London Web Meet-up - http://londonweb.org Speaker Phil Nash is a developer evangelist for Twilio and a Ruby and JavaScript developer. He loves test coverage, great beer, hackathons, and gems with puns in their names. Get all four together for maximum points. He once made a pull request to Rails... it's still open ;) Overview of session: 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!

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?

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
01.
02.
03.
04.
05.
06.
location ~ ^/(assets)/ {
root /path/to/public;
gzip_static on; # to serve pre-gzipped version
expires max;
add_header Cache-Control public;
}
Source: RailsGuides

25. Heroku
• heroku_rails_deflate
• rack-zippy

26. CACHE HEADERS

27. nginx
01.
02.
03.
04.
05.
06.
location ~ ^/(assets)/ {
root /path/to/public;
gzip_static on;
expires max;
add_header Cache-Control public;
}

28. Heroku
01.
02.
03.
04.
MyApp::Application.configure do
config.serve_static_assets = true
config.static_cache_control = "public, max-age=31536000"
end

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
01.
02.
03.
04.
05.
06.
07.
08.
has_attached_file :image, {
:styles => {
:progressive => '1x1<'
},
:convert_options => {
:progressive => '-interlace Plane'
}
}

43. INLINING

44. Inlining
rails-sass-images
01.
02.
03.
.mail a {
background-image: inline("svg/mail.svg");
}

45. HTTP 2.0

46. SPDY

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

49. Fixing for SPDY
• Stop concatenating/inlining

50. THANKS

51. Questions?
@philnash
philnash@twilio.com