pagespeed（GitHub）是 Goolge 為 Apache 和 nginx 開發的前端優化擴展模塊，其中適用 Apache 環境的叫 mod_pagespeed，適用於 nginx 環境的叫 ngx_pagespeed。
pagespeed 的功能包括以下方面：
優化傳輸頻寬（過濾）（壓縮圖片、CSS、JS文件，去除html空白）、降低請求（CSS、JS文件合併、識別並重定向常用JS庫、cache控制）、Domain映射（支持CDN）、提升客戶端體驗（圖片預加載、延遲加載，移動端圖像優化），同時還提供對 https 的支持。
下載 ngx_pagespeed
目前 ngx_pagespeed 最新的版本要求 gcc ≧ 4.8 or clang ≧ 3.3，如果需要安裝最新版請升級 gcc 或 clang
或者繼續使用舊版：1.9.32.14
|
1 |
vi ngx_pagespeed.sh |
把以下內容複製到ngx_pagespeed.sh裡面
|
1 2 3 4 5 6 7 8 9 |
NPS_VERSION=1.9.32.14 cd wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.tar.gz tar -xzvf v${NPS_VERSION}-beta.tar.gz cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/ |
修改ngx_pagespeed.sh檔案權限，變成可執行
|
1 |
chmod 777 ngx_pagespeed.sh |
執行
|
1 |
./ngx_pagespeed.sh |
根目錄會產生ngx_pagespeed-1.9.32.14-beta 資料夾，裡面放了config ngx_pagespeed所需要的檔案
修改 nginx update script
找到
|
1 |
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_spdy_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module ${NginxMAOpt} ${Nginx_Modules_Options} |
把 –add-module=/root/ngx_pagespeed-1.9.32.14-beta 加到最後
修改成
|
1 |
./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_spdy_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module --add-module=/root/ngx_pagespeed-1.9.32.14-beta ${NginxMAOpt} ${Nginx_Modules_Options} |
進行nginx configure
|
1 |
vi /usr/local/nginx/conf/pagespeed.conf |
加入以下指令，然後保存
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
pagespeed on; pagespeed FileCachePath /var/ngx_pagespeed_cache; pagespeed RewriteLevel PassThrough; pagespeed EnableFilters collapse_whitespace; pagespeed EnableFilters canonicalize_javascript_libraries; pagespeed EnableFilters combine_css; pagespeed EnableFilters combine_javascript; pagespeed EnableFilters elide_attributes; pagespeed EnableFilters extend_cache; pagespeed EnableFilters flatten_css_imports; pagespeed CssFlattenMaxBytes 5120; pagespeed EnableFilters lazyload_images; pagespeed EnableFilters rewrite_javascript; pagespeed EnableFilters rewrite_images; pagespeed EnableFilters insert_dns_prefetch; pagespeed EnableFilters prioritize_critical_css; |
然後在修改nginx.conf
|
1 |
vi root /home/wwwroot |
在下方加入
|
1 |
include pagespeed.conf; |
以下是pagespeed.conf內容說明:
# 啟用ngx_pagespeed
pagespeed on;
# 啟用pagespeed cache位置
pagespeed FileCachePath /var/ngx_pagespeed_cache;
pagespeed RewriteLevel PassThrough;
# 啟用壓縮空白過濾器
pagespeed EnableFilters collapse_whitespace;
# 啟用JavaScript庫卸載
pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多個CSS文件合併成一個CSS文件
pagespeed EnableFilters combine_css;
# 把多個JavaScript文件合併成一個JavaScript文件
pagespeed EnableFilters combine_javascript;
# 刪除帶默認屬性的標籤
pagespeed EnableFilters elide_attributes;
# 改善資源的可緩存性
pagespeed EnableFilters extend_cache;
# 更換被導入文件的@import，精簡CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延時加載客戶端看不見的圖片
pagespeed EnableFilters lazyload_images;
# 啟用JavaScript縮小機制
pagespeed EnableFilters rewrite_javascript;
# 啟用圖片優化機制
pagespeed EnableFilters rewrite_images;
# 預解析DNS查詢
pagespeed EnableFilters insert_dns_prefetch;
# 重寫CSS，首先加載渲染頁面的CSS規則
pagespeed EnableFilters prioritize_critical_css;
更多pagespeed 功能說明:
https://modpagespeed.com/doc/config_filters
建立cache文件夾並賦予nginx用戶權限
|
1 2 |
sudo mkdir /var/ngx_pagespeed_cache sudo chown www:www /var/ngx_pagespeed_cache |
建議：添加Cron計畫任務 每5分鐘清除一次緩存 非常建議添加 修改Google PageSpeed的不完美之處
|
1 |
vi /root/pagespeedcache.sh |
加入以下指令，然後保存
|
1 |
rm -r -f /var/ngx_pagespeed_cache |
添加Cron計畫任務
|
1 |
vi /etc/crontab |
加入以下指令，然後保存
|
1 |
*/5 * * * * /root/pagespeedcache.sh |
重新啟動nginx
如何確認ngx_pagespeed是否正常工作
輸入
|
1 |
curl -I website_url |
如果出現pagespeed版本號碼，就表示有成功啟用pagespeed
|
1 2 |
Date: Wed, 11 Jan 2017 06:52:01 GMT X-Page-Speed: 1.9.32.14-0 |
