ngx_pagespeed-nginx前端優化模塊介紹

 

ngx_pagespeed是Nginx的一個擴展模塊，藉助pagespeed,爲Nginx網站服務器提速。主要的功能是針對前端頁面而進行服務器端的優化，對前端設計人員來講，能夠省去優化css、js以及圖片的過程。
ngx_pagespeed對nginx自身負載能力的提高基本是看不到的，甚至會由於進行服務器端的優化而使系統增長負載；但從減小客戶請求數的角度去看，犧牲部分服務器性能仍是值得的。

ngx_pagespeed模塊的主要功能大體有：
1）圖像優化：剝離元數據、動態調整，從新壓縮
2）CSS和JavaScript壓縮、合併、級聯、內聯
3）小資源內聯
4）推遲圖像和JavaScript加載
5）對HTML重寫、壓縮空格、去除註釋等
6）提高緩存週期

做爲Nginx組件，ngx_pagespeed將重寫你的網頁，讓用戶以更快的速度進行訪問。重寫的工做包括壓縮圖片、縮減CSS和JavaScript、擴展緩存時間，一樣還包括其它一些最佳實踐：
1）優化緩存----整合應用程序的數據和邏輯
2）最小化round-trip次數----削減連續的請求/響應週期數
3）最小化請求開銷----削減上傳大小
4）最小化負載大小----削減響應、下載及緩存頁面大小
5）優化瀏覽器渲染----改善瀏覽器頁面佈局
6）移動方面的優化----優化站點移動網絡和設備方面的相關特性

舒適小提示：
ngx_pagespeed環境安裝：模塊是一個開源模塊，功能上與mod_pagespeed（Apache前端加速模塊）相比稍有欠缺。Github上針對ngx_pagespeed Bugs的反饋更新很頻繁，基本上都能很快獲得解決，要是部署在生產環境須要謹慎。
另，系統內GCC版本必須大於4.2。ngx_pagespeed更新頻率較高，建議及時更新到最新版本，並且最好先部署在本地環境中，通過一番測試穩定後再上線生產環境。

PageSpeed旨在縮短網頁加載的時間，減小網站服務器的帶寬使用量。
PageSpeed模塊可使用數量衆多的重寫"過濾器"，每一個過濾器均可以選擇性地開啓/關閉，從而自動進行各類優化（好比，減少文檔大小、減小HTTP請求數據、減小HTTP往返次數以及縮短DNS解析時間）。
下面是ngx_pagespeed支持的其中一些過濾器，想了解支持的所有過濾器，請參閱官方文檔。

1）Collapse Whitespace（壓縮空白）：經過把HTML網頁中的多處連續空白換成一處空白，減小帶寬使用量。
2）Canonicalize JavaScript Libraries（規範化轉換JavaScript庫）：經過自動把流行的JavaScript庫換成免費託管的JavaScript庫（好比由谷歌託管），減小帶寬使用量。
3）Combine CSS（合併CSS）：經過把多個CSS文件合併成一個CSS文件，減小HTTP請求數量。
4）Combine JavaScript（合併JavaScript）：經過把多個JavaScript文件合併成一個JavaScript文件，減小HTTP請求數量。
5）Elide Attributes（省略屬性）：經過刪除由默認屬性指定的標籤，縮小文檔大小。
6）Extend Cache（擴展緩存）：經過優化網頁資源的可緩存性，減小帶寬使用量。
7）Flatten CSS Imports（精簡CSS導入）：經過刪除CSS文件中的@import，減小HTTP請求往返次數。
8）Lazyload Images（延時加載圖片）：延時加載在客戶端瀏覽器上看不見的圖片。
9）Minify JavaScript（縮小JavaScript）：經過縮小JavaScript，減小帶寬使用量。
10）Optimize Images（優化圖片）：經過引入更多的內嵌圖片、壓縮圖片，或者將GIF圖片轉換成PNG圖片，優化圖片分發。
11）Pre-Resolve DNS（預解析DNS）：經過預解析DNS，縮短DNS解析時間。
12）Prioritize Critical CSS（優化加載關鍵CSS規則）：重寫CSS文件，以便首先加載渲染頁面的CSS規則。

與Apache網站服務器不同，Nginx模塊沒法在運行時動態加載，而是必須在編譯時加載。ngx_pagespeed模塊並未內置在隨主要Linux發行版（好比Fedora 19）發佈的Nginx程序包中，因此說想使用Nginx中的PageSpeed，必須利用源代碼來構建Nginx。

ngx_pagespeed環境安裝：（提早yum install gcc-c++ pcre-devel zlib-devel make wget ）
相關包下載地址：https://pan.baidu.com/s/1dFCCleL
提取密碼：h7ku

[root@bastion-IDC ~]# cd /usr/local/src/
[root@bastion-IDC src]# wget https://github.com/pagespeed/ngx_pagespeed/archive/release-1.6.29.5-beta.zip
[root@bastion-IDC src]# unzip release-1.6.29.5-beta.zip 
[root@bastion-IDC src]# cd ngx_pagespeed-release-1.6.29.5-beta/
[root@bastion-IDC ngx_pagespeed-release-1.6.29.5-beta]# wget https://dl.google.com/dl/page-speed/psol/1.6.29.5.tar.gz
[root@bastion-IDC ngx_pagespeed-release-1.6.29.5-beta]# tar -zvxf 1.6.29.5.tar.gz 

而後從新編譯nginx，編譯時跟上--add-module= /usr/local/src/ngx_pagespeed-release-1.6.29.5-beta模塊參數

cd nginx-1.9.7
./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_ssl_module --with-http_flv_module --with-http_stub_status_module --with-http_gzip_static_module --with-pcre --add-module= /usr/local/src/ngx_pagespeed-release-1.6.29.5-beta
make && make install

使用ngx_pagespeed

# mkdir /var/ngx_pagespeed_cache
# chown www.www /var/ngx_pagespeed_cache                         //www是nginx服務啓動用戶
# cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.bak
# vim  /usr/local/nginx/conf/nginx.conf
........
server {
........
# 啓用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# 啓用CoreFilters
pagespeed RewriteLevel CoreFilters;
# 禁用CoreFilters中的某些過濾器 
pagespeed DisableFilters rewrite_images; 
# 選擇性地啓用額外的過濾器
pagespeed EnableFilters local_storage_cache;
pagespeed EnableFilters collapse_whitespace,remove_comments;
pagespeed EnableFilters outline_css;
pagespeed EnableFilters flatten_css_imports;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters outline_javascript;
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters rewrite_css,sprite_images;
pagespeed EnableFilters rewrite_style_attributes;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters convert_meta_tags;
 
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
.......
}
 
# /usr/local/nginx/sbin/nginx -t
# /usr/local/nginx/sbin/nginx

能夠參閱官方文檔CoreFilters中的過濾器。