1. 程式人生 > >網頁效能優化開啟Nginx的 gzip 壓縮功能

網頁效能優化開啟Nginx的 gzip 壓縮功能

開啟網站的 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,所以沒壓縮