網頁效能優化開啟Nginx的 gzip 壓縮功能
阿新 • • 發佈:2019-01-04
開啟網站的 gzip 壓縮功能,通常可以高達70%,也就是說,如果你的網頁有30K,壓縮之後就變成9K, 對於大部分網站,顯然可以明顯提高瀏覽速度(注:需要瀏覽器支援)。
nginx
需先編譯gzip模組
編輯 nginx 的配置檔案
vi /etc/nginx/nginx.conf
在 Gzip Settings 中加入如下設定:
##
# Gzip Settings
##
gzipon;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_typestext/plainapplication/x-javascripttext/cssapplication/ xmltext/javascriptapplication/x-httpd-php;
上面新增完成後,通過 CURL或是瀏覽的Network檢查不成功時,就把看到的“Content-Type: image/jpeg” 加在gzip_types進去就可以了。
注意每修改配置檔案,都要重新載入nginx service.
1) gzip
- 語法:gzip on/off
- 預設值:off
- 作用域:http, server, location
- 說明:開啟或者關閉 gzip 模組,這裡使用 on 表示啟動
2) gzip_min_length
- 語法:gzip_min_length length
- 預設值:gzip_min_length 0
- 作用域:http, server, location
- 說明:設定允許壓縮的頁面最小位元組數,頁面位元組數從header頭中的Content-Length中進行獲取。預設值是0,不管頁面多大都壓縮。建議設定成大於1k的位元組數,小於1k可能會越壓越大。|
3) gzip_buffers
- 語法: gzip_buffers number size
- 預設值: gzip_buffers 4 4k/8k
- 作用域: http, server, location
- 說明:設定系統獲取幾個單位的快取用於儲存gzip的壓縮結果資料流。4 16k 代表以 16k 為單位,按照原始資料大小以 16k 為單位的4倍申請記憶體。
4) gzip_comp_level
- 語法: gzip_comp_level 1..9
- 預設值: gzip_comp_level 1
- 作用域: http, server, location
- 說明:gzip壓縮比,1 壓縮比最小處理速度最快,9 壓縮比最大但處理最慢(傳輸快但比較消耗cpu)。這裡設定為 5。
5) gzip_types
- 語法: gzip_types mime-type [mime-type …]
- 預設值: gzip_types text/html
- 作用域: http, server, location
- 說明:匹配MIME型別進行壓縮,(無論是否指定)”text/html” 型別總是會被壓縮的。這裡設定為 text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php。
用curl測試Gzip是否成功開啟
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:13:09 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
X-Powered-By: PHP/5.2.17p1
X-Pingback: http://www.slyar.com/blog/xmlrpc.php
Content-Encoding: gzip
頁面成功壓縮
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/plugins/photonic/include/css/photonic.css"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:21:25 GMT
Content-Type: text/css
Last-Modified: Sun, 26 Aug 2012 15:17:07 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:21:25 GMT
Cache-Control: max-age=43200
Content-Encoding: gzip
css檔案成功壓縮
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-includes/js/jquery/jquery.js"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:21:38 GMT
Content-Type: application/x-javascript
Last-Modified: Thu, 12 Jul 2012 17:42:45 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:21:38 GMT
Cache-Control: max-age=43200
Content-Encoding: gzip
js檔案成功壓縮
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/uploads/2012/08/2012-08-23_203542.png"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:22:45 GMT
Content-Type: image/png
Last-Modified: Thu, 23 Aug 2012 13:50:53 GMT
Connection: keep-alive
Expires: Tue, 25 Sep 2012 18:22:45 GMT
Cache-Control: max-age=2592000
Content-Encoding: gzip
圖片成功壓縮
curl -I -H "Accept-Encoding: gzip, deflate" "http://www.slyar.com/blog/wp-content/plugins/wp-multicollinks/wp-multicollinks.css"
HTTP/1.1 200 OK
Server: nginx/1.0.15
Date: Sun, 26 Aug 2012 18:23:27 GMT
Content-Type: text/css
Content-Length: 180
Last-Modified: Sat, 02 May 2009 08:46:15 GMT
Connection: keep-alive
Expires: Mon, 27 Aug 2012 06:23:27 GMT
Cache-Control: max-age=43200
Accept-Ranges: bytes
最後來個不到1K的檔案,由於我的閾值是1K,所以沒壓縮