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中的過濾器。