Brotli

讓 Nginx 支援 Brotli 壓縮 – 適用 Ubuntu 18.04 及 Ubuntu 20.04

Brotli 是一個基於 LZ77 的無失真壓縮,其壓縮效能及 CPU 使用量上,整體平均來說大勝 gzip,然而 Nginx 官方並沒有支援,但是 Google 出了一個第三方的 module – ngx_brotli,讓 Nginx 可以實現 Brotli 壓縮。

Step 1 – 準備工作

確認 Nginx 版本

nginx -v
nginx version: nginx/1.19.5

安裝相依套件

sudo apt install -y libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev

Step 2 – 下載所需要的原始碼

首先下載 Nginx 原始碼

wget https://nginx.org/download/nginx-1.19.5.tar.gz && tar -zxf nginx-1.19.5.tar.gz && rm  nginx-1.19.5.tar.gz 

下載 ngx_brotli

git clone https://github.com/eustas/ngx_brotli.git && cd ngx_brotli && git submodule update – init

Step 3 – 編譯 ngx_brotli

cd ../nginx-1.19.5/
./configure – with-compat – add-dynamic-module=../ngx_brotli
make modules

更改檔案權限

cd objs/ && chmod 644 *.so

將 modules 複製到 Nginx 的 module 目錄

sudo cp *.so /usr/lib/nginx/modules/

Step 4 – 設定 Nginx

新增 ngx_brotli 的 conf 檔

sudo vim /usr/share/nginx/modules-available/mod-ngx_http_brotli.conf

於檔案內新增下列設定,新增完畢存檔離開。

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

啟用 ngx_http_brotli 的 module

cd /etc/nginx/modules-enabled
sudo ln -s /usr/share/nginx/modules-available/mod-ngx_http_brotli.conf ./50-mod-ngx_http_brotli.conf
sudo vim /etc/nginx/nginx.conf

在 gzip 段落下面新增下列參數,如下圖:

##
# brotli
##
brotli on;
brotli_comp_level 5;
brotli_static on;
brotli_types text/css text/xml text/javascript application/json application/javascript application/x-javascript application/xml application/xml+rss application/xhtml+xml application/x-font-ttf font/opentype image/svg+xml image/x-icon application/font-woff text/plain;

重新啟動 Nginx

sudo service nginx restart

Step 5 – 驗收

可以看到支援的 MIME Type 都已經 br 壓縮了。

網站測試工具

看載入網站 Waterfall View 的小幫手

除了看 Waterfall 之外,也可以知道 render block 卡在哪邊

https://webpagetest.org/

SSL Server Test by SSL Server Test (Powered by Qualys SSL Labs)

https://www.ssllabs.com/ssltest/index.html

Gzip, Brotli 壓縮測試網站

https://www.giftofspeed.com/gzip-test/

測試網站 http2 功能

https://gf.dev/http2-test

SSL/TLS Vulnerability & Configuration Scanner

https://gf.dev/tls-scanner

Header 檢查工具

https://gf.dev/http-headers-test

HTTP/2 Test

https://gf.dev/http2-test

FTTB test

https://gf.dev/ttfb-test

Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

GTmetrix

https://gtmetrix.com/
回到頂端