提高頁面加載速度, nginx開啓gzip壓縮

一、問題

部分前端項目引用了大量的css,js以及靜態圖片等資源,在打開頁面的時候這些資源大大降低了頁面加載的速度,接下來介紹通過nginx的gzip對靜態資源進行壓縮，減少帶寬消耗。

 

二、nginx-gzip介紹

  nginx中gzip壓縮功能由ngx_http_gzip_module模塊支持，ngx_http_gzip_module在nginx中默認安裝，但gzip壓縮默認是關閉狀態，需要手動開啓。

開啓nginx gzip壓縮後，網頁、css、js等靜態資源的大小會大大的減少，從而可以節約大量的帶寬，提高傳輸效率，給用戶快的體驗。雖然會消耗cpu資源，但是爲了給用戶更好的體驗是值得的。

 

三、配置說明

    # 開啓gzip壓縮
    gzip  on;

    # 設置允許壓縮的數據最小值爲1k
    gzip_min_length 1k;

    # gzip壓縮比,級別越高壓縮率越大,CPU消耗越大,默認爲1
    gzip_comp_level 3;

    # 設置系統獲取幾個單位的緩存用於存儲gzip的壓縮結果數據流
    gzip_buffers 4 16k;  

    #  默認值: gzip_http_version 1.1，標識只有http協議是1.1版本的纔會開啓壓縮，因爲早期瀏覽器可能存在不支持自解壓功能，會存在用戶看到亂碼的風險
    gzip_http_version 1.1 ; 

    # 默認爲text/html , 可壓縮文件的格式,只有指定格式的文件纔會進行壓縮
    gzip_types text/plain application/javascript  application/x-javascript text/css  application/xml  text/javascript  application/x-httpd-php  image/jpeg image/gif image/png image/x-icon  application/json;

 

四、gizp 配置案例

壓縮前

壓縮後