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

Smaller is always better - at RoRo Sydney

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/

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

May 08, 2018
Tweet

Transcript

  1. SMALLER IS ALWAYS BETTER

  2. None
  3. None
  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
  36. None
  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

  48. None
  49. THANKS! @philnash https:/ /philna.sh philnash@twilio.com