Download to read offline
Uploaded byFuture Insights
Asset Redux - Front end performance on Rails (Phil Nash)
The document discusses front-end performance optimization for web applications, particularly focusing on the Rails framework. It highlights the increasing size of websites and importance of tools like WebPageTest and Google PageSpeed Insights for improving performance. Key strategies include asset management via the asset pipeline, minimizing bandwidth and latency, and employing techniques such as inlining CSS and using HTTP/2 for enhanced loading efficiency.
More Related Content
Similar to Asset Redux - Front end performance on Rails (Phil Nash)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Asset Redux - Front end performance on Rails (Phil Nash)
- 1. ASSET REDUX LondonWeb — August 2014
- 2. Phil Nash @philnash philnash@twilio.com
- 3.
- 4.
- 5. Why front endperformance? • 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? Butseriously...
- 9. WHY AM ITALKING ABOUT THIS?
- 12.
- 13.
- 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.
- 18.
- 19.
- 20. CONCATENATE AND MINIFY Thanks asset pipeline!
- 21. CHOOSE WHAT TO CONCATENATE
- 22. GZIP Thanks assetpipeline!
- 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.
- 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 ANDTHE CSSOM
- 30. Source: High performancebrowser networking
- 31. CSS IN THEHEAD JS AT THE BOTTOM
- 32.
- 33.
- 34. CSS and thecritical 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.
- 36.
- 37. Assets Get theasset pipeline to do it! sprockets-image_compressor
- 38. Uploads Plugins! paperclip-optimizer carrierwave-imageoptimizer
- 39.
- 40. Source: Book ofspeed
- 41. Assets Get theasset 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.
- 44. Inlining rails-sass-images 01. 02. 03. .mail a { background-image: inline("svg/mail.svg"); }
- 45.
- 46.
- 47. HTTP 2.0/SPDY Features • Single connection - multiplexed streams • Request prioritization • Server push
- 49. Fixing for SPDY • Stop concatenating/inlining
- 50.
- 51.