天天看點
傳回

如何通過gzip和nginx來提高網站打開速度及整體性能

要知道，網站的打開速度取決于浏覽器打開下載下傳的網頁檔案大小。如果傳輸的頁面内容檔案減少，那你網站的打開速度一定會加快。特别是手機端的使用者，打開網站速度受限于移動端網絡，是以壓縮網站頁面内容顯得至關重要。

gzip是一種非常流行的資料壓縮方式。你可以在nginx配置中開啟gzip來壓縮網頁檔案。然後，這些檔案又由浏覽器解壓縮，檔案不會受任何。但是壓縮檔案是會占用伺服器資源，是以最好壓縮那些效果比較好的檔案。比如文本檔案壓縮效果非常好，通常會縮小兩倍多。而JPG或PNG這類檔案，本身就已經進行格式壓縮，是以再做二次壓縮，效果并不是特别明顯。

本文主要講一下如何配置nginx來開啟gzip壓縮。

環境

  • ubuntu 20.04伺服器
  • root權限或具有sudo特權的非root使用者

一、建立測試檔案

在這一步中，我們将在預設的Nginx目錄中建立幾個測試檔案。稍後我們将使用這些檔案來檢查Nginx的預設行為是否進行

gzip

壓縮，并測試配置更改是否具有預期的效果。

首先，建立幾個測試檔案，這些檔案主要用來檢視我們的gzip壓縮效果。gzip是不會分析檔案内容的，它主要通過檔案擴充名來判斷檔案類型，如果還分析檔案内容，那整個效率就會大大降低。是以我們可以建立一些圖像檔案、html檔案和一些樣式檔案。

sudo truncate -s 1k /var/www/html/test.html
sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

下一步是檢查Nginx在使用我們剛建立的檔案在全新安裝中壓縮請求的檔案時的行為。

二、指令方式檢視壓縮效果

使用curl指令方式，添加标頭Accept-Encoding: gzip，來檢視各檔案的壓縮結果。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

可以看到以下結果：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

在最後一行，出現

Content-Encoding: gzip

字樣。說明伺服器正在用gzip壓縮來發送檔案。預設情況下，nginx僅壓縮html檔案。所有在這個指令中可以看到檔案做了壓縮處理。但其它的檔案格式，并未做壓縮處理。

可以通過下面這條指令來驗證我們剛才的說法。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

再看一下結果，和之前的有所不同：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:05:49 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

輸出結果中沒有出現

Content-Encoding: gzip

，這意味着該檔案并沒有做任何的壓縮。

你也可以使用這個方法來測試css等樣式檔案。

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

結果一樣，沒有出現Content-Encoding: gzip

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:06:04 GMT
Content-Type: text/css
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

三、配置Nginx開啟gzip功能

本節主要操作相關配置，讓gzip可以處理其它幾種檔案格式的壓縮。

你可以使用nano或vim編輯nginx的配置檔案。

sudo nano /etc/nginx/nginx.conf

找到

gzip

設定部分，如下所示：

/etc/nginx/nginx.conf

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";


# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

因為我們用的是ubuntu 20.04。是以預設情況下，gzip是開啟的。但有些設定無效，是以我們需要做一些修改：

  • 通過取消注釋行前面的#來啟用其他設定（即，删除

    #

     符号）
  • 添加

    gzip_min_length 256;

     參數，該參數是告訴nginx，不要去壓縮小于256位元組的檔案，因為很小的檔案沒有太必要。壓縮這類檔案反而影響伺服器效率。
  • 在

    gzip_types

     參數中添加其他檔案類型擴充名，這些檔案類型可以是Web字型，圖檔、XML、JSON結構化資料或SVG圖檔檔案。

應用這些更改之後，設定部分應如下所示：

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";


gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types
  application/atom+xml
  application/geo+json
  application/javascript
  application/x-javascript
  application/json
  application/ld+json
  application/manifest+json
  application/rdf+xml
  application/rss+xml
  application/xhtml+xml
  application/xml
  font/eot
  font/otf
  font/ttf
  image/svg+xml
  text/css
  text/javascript
  text/plain
  text/xml;
. . .

儲存并關閉檔案以退出。要啟用新配置，需要重新啟動Nginx：

sudo systemctl restart nginx

四、確定所有的配置正确

重複之前的測試步驟，執行相應的指令請求：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

因為html檔案，之前已經預設開啟壓縮，是以這個指令執行結果保持不變：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:04:25 GMT
Content-Type: text/html
Last-Modified: Tue, 09 Feb 2021 19:03:41 GMT
Connection: keep-alive
ETag: W/"6022dc8d-400"
Content-Encoding: gzip

然後我們來測試一下之前未壓縮的css樣式表，看看結果會有什麼變化：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

可以看到

gzip

正在壓縮檔案：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:21:54 GMT
Content-Type: text/css
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"6022dc91-400"
Content-Encoding: gzip

我們可以用相同的方式測試一下jpg檔案：

curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

沒有看到

gzip

壓縮：

Output
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Tue, 09 Feb 2021 19:25:40 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Tue, 09 Feb 2021 19:03:45 GMT
Connection: keep-alive
ETag: "6022dc91-400"
Accept-Ranges: bytes

因為在之前的配置中，我們并沒有添加 image/jpeg。

在這種情況下，我們已經在Nginx中成功配置了gzip。

結論

可以看出，gzip很容易配置，而且帶來的速度提升也非常明顯，我在自己的網站www.academicphd.com都添加了這類參數。

如何通過gzip和nginx來提高網站打開速度及整體性能
nginx
上一篇: seo網站圖檔如何優化
下一篇: 提高網站的優化率

繼續閱讀