在 Nginx 中開啟 GZip 壓縮，加快博客加載速度

概述簡單點講，GZip 就是一種壓縮技術。更多技術乾貨親鎖定公眾號"朗妹兒"

在網站和 Web 應用中，如果 Web 服務器端能自動把用戶請求的資源文件用 GZip 壓縮，然後再發送給客戶端，而瀏覽器端又中能自動解壓或者解析經 GZip 壓縮過後的資源文件，那麼就可以有效減少網絡帶寬的消耗，提升傳輸速度，用戶瀏覽網頁的速度就會快很多。

好消息是，現代瀏覽器都支持對 GZip 壓縮過的資源的自動解壓解析。而流行的 Web 服務器也都帶有支持 GZip 壓縮的模塊。比如，Nginx 上就帶有支持 GZip 壓縮 的 ngx_http_gzip_module 模塊，只要在 Nginx 的配置文件中配置開啟 GZip 壓縮，並設置一定參數就可以搞定。

啟用 GZip 壓縮是網站 和 Web 應用性能優化的手段之一。Steve Souders 在《高性能網站建設指南》和《高性能網站建設進階指南》這兩本書裡，已經詳細描述了 GZip 壓縮的原理。有興趣的可以去看看這兩本書。

先測試一下未開啟 GZip 壓縮時網站的訪問速度

先找個網站測速工具，測一下未啟用 GZip 壓縮時的網站訪問速度。當然，如果你對 Chrome Devtools 很熟的話，也可以自己分析。

我用的是卡卡網測速工具。

在未啟用 GZip 壓縮的情況下，我博客首頁的原始網頁大小是 37491 字節，平均打開時間為 5.679 秒。

操作

SSH 登錄到主機，在控制檯下鍵入如下命令，查看 nginx 配置文件路徑：

1. nginx -t

系統顯示配置文件為： /etc/nginx/nginx.conf。

用 VIM 打開配置文件：

1. vim /etc/nginx/nginx.conf

找到 GZip Setting 部分，進行修改：

1. ##

2. # GZip Settings

3. ##

4.

5. # 該指令用於開啟或關閉 GZip 模塊，取值為 on 或 off，設置為 on 就是開啟 GZip 壓縮。

6. GZip on;

7.

8. # IE6 對 GZip 支持不好，不給它玩 GZip。

9. GZip_disable "msie6";

10.

11. # Nginx 作為反向代理的時候啟用。我是用 Nginx 做 NodeJS 的反向代理，開了！

12. GZip_proxied any;

13.

14. # 用於設置 GZip 壓縮比，取值為 1-9，默認是 1。數字越大壓縮的越好，也越佔用CPU時間。我們就取 5 好了。

15. GZip_comp_level 5;

16.

17. # 用於設置啟用 GZip 壓縮的最小文件大小，小於設置值的文件將不會壓縮。默認值是0，不管頁面多大都壓縮。建議設置成大於1k的字節數，小於1k可能會越壓越大。

18. GZip_min_length 1k;

19.

20. # 設置系統獲取幾個單位的緩存用於存儲 GZip 的壓縮結果數據流。16 8k代表以8k為單位，安裝原始數據大小以8k為單位的16倍申請內存。

21. GZip_buffers 16 8k;

22.

23. # 識別http的協議版本(1.0/1.1)

24. GZip_http_version 1.1;

25.

26. # 用於設置進行壓縮的文件類型。我的博客主要是 HTML、CSS、JS 以及圖片

27. GZip_types text/plain text/css application/json application/x-javascript text/javascript text/xml application/xml application/xml+rss image/jpeg image/gif image/png;

:wq 保存並退出 VIM，然後執行如下命令，重啟 Nginx：

1. nginx -s reload

測試

先用 curl 測試一下 GZip 是否成功開啟：

1. curl -I -H "Accept-Encoding: GZip, deflate" "http://www.xiaojichao.com/"

如果輸出最後一行為：

1. Content-Encoding: GZip

則表示 GZip 壓縮成功開啟了。

再用同樣的方法，分別測試一下 JavaScript、CSS、圖像文件是否被壓縮。

看看壓縮效果

最後再到卡卡網上測試一下啟用壓縮的效果。

網頁大小已經被壓縮為 11953 字節，平均打開時間變成了 0.162 秒！

搞定！

閱讀更多 全階魔方 的文章

關鍵字: Nginx Node.js 自動