ngx_pagespeed-nginx前端優化模組介紹

散盡浮華發表於2017-02-21
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中的過濾器。

相關文章