资讯专栏INFORMATION COLUMN

通過gzip和nginx來提高網站打開速度

mindwind / 2999人阅读

摘要:要知道,網站的打開速度取決於瀏覽器打開下載的網頁文件大小。如果傳輸的頁面內容文件減少,那你網站的打開速度一定會加快。特別是手機端的用戶,打開網站速度受限於移動端網絡,所以壓縮網站頁面內容顯得至關重要。

要知道,網站的打開速度取決於瀏覽器打開下載的網頁文件大小。如果傳輸的頁面內容文件減少,那你網站的打開速度一定會加快。特別是手機端的用戶,打開網站速度受限於移動端網絡,所以壓縮網站頁面內容顯得至關重要。

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圖片文件。

應用這些更改之後,設置部分應如下所示:

/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_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很容易配置,而且帶來的速度提升也非常明顯,搜索引擎也非常喜歡這類加載方式,如果想提高搜索引擎的排名,增加gzip是非常有必要的。

來源:投稿。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/118935.html

相关文章

  • 服務器啟用HSTS協議

    摘要:的作用是強制客戶端如瀏覽器使用與服務器創建連接。服務器開啟的方法是,當客戶端通過發出請求時,在服務器返回的超文本傳輸協議響應頭中包含字段。對於服務器,只要在添加這個頭部信息即可。HSTS(HTTP Strict Transport Security)國際互聯網工程組織IETF正在推行一種新的Web安全協議,網站可以選擇使用HSTS策略,來讓瀏覽器強制使用HTTPS與網站進行通信,以減少會話劫...

    supernavy 评论0 收藏0
  • DevOps:持續整合 & 持續交付(Docker、CircleCI、AWS)

    摘要:原文出處持續整合持續交付這篇文章將一步一步介紹如何使用與來完成持續整合與持續交付的開發流程。前言什麼是持續整合持續交付持續整合持續交付,簡稱,具體介紹可以參考山姆鍋對持續整合持續部署持續交付的定義這篇文章。 原文出處:DevOps:持續整合&持續交付(Docker、CircleCI、AWS) showImg(https://segmentfault.com/img/bVlxh...

    Euphoria 评论0 收藏0
  • 【譯】Headless Chrome 入門指南

    摘要:確切位置因平台而異。如果以編程方式使用,這個頁面也是一個強大的調試工具,能看到所有原始的協議命令通過連線,於瀏覽器進行通信。警告協議可以做很多有趣的事,但作為入門選項他令人沮喪。目前,提供了比協議高級別的。 本文翻譯自:Getting Started with Headless Chrome原文更新時間:July 28,2017作者:Eric Bidelman(Engineer @ G...

    toddmark 评论0 收藏0

发表评论

0条评论

mindwind

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<