Save 37% off PRO during our Black Friday Sale! »

Smaller is always better - at RoRo Melb

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
February 28, 2018

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/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

February 28, 2018
Tweet

Transcript

  1. SMALLER IS ALWAYS BETTER

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  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
  40. None
  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

  52. None
  53. THANKS! @philnash https:/ /philna.sh philnash@twilio.com