網頁壓縮技術中 gzip 很好用,deflate 己經過時,但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。
看起來利大於弊有什麼不用他的理由嗎?
簡單從優、缺點來看 brotli!
到底 brotli 布羅特利是什麼、如何設定呢。
目前大多的 web server 都會提供檔案壓縮功能(compression),讓使用者拿到壓縮過的 html, js 或 css,再經由使用者的瀏覽器解壓縮。
.
.
經由別人的圖表瞭解 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
自行手動安裝 (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-
上述 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
瀏覽在發出 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
pros:
cons:
不論是 gzip 或是 brotli
總之網站一定要記得則一使用,不要白白浪費傳輸頻寬了!
錯誤追蹤、回報非常重要,看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…
jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務,各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦,完全 docker 容器化的運行方式讓整個 CI…
為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊,因為 dockerize 的關係會將所有相關環境都轉移到…
為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼,工作與生活己經和密碼密不可分! 除了足夠全安的密碼,密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及,APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…
mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜,除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理,理論上效率都會變好,本文就水平分割的…
透過 vscode Debug 利用中斷點 (breakpoints) 讓開發、偵錯更聰明。 加快除錯速度,而不是用傳統的 console log 方式查看變數、物件內容找問題。 本篇教你如何用 vscode + node +…
View Comments
感謝作者的介紹,另外其實 nginx 官方也有提供模組安裝的 Dockerfile https://github.com/nginxinc/docker-nginx/tree/master/modules
感謝~~~
不過有時候還是要手工硬來 QQ;