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)移動方面的優化----優化站點移動網絡和設備方面的相關特性 javascript
第一步:下載pagespeed nginx模塊php
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腳本,安裝或更新nginxcss
vi include/nginx.sh在23和25行結尾加上,vi include/upgrade_nginx.sh在50和52行結尾加上:html
--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下載的目錄。java
第三步:寫pagespeed配置文件node
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生效:python
vi nginx.conf 寫入 include pagespeed.conf; nginx -t nginx -s reload
注意:若是css、js更新請刪除/tmp/pagespeed/目錄下的文件纔會在服務器生效linux
nginx模塊下載地址:https://github.com/apache/incubator-pagespeed-ngx/releasesnginx
環境依賴包地址:http://linuxsoft.cern.ch/cern/slc6X/x86_64/c++
環境依賴包地址: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; }