簡介
GZip 是一種改進web應用程序性能的技術,文件壓縮后再傳輸可以減少傳輸數據,提升傳輸速度。在Nginx服務器上開啟Gzip壓縮可以有效減少網絡傳輸流量,提升網站的訪問速度和性能。
可以作用于任何字節流的通用壓縮程序。它會在后臺記憶一些之前看到的內容,并嘗試以高效方式查找并替換重復的數據片段,從而達到較好的壓效果。但使用 gzip 壓縮的最大錯誤之一就是用 gzip 壓縮頁面中的每個資源文件。
支持資源類型
實際上,GZip 主要用于對文本類型的資源進行壓縮,例如常用見的文本資源:
- html 文件:text/HTML(默認壓縮)、Application/xhtml+xml
- css 文件:text/css
- JS 文件:application/x-JAVAscript、application/JavaScript、text/javascript
- JSON文件:application/json、application/geo+json、application/ld+json application/manifest+json、application/x-web-app-manifest+json
- XML 文件:application/xml、application/atom+xml、application/rdf+xml、application/rss+xml
- SVG 文件:image/svg+xml;
GZip 對基于文本的內容的資源壓縮效果最好,在壓縮較大文件時往往可實現高達 70-90% 的壓縮率,而如果對已經通過替代算法壓縮過的資源(例如,大多數圖片格式)運行 gzip,則效果甚微,甚至毫無效果。
瀏覽器支持情況
如圖所示,目前所有主流的現代瀏覽器都支持 gzip 壓縮,如下圖所示:
瀏覽器在發送請求時會自動請求該壓縮編碼的格式,如下圖的請求頭信息所示:
瀏覽器會自動在請求頭(Reqeust header s)信息中添加 Accept-Encoding: gzip 向服務器請求壓縮編碼格式的文件,gzip 壓縮編碼格式就在其中。
啟用GZip
Nginx是否支持 GZip
nginx 中的 gzip 處理模塊是:ngx_http_gzip_module。可以使用:nginx -V 命令,查看 nginx 服務器是否開啟了對 gzip 的支持模塊:
如果顯示如上圖所示的:–with-http_gzip_ static _module,就說明你的nginx服務器已經支持 gzip 了,可以開始配置 gzip 壓縮了。
未開啟GZIP壓縮
模擬網速慢未開啟壓縮。首先我們對nginx進行限速操作,限制每個連接的訪問速度為128K來建立一個比較慢的訪問場景。
修改mall.conf配置文件,進行限速操作
server {
listen 80;
server_name mall.tinywan.com;
limit_rate 128k; # 限制網速為128K
location / {
root /usr/share/nginx/html/mall;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
對mall的前端項目mall.tinywan.com進行訪問,我們可以發現網站中有個js文件比較大,需要加載12s。
Nginx 返回請求頭信息如下
開啟GZIP壓縮
開啟Gzip模塊。在Nginx配置文件中的http塊內添加以下內容:
http {
gzip on;
gzip_types text/plAIn application/javascript;
}
這里的gzip on表示開啟gzip壓縮,gzip_types指定需要進行壓縮的文件類型,例如text/plain表示純文本文件,application/javascript表示JavaScript文件。
完整配置文件
http {
gzip on; #開啟gzip
gzip_disable "msie6"; #IE6不使用gzip
gzip_vary on; #設置為on會在Header里增加 "Vary: Accept-Encoding"
gzip_proxied any; #代理結果數據的壓縮
gzip_comp_level 6; #gzip壓縮比(1~9),越小壓縮效果越差,但是越大處理越慢,所以一般取中間值
gzip_buffers 16 8k; #獲取多少內存用于緩存壓縮結果
gzip_http_version 1.1; #識別http協議的版本
gzip_min_length 1k; #設置允許壓縮的頁面最小字節數,超過1k的文件會被壓縮
gzip_types application/javascript text/css; #對特定的MIME類型生效,js和css文件會被壓縮
include /etc/nginx/conf.d/*.conf;
}
再次對mall的前端項目mall.tinywan.com進行訪問,我們可以發現js文件已經被壓縮,加載時間縮短到3.88s,提速3倍左右:
Nginx返回請求頭中添加了Content-Encoding: gzip的信息
總結
在服務器端 Nginx 啟用 gzip 壓縮,對于目前流行的單頁面應用而言,起到的前端性能優化作用的意義就更大了,因為單頁面應用的界面完全是由 JavaScript 動態繪制出來的,啟用 gzip 壓縮更快速的加載資源文件,特別是 JavaScript 腳本文件,就能盡快地顯示界面,從而提升用戶體驗。
啟用 gzip 壓縮除了優化了頁面的加載速度外,而對于公司來講,啟用 gzip 壓縮后,網站對于網絡帶寬的需求也降低了,或者說是在現有的帶寬情況下,能夠更加充分的利用帶寬資源,從長期效益來看,也可以間接的降低公司在帶寬上的運行成本。