Uncategorized, 什麼是?, 工具

Nginx brotli 設定

網頁壓縮技術中 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 vs gzip benchmark
gzip 在壓縮耗時上搖搖領先!

結論:

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-

cloud flare speed optimization
cloudFlare > Speed > Optimization >…
enable cloud flare brotli
捲到頁面下方,將 Brotli 啟用即可!

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 content encoding br(brotli)
content-encoding 確認收到 br

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

chrome devtools network 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

can i use brotli
https://caniuse.com/#feat=brotli

brotli 的優點與缺點

pros:

  • 更高的壓縮率; 代表節省更多的資料傳輸量與時間
  • 壓縮、解壓速度都快! 業界第一!! 😂
  • https only!
    安全第一
    『Brotli Compression Algorithm Enabled on All Servers』
    https://serverpilot.io/blog/brotli-compression-algorithm-enabled-on-all-servers/
    其中 When Will Brotli Be Used? 章節第二段有提到…
    >> The reason only HTTPS is supported is because many network proxies around the world expect HTTP compression to always be gzip, so using other types of compression can cause websites to break. Since HTTPS requests are encrypted and proxies can’t read or modify any of the content, it’s safe to make changes to the compression algorithm used without any risk of breakage by buggy proxies.
    簡單來說,http 就永遠使用 gzip 避免某些網站爛掉
    再來就是 https 是加密傳輸,無法被中途加料、修改所以也比較適合變更壓縮方式

cons:

  • 壓縮率需要更多的 cpu ?!
  • 壓縮耗時比 gzip 多了一些..
    comp_level 設定較高時, 耗時較久
  • 目前使用者不多?! 不曉得有什麼考量!
    粗略看了一下僅 google, cloudFlare 使用
    (cloudFlare 有自己改寫 https://github.com/cloudflare/ngx_brotli_module)
    而 amazon, apple, microsoft 網站仍然是 gzip

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

Leave a Reply