gzip 壓縮提升網站性能
原文鏈接:https://nginx.rails365.net/chapters/3.html
1.介紹
網站開發到一定程度,可能css文件或js文件會越來越大,因為有可能加載了很多的插件。這個時候如果能把這些文件壓縮一下就好了。
nginx就支持這種功能,它可以把靜態文件壓縮好之後再傳給瀏覽器。瀏覽器也要支持這種功能,只要瀏覽器的請求頭帶上Accept-Encoding: gzip
就可以了。假如有一個文件叫application.css,那nginx就會使用gzip模塊把這個文件壓縮,然後傳給瀏覽器,瀏覽器再解壓縮成原來的css文件,就能讀取了。
所有的這一切都需要nginx已經有編譯過ngx_http_gzip_module
這個模塊。這個模塊能對需要的靜態文件壓縮大小,比如圖片,css,javascript,html等。壓縮是需要消耗CPU,但能提高傳縮的速度,因為傳縮量少了許多,從而節省帶寬。
2. 使用
使用之前先來查看一下是否編譯了ngx_http_gzip_module
這個模塊。
sudo nginx -V
如果輸出--with-ngx_http_gzip_module
,說明已經編譯了。沒有的話,可以參考這篇文章升級centos系統上的nginx來編譯。
要配置nginx的gzip也很簡單。
http { 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; server { location ~ ^/assets/ { gzip_static on; expires max; add_header Cache-Control public; } }}
上面最重要的是http中gzip on;
還有gzip_types
這兩行,是一定要寫的。其他的gzip_vary
等都是一些配置,可以不寫。
然後在需要壓縮的靜態資源那裡加上下面三行。
gzip_static on;expires max;add_header Cache-Control public;
改了配置用sudo nginx -s reload
重新加載生效。
3. 測試
要測試可以使用瀏覽器,比如chrome。
只要用開發者的network功能查看兩次資源的大小就好了。比如:
在壓縮前:
壓縮後:
或者使用curl工具也可以。
~/codes/rails365 (master) $ curl -I -H "Accept-Encoding: gzip" http://www.rails365.net/assets/application-7166fb1597da14300423c6a60c281a45f24573b249eafe0fd84b5c261db1d3a5.jsHTTP/1.1 200 OKServer: nginx/1.8.0Date: Tue, 20 Oct 2015 10:44:52 GMTContent-Type: application/x-javascriptLast-Modified: Tue, 20 Oct 2015 09:36:44 GMTConnection: keep-aliveVary: Accept-EncodingETag: W/"56260b2c-22b41"Expires: Thu, 31 Dec 2037 23:55:55 GMTCache-Control: max-age=315360000Cache-Control: publicContent-Encoding: gzip
只要返回Content-Encoding: gzip
說明成功的。