Smaller is always better - at RoRo Melb

Gzipping content has long been a best practice when serving text based files over the web. Turn on gzip compression in your web server, your users download smaller files quicker and everyone is happy, right?

That's what I thought as I went to tune my personal site over the holiday and I ended up writing 3 new gems and learning a whole bunch about the compression options available to us today. So join me on a journey to smaller and smaller files, discover how to tune your applications and find out how I ended up fighting a CDN over 1kB.

--

The gems:
https://github.com/philnash/jekyll-gzip
https://github.com/philnash/jekyll-zopfli
https://github.com/philnash/jekyll-brotli

Other important gems:
https://github.com/miyucy/zopfli
https://github.com/miyucy/brotli
https://github.com/hansottowirtz/sprockets-exporters_pack

Gzip a file in Ruby: https://philna.sh/blog/2018/02/25/gzip-file-ruby/

Transcript

1. SMALLER IS ALWAYS BETTER
8. PHIL NASH @philnash https:/ /philna.sh philnash@twilio.com
9. @philnash
10. @philnash
11. @philnash
12. @philnash
13. GZIP
14. Accept-Encoding: gzip @philnash
15. NGINX server { gzip on; gzip_disable "msie6"; gzip_vary on; } 01. 02. 03. 04. 05. @philnash
16. @philnash
17. NEW GEM TIME @philnash
18. JEKYLL-GZIP Jekyll::Hooks.register :site, :post_write do |site| if ENV["JEKYLL_ENV"] == "production" Jekyll::Gzip::Compressor.new(site).compress end end 01. 02. 03. 04. 05. @philnash
19. JEKYLL-GZIP def compress site.each_site_file do |file| compress_file(file.destination(site.dest)) end end 01. 02. 03. 04. 05. @philnash
20. JEKYLL-GZIP def compress_file(file_name) zipped = "#{file_name}.gz" Zlib::GzipWriter.open(zipped, Zlib::BEST_COMPRESSION) do |gz| gz.mtime = File.mtime(file_name) gz.orig_name = file_name gz.write IO.binread(file_name) end end 01. 02. 03. 04. 05. 06. 07. 08. @philnash
21. JEKYLL-GZIP def compress_file(file_name) zipped = "#{file_name}.gz" Zlib::GzipWriter.open(zipped, Zlib::BEST_COMPRESSION) do |gz| gz.mtime = File.mtime(file_name) gz.orig_name = file_name gz.write IO.binread(file_name) end end 01. 02. 03. 04. 05. 06. 07. 08. @philnash
22. TABLE OF COMPRESSION Results when compressing unminified jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% @philnash
23. SMALLER IS ALWAYS BETTER
24. @philnash
25. ZOPFLI
26. Accept-Encoding: gzip @philnash
27. NEW GEM TIME @philnash
28. JEKYLL-ZOPFLI require "zopfli" def compress_file(file_name) zipped = "#{file_name}.gz" contents = Zopfli.deflate(File.read(file_name), format: :gzip) File.open(zipped, "w+") do |file| file << contents end end 01. 02. 03. 04. 05. 06. 07. 08. @philnash
29. TABLE OF COMPRESSION Results when compressing unminified jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zopfli 76,352 -71.90% @philnash
30. SMALLER IS ALWAYS BETTER
31. NGINX server { gzip off; gzip_static on; gzip_disable "msie6"; gzip_vary on; } 01. 02. 03. 04. 05. 06. @philnash
32. @philnash
33. BROTLI
34. Accept-Encoding: br @philnash
35. @philnash
36. HTTPS @philnash
37. NEW GEM TIME @philnash
38. JEKYLL-BROTLI require 'brotli' def compress_file(file_name) compressed = "#{file_name}.br" contents = Brotli.deflate(File.read(file_name), quality: 11) File.open(compressed, "w+") do |file| file << contents end end 01. 02. 03. 04. 05. 06. 07. 08. @philnash
39. TABLE OF COMPRESSION Results when compressing unminified jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zopfli 76,352 -71.90% brotli quality 6 75,302 -72.29% @philnash
41. JEKYLL-BROTLI require 'brotli' def compress_file(file_name) compressed = "#{file_name}.br" contents = Brotli.deflate(File.read(file_name), quality: 11) File.open(compressed, "w+") do |file| file << contents end end 01. 02. 03. 04. 05. 06. 07. 08. @philnash
42. TABLE OF COMPRESSION Results when compressing unminified jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zopfli 76,352 -71.90% brotli quality 6 75,302 -72.29% brotli quality 11 66,920 -75.37% @philnash
43. RESULTS @philnash
44. A FIGHT @philnash
45. @philnash
46. “A FIGHT” @philnash
47. TAKEAWAYS @philnash
48. JEKYLL https:/ /github.com/philnash/jekyll-gzip https:/ /github.com/philnash/jekyll-zopfli https:/ /github.com/philnash/jekyll-brotli @philnash
49. RAILS https:/ /github.com/miyucy/zopfli Rails.application.assets.gzip = :zopfli https:/ /github.com/hansottowirtz/sprockets- exporters_pack @philnash
50. @philnash
51. SMALLER IS ALWAYS BETTER
53. THANKS! @philnash https:/ /philna.sh philnash@twilio.com