gzip 壓縮提升網站性能

編程語言 Nginx JavaScript XML 為偉web開發 為偉web開發 2017-09-19

原文鏈接: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功能查看兩次資源的大小就好了。比如:

在壓縮前:

gzip 壓縮提升網站性能

壓縮後:

gzip 壓縮提升網站性能

或者使用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說明成功的。

相關推薦

推薦中...