Nginx效能優化功能- Gzip壓縮(大幅度提高頁面載入速度)

散盡浮華發表於2018-11-26
Nginx優化

 

Nginx開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 檔案在傳輸時進行壓縮，提高訪問速度, 進而優化Nginx效能!  Web網站上的圖片，視訊等其它多媒體檔案以及大檔案，因為壓縮效果不好，所以對於圖片沒有必要支壓縮，如果想要優化，可以圖片的生命週期設定長一點，讓客戶端來快取。 開啟Gzip功能後，Nginx伺服器會根據配置的策略對傳送的內容, 如css、js、xml、html等靜態資源進行壓縮, 使得這些內容大小減少，在使用者接收到返回內容之前對其進行處理，以壓縮後的資料展現給客戶。這樣不僅可以節約大量的出口頻寬，提高傳輸效率，還能提升使用者快的感知體驗, 一舉兩得; 儘管會消耗一定的cpu資源，但是為了給使用者更好的體驗還是值得的。

經過Gzip壓縮後頁面大小可以變為原來的30%甚至更小，這樣，使用者瀏覽頁面的時候速度會快得多。Gzip 的壓縮頁面需要瀏覽器和伺服器雙方都支援，實際上就是伺服器端壓縮，傳到瀏覽器後瀏覽器解壓並解析。瀏覽器那裡不需要我們擔心，因為目前的巨大多數瀏覽器 都支援解析Gzip過的頁面。

Gzip壓縮作用：將響應報⽂傳送⾄客戶端之前可以啟⽤壓縮功能，這能夠有效地節約頻寬，並提⾼響應⾄客戶端的速度。Gzip壓縮可以配置http,server和location模組下。Nginx開啟Gzip壓縮功能的配置如下:

#修改nginx配置檔案 /usr/local/nginx/conf/nginx.conf
[root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf        #將以下配置放到nginx.conf的http{ ... }節點中

#修改配置為
gzip on;                    #開啟gzip壓縮功能
gzip_min_length 10k;         #設定允許壓縮的頁面最小位元組數; 這裡表示如果檔案小於10個位元組，就不用壓縮，因為沒有意義，本來就很小. 
gzip_buffers 4 16k;         #設定壓縮緩衝區大小，此處設定為4個16K記憶體作為壓縮結果流快取
gzip_http_version 1.1;      #壓縮版本
gzip_comp_level 2;   #設定壓縮比率，最小為1，處理速度快，傳輸速度慢；9為最大壓縮比，處理速度慢，傳輸速度快; 這裡表示壓縮級別，可以是0到9中的任一個，級別越高，壓縮就越小，節省了頻寬資源，但同時也消耗CPU資源，所以一般折中為6
gzip types text/css text/xml application/javascript;      #制定壓縮的型別,線上配置時儘可能配置多的壓縮型別!
gzip_disable "MSIE [1-6]\.";       #配置禁用gzip條件，支援正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支援）
gzip vary on;    #選擇支援vary header；改選項可以讓前端的快取伺服器快取經過gzip壓縮的頁面; 這個可以不寫，表示在傳送資料時，給客戶端說明我使用了gzip壓縮

 線上使用的Gzip壓縮配置

[root@external-lb02 ~]# cat /data/nginx/conf/nginx.conf
........
http {
.......
    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;

}

如果不開啟Gzip壓縮功能(即註釋掉Gzip的相關配置), 檢視某個圖片大小

[root@external-lb02 ~]#  ll  -h /data/web//www/test.bmp 
-rw-r--r-- 1 root root 453K 3月  14 18:43 /data/web//www/test.bmp

如下可知, 檔案沒有被壓縮,檔案傳輸大小還是400多K

如果開啟Nginx的Gzip壓縮功能(即開啟Gzip的相關配置), 然後再次訪問test.bmp圖片, 發現壓縮後的該圖片檔案傳輸大小隻有200多K !

通過上面測試對比, 發現Nginx開啟Gzip壓縮功能後, 定義的gzip type的檔案在傳輸時的大小明顯變小, 這樣這會大大提高nginx訪問效能. 

直接用curl測試命令:

[root@fvtlb02 ~]# curl -I -H "Accept-Encoding: gzip, deflate" "http://fvtvfc-web.kevin.com/service-worker.js"
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Mon, 26 Nov 2018 02:19:16 GMT
Content-Type: application/javascript; charset=utf-8
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sun, 25 Nov 2018 22:28:15 GMT
Vary: Accept-Encoding
ETag: W/"5bfb21ff-40be"
Content-Encoding: gzip

如上,response header頭資訊中出現"Conten_Encoding: gzip" , 就說明Nginx已開啟了壓縮 (在瀏覽器訪問, 通過F12看請求的響應頭部 也是一樣)

Nginx的Gzip壓縮功能雖然好用，但是下面兩類檔案資源不太建議啟用此壓縮功能。
1) 圖片型別資源 (還有視訊檔案)
原因：圖片如jpg、png檔案本身就會有壓縮，所以就算開啟gzip後，壓縮前和壓縮後大小沒有多大區別，所以開啟了反而會白白的浪費資源。（可以試試將一張jpg圖片壓縮為zip，觀察大小並沒有多大的變化。雖然zip和gzip演算法不一樣，但是可以看出壓縮圖片的價值並不大）

2) 大檔案資源
原因：會消耗大量的cpu資源，且不一定有明顯的效果。

相關文章