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)

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-

cloudFlare > Speed > Optimization >…
捲到頁面下方,將 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 可以看見~

content-encoding 確認收到 br

或 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

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
總之網站一定要記得則一使用,不要白白浪費傳輸頻寬了!

可樂

View Comments

Recent Posts

plain PHP 搭配 Slack 進行錯誤追蹤、回報(Error Tracking、Error Handling)

錯誤追蹤、回報非常重要,看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…

4 years ago

Drone CI/CD 配合 Github 使用 Rsync 進行 Deploy

jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務,各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦,完全 docker 容器化的運行方式讓整個 CI…

4 years ago

本機使用 Docker 容器內 PHP (wrapper/expose PHP)

為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊,因為 dockerize 的關係會將所有相關環境都轉移到…

4 years ago

為什麼你需要密碼管理工具

為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼,工作與生活己經和密碼密不可分! 除了足夠全安的密碼,密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及,APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…

4 years ago

簡單使用 Mysql Partition 優化查詢

mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜,除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理,理論上效率都會變好,本文就水平分割的…

4 years ago

如何 Debug Node APP 配合 Docker 與 VsCode

透過 vscode Debug 利用中斷點 (breakpoints) 讓開發、偵錯更聰明。 加快除錯速度,而不是用傳統的 console log 方式查看變數、物件內容找問題。 本篇教你如何用 vscode + node +…

4 years ago