nginx使用pagespeed模塊給靜態文件加速 原

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）移動方面的優化----優化站點移動網絡和設備方面的相關特性 

 

第一步：下載pagespeed nginx模塊

yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel
wget http://linuxsoft.cern.ch/cern/slc6X/x86_64/RPM-GPG-KEY-cern
wget -O /etc/yum.repos.d/slc6-devtoolset.repo http://linuxsoft.cern.ch/cern/devtoolset/slc6-devtoolset.repo
yum install devtoolset-2
PS_NGX_EXTRA_FLAGS="--with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc"
wget https://github.com/apache/incubator-pagespeed-ngx/archive/latest-stable.tar.gz
tar -xvf latest-stable.tar.gz
cd incubator-pagespeed-ngx-latest-stable
psol_url=https://dl.google.com/dl/page-speed/psol/latest-stable.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})

第二步：修改lnmp腳本，安裝或更新nginx

vi include/nginx.sh在23和25行結尾加上，vi include/upgrade_nginx.sh在50和52行結尾加上：

 --add-module=/root/incubator-pagespeed-ngx-latest-stable --with-cc=/opt/rh/devtoolset-2/root/usr/bin/gcc

/root/incubator-pagespeed-ngx-latest-stable該路徑爲pagespeed下載的目錄。

 

第三步：寫pagespeed配置文件

cd /usr/local/nginx/conf/
vi pagespeed.conf
內容
# 啓用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/pagespeed/;
# 禁用CoreFilters
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;
# Example 禁止pagespeed 處理/ipython/目錄 可選
#pagespeed Disallow"*/ipython/*";

第四步：nginx生效：

vi nginx.conf
寫入
include pagespeed.conf;

nginx -t
nginx -s reload

 

注意：如果css、js更新請刪除/tmp/pagespeed/目錄下的文件纔會在服務器生效

nginx模塊下載地址：https://github.com/apache/incubator-pagespeed-ngx/releases

環境依賴包地址：http://linuxsoft.cern.ch/cern/slc6X/x86_64/

環境依賴包地址：http://linux.web.cern.ch/linux/devtoolset/#install

google測試網頁速度的工具：https://developers.google.com/speed/pagespeed/insights/

google測試網頁速度的工具（pwa）：https://developers.google.com/web/tools/lighthouse/

官方安裝教程：https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source

本次安裝參考：http://www.btfw.org/linux/576.html

 

另一個版本的pagespeed.conf

# on 啓用，off 關閉
pagespeed on;
# memcached優化,如果沒有memcached優化請刪去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";
# 重置 http Vary 頭
pagespeed RespectVary on;
# html字符轉小寫
pagespeed LowercaseHtmlNames on;
# 壓縮帶 Cache-Control: no-transform 標記的資源
#pagespeed DisableRewriteOnNoTransform off;
# 相對URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By JaxsonWang";

# 開啓 https
#pagespeed FetchHttps enable;

# 配置服務器緩存位置和自動清除觸發條件（空間大小、時限）
pagespeed FileCachePath "/var/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 過濾規則
pagespeed RewriteLevel PassThrough;
# 過濾WordPress的/wp-admin/目錄(可選配置，可參考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 過濾typecho的/admin/目錄(可選配置，可參考使用)
pagespeed Disallow "*/admin/*";

# 移除不必要的url前綴，開啓可能會導致某些自動加載功能失效
#pagespeed EnableFilters trim_urls;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 註釋
pagespeed EnableFilters remove_comments;
# DNS 預加載
pagespeed EnableFilters insert_dns_prefetch;
# 壓縮CSS
pagespeed EnableFilters rewrite_css;
# 合併CSS
pagespeed EnableFilters combine_css;
# 重寫CSS，優化加載渲染頁面的CSS規則
pagespeed EnableFilters prioritize_critical_css;
# google字體直接寫入html 目的是減少瀏覽器請求和DNS查詢
pagespeed EnableFilters inline_google_font_css;
# 壓縮js
pagespeed EnableFilters rewrite_javascript;
# 合併js
pagespeed EnableFilters combine_javascript;
# 優化內嵌樣式屬性
#pagespeed EnableFilters rewrite_style_attributes;
# 壓縮圖片
#pagespeed EnableFilters rewrite_images;
# 不加載顯示區域以外的圖片
pagespeed LazyloadImagesAfterOnload off;
# 圖片預加載
pagespeed EnableFilters inline_preview_images;
# 移動端圖片自適應重置
pagespeed EnableFilters resize_mobile_images;
# 圖片延遲加載
pagespeed EnableFilters lazyload_images;
# 雪碧圖片，圖標很多的時候很有用
#pagespeed EnableFilters sprite_images;
# 擴展緩存 改善頁面資源的可緩存性
pagespeed EnableFilters extend_cache;

# 不能刪
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; }