網頁壓縮技術中 gzip 很好用，deflate 己經過時，但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。
看起來利大於弊有什麼不用他的理由嗎?
簡單從優、缺點來看 brotli!
到底 brotli 布羅特利是什麼、如何設定呢。

目前大多的 web server 都會提供檔案壓縮功能(compression)，讓使用者拿到壓縮過的 html, js 或 css，再經由使用者的瀏覽器解壓縮。
.
.

gzip 與 brotli 效能比較

經由別人的圖表瞭解 XD

參考來源~
『Compression Benchmarks: brotli, gzip, xz, bz2』
https://www.opencpu.org/posts/brotli-benchmarks/ (November 27, 2015)

『Speed up website by compression!』
https://www.iiwnz.com/improve-website-speed-by-compression/ (10 JUN 2019)

結論:

brotli 壓縮率比 gzip 還要高(檔案更小)
但是壓縮時間比 gzip 略長 (Concurrency 低時還沒感覺)

所以這樣的壓縮演算法，使用上比較偏向用在變動較少的檔案
因為壓縮一次建立 cache 後，整體就能優於 gzip
但如果頁面變動較頻繁，還是適合使用 gzip

如何使用、安裝 brotli?

自行手動安裝 (command line / bash)
https://github.com/google/ngx_brotli

使用 docker 安裝，個人推薦 (快又有效)
https://github.com/fholzer/docker-nginx-brotli

如果你是 cloudFlare 的使用者，那就更棒了
一個開關搞定。
https://support.cloudflare.com/hc/en-us/articles/200168396-What-will-Cloudflare-compress-

Nginx conf 啟用 brotli

上述 brotli module 安裝好之後，需要在 nginx conf 裡啟用並設定其壓縮比~

http {

  . 
  .
  .

    brotli on;

    # 預設為 6, 0 ~ 11; 值愈大壓縮率愈高，使用的 CPU 愈多~
    brotli_comp_level 6;
    brotli_static on;

    # 壓縮對像
    brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;

  .
  .
  .

}

更多可用參數~
https://github.com/google/ngx_brotli#configuration-directives

驗證 brotli 是否啟用

瀏覽在發出 request 時指定可接收~
br 為 brotli 縮寫

Accept-Encoding: br

一般情況為下，
br 不支援會向相容至 gzip, deflate

Accept-Encoding: gzip, deflate, br

當然~ 也可以在 chrome devtools network > response header 可以看見~

或 chrome devtools network 打開`user large request rows`
看到壓縮前、後的檔案差異

https chrome, firefox~

手動指令測試

Hardcore 一點的人，可以自己用指令試試~ 😎

curl -s -I -H 'Accept-Encoding: br,gzip,deflate' https://your-domain/your-path

支援度

從 can i use 看來，瀏覽器們的支援度是 ok 的
就算不支援 (ie11)，一般來說也會沿用 gzip

brotli 的優點與缺點

pros:

cons:

不論是 gzip 或是 brotli
總之網站一定要記得則一使用，不要白白浪費傳輸頻寬了!