Rails Asset Pipeline and You

Optimizing assets generally and using the Rails Asset Pipeline in particular

Transcript

1. Rails Asset Pipeline and You What is it and how to squeeze every drop of speed out
2. What Are We Gonna Talk About? • Assets • Rails Asset Pipeline • Browser Networking • File Optimizations • Caching • Browser Rendering • Rendering Optimizations
3. Static Assets
4. Static Assets: What Are They? • Cascading Style Sheets • JavaScript • Images • Fonts
5. Static Assets: They Are Slow
6. Rails Asset Pipeline
7. Rails Asset Pipeline • Gives you the tools to make your assets fast(er) • config.assets.enabled = true • Enabled by default since Rails 3.1
8. Browser Networking
9. How it Works SYN-ACK TCP SYN ACK HTTP GET Response FINALLY!! DNS Query Response
10. File Optimizations
11. Concatenate Files • Problem ◦ Lots of requests for small files is terrible over HTTP ◦ Limited number of connections per domain ◦ Each connection can only make one request at a time • Solution ◦ Concatenate JavaScript ◦ Concatenate CSS ◦ Concatenate small images into image sprites
12. Concatenate Files • Problem ◦ Lots of requests for small files is terrible over HTTP • Doing it in Rails ◦ Concatenate JavaScript ▪ app/assets/javascripts/application.js ◦ Concatenate CSS ▪ app/assets/javascripts/application.css ◦ Concatenate small images into image sprites ▪ Manually or via a gem (sprite-factory ?)
13. • Problem ◦ Large files are slow to download, especially over mobile networks • Solution ◦ Minify JavaScript ▪ Uglifier ▪ Closure Compiler ◦ Minify CSS ▪ CSSO ▪ Clean-CSS ◦ Compress with gzip Compress Files: Text
14. • Problem ◦ Large files are slow to download, especially over mobile networks • Doing it in Rails ◦ Minify JavaScript ▪ config.assets.js_compressor = :uglifier ◦ Minify CSS ▪ csso-rails or ruby-clean-css ▪ config.assets.css_compressor = :csso // :cleancss ◦ Compress with gzip ▪ config.serve_static_files = true Compress Files: Text
15. Compress Files: Images • Problem ◦ Large files take a long time to download, especially over mobile networks • Solution ◦ Choose the right format ▪ Does your image consist of geometric shapes? - SVG ▪ Is your image animated? - GIF (not JIF) ▪ Does your image contain transparent space? - PNG ▪ Is your image a photograph? - JPG ▪ Something else? - Experiment
16. Compress Files: Images • Problem ◦ Large files take a long time to download, especially over mobile networks • Solution ◦ Lossless compression ▪ ImageOptim (png, gif, jpg) ▪ svgo-gui & gzip (svg) ◦ Lossy Compression ▪ ImageAlpha (png) ▪ JPEGmini (jpg)
17. Compress Files: Images • Problem ◦ Large files take a long time to download, especially over mobile networks • Doing it in Rails ◦ Manually ▪ Safest (allows for visual inspection) and easiest to get started ◦ Automatically ▪ Consider ImageOptim-CLI and a git pre-commit hook ◦ Asset Pipeline ▪ config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.svg)
18. Compress Files: Fonts • Problem ◦ Large files take a long time to download, especially over mobile networks • Solution ◦ Use subsetting to include only the glyphs you need ◦ Use compression ▪ TTF files should be gzipped ▪ WOFF and WOFF2 have built in compression ▪ EOT has optional built in compression or can be gzipped
19. Compress Files: Fonts • Problem ◦ Large files take a long time to download, especially over mobile networks • Doing it in Rails ◦ Manually ▪ http://www.fontsquirrel.com/tools/webfont-generator ◦ Asset Pipeline ▪ config.assets.precompile += %w(*.eot *.ttf *.woff *.woff2)
20. Caching
21. Add Caching Headers • Problem ◦ Browsers have to download your assets on every page load even though they don’t change • Solution ◦ Allow assets to be cacheable for a least 1 year ◦ Cache-Control:public, max-age=31536000 ◦ config.static_cache_control = "public, max-age=31536000"
22. Cache Busting with Fingerprints • Problem ◦ If assets are cached for a year it's impossible to update them • Solution ◦ Add a fingerprint to each file that changes if its contents change ◦ This is often accomplished by hashing the contents of the file ◦ config.assets.digest = true ◦ Use asset path helpers
23. Minimize Cache Churn • Problem ◦ Concatenating all your JavaScript and CSS files means they change frequently • Solution ◦ Segment out slow and fast changing assets into different JavaScript or CSS files ◦ An easy way to start is to separate your code from vendor code ◦ config.assets.precompile += %w(vendor.js vendor.css)
24. Content Delivery Network • Problem ◦ Every new device that visits your site has to pull your assets • Solution ◦ Use a content delivery network ◦ It takes the load off your poor little 1x dyno ◦ It makes copies of your assets all over the globe so clients can fetch them faster ◦ config.action_controller.asset_host = ENV['ASSET_HOST']
25. HTTP/2 • Problem ◦ Browsers only make a few connections per domain • Solution ◦ HTTP/2 allows for multiple concurrent requests over one connection ◦ Ensure your CDN supports HTTP/2 ◦ Host all of your assets (including fonts) on the same domain ◦ Domain sharding is dead
26. Browser Rendering
27. How it Works
28. How it Works • domLoading ◦ start parsing HTML • domInteractive ◦ DOM is ready ◦ parser blocking JavaScript has been executed • domContentLoaded ◦ both the DOM and CSSOM are ready ◦ deferred JavaScript has been executed ◦ domReady event is fired • domComplete ◦ the page and all of its subresources are ready ◦ async JavaScript has been executed ◦ the loading spinner has stopped spinning • loadEvent ◦ onload event is fired
29. Rendering Optimizations
30. • Problem ◦ CSS blocks rendering • Solution ◦ Put CSS in the document head so it can be found ASAP ◦ Consider inlining the critical CSS directly into the HTML document CSS Best Practices
31. JavaScript Best Practices • Problem ◦ JavaScript waits for CSSOM construction and blocks DOM construction • Solution ◦ Put JavaScript at the bottom of the page to block as little DOM construction as possible ◦ Consider inlining any render critical JavaScript ◦ Use async script tags to unblock DOM construction ◦ Defer loading scripts until onLoad when possible
32. What Are We Gonna Talk About? • Assets • Rails Asset Pipeline • Browser Networking • File Optimizations • Caching • Browser Rendering • Rendering Optimizations
33. Questions?