Smaller is always better - at RoRo Sydney

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
4. PHIL NASH @philnash https:/ /philna.sh philnash@twilio.com
5. @philnash
6. @philnash
7. @philnash
8. @philnash
9. GZIP
10. Accept-Encoding: gzip @philnash
11. NGINX server { gzip on; gzip_disable "msie6"; gzip_vary on; } 01. 02. 03. 04. 05. @philnash
12. @philnash
13. NEW GEM TIME @philnash
14. 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
15. JEKYLL-GZIP def compress site.each_site_file do |file| compress_file(file.destination(site.dest)) end end 01. 02. 03. 04. 05. @philnash
16. 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
17. 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
18. TABLE OF COMPRESSION Results when compressing unmini ed jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% @philnash
19. SMALLER IS ALWAYS BETTER
20. @philnash
21. ZOPFLI
22. Accept-Encoding: gzip @philnash
23. NEW GEM TIME @philnash
24. 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
25. TABLE OF COMPRESSION Results when compressing unmini ed jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zop i 76,352 -71.90% @philnash
26. SMALLER IS ALWAYS BETTER
27. NGINX server { gzip off; gzip_static on; gzip_disable "msie6"; gzip_vary on; } 01. 02. 03. 04. 05. 06. @philnash
28. @philnash
29. BROTLI
30. Accept-Encoding: br @philnash
31. @philnash
32. HTTPS @philnash
33. NEW GEM TIME @philnash
34. 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
35. TABLE OF COMPRESSION Results when compressing unmini ed jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zop i 76,352 -71.90% brotli quality 6 75,302 -72.29% @philnash
37. 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
38. TABLE OF COMPRESSION Results when compressing unmini ed jQuery style bytes % uncompressed 271,751 - gzip default 80,669 -70.32% gzip best 80,268 -70.46% zop i 76,352 -71.90% brotli quality 6 75,302 -72.29% brotli quality 11 66,920 -75.37% @philnash
39. RESULTS @philnash
40. A FIGHT @philnash
41. @philnash
42. “A FIGHT” @philnash
43. TAKEAWAYS @philnash
44. JEKYLL https:/ /github.com/philnash/jekyll-gzip https:/ /github.com/philnash/jekyll-zop i https:/ /github.com/philnash/jekyll-brotli @philnash
45. RAILS https:/ /github.com/miyucy/zop i Rails.application.assets.gzip = :zopfli https:/ /github.com/hansottowirtz/sprockets- exporters_pack @philnash
46. @philnash
47. SMALLER IS ALWAYS BETTER
49. THANKS! @philnash https:/ /philna.sh philnash@twilio.com