
Ngx_Pagespeed模塊簡介
Ngx_PageSpeed是Nginx的一個擴展模塊,主要的功能是針對前端頁面而進行服務(wù)器端的優(yōu)化,對前端設(shè)計人員來說,可以省去優(yōu)化css、js以及圖片的過程。
Ngx_PageSpeed對Nginx自身負載能力的提升基本是看不到的,甚至?xí)驗檫M行服務(wù)器端的優(yōu)化而使系統(tǒng)增加負載;
但從減少客戶請求數(shù)的角度去看,犧牲部分服務(wù)器性能還是值得的。
Ngx_PageSpeed模塊的主要功能
圖像優(yōu)化:剝離元數(shù)據(jù)、動態(tài)調(diào)整,重新壓縮
CSS和JavaScript壓縮、合并、級聯(lián)、內(nèi)聯(lián)
小資源內(nèi)聯(lián)
推遲圖像和JavaScript加載
對HTML重寫、壓縮空格、去除注釋等
提升緩存周期
Ngx_PageSpeed模塊的安裝
實驗環(huán)境為: 系統(tǒng): Debian8 64位 管理面板: 寶塔5.9免費版 環(huán)境: nginx 1.14 編譯安裝。
項目地址:Github
首先要說明的是pagespeed官網(wǎng)提供全自動安裝,但并不適合各種一鍵環(huán)境,所以只能采用手動安裝。
在實驗環(huán)境下通過了編譯,可以通過下面一行命令進行調(diào)用:
wget https://github.com/madlifer/ngx_pagespeed_auto/releases/download/v0.0.1/nps-auto.sh && bash nps-auto.sh
腳本來源參考了模塊官網(wǎng),腳本命令參考了Linpx,ZhangGe,腳本流程參考了nanqinlang,但由于自身shell水平不行,腳本里仍然還是 full of trash. 強烈不建議用于生產(chǎn)環(huán)境。
給網(wǎng)站配置該模塊
將下面的命令粘貼于 網(wǎng)站-域名-配置文檔- 域名下方 并保存 即可啟用
# 啟用ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;
# 禁用CoreFilters
pagespeed RewriteLevel PassThrough;
# 啟用壓縮空白過濾器
pagespeed EnableFilters collapse_whitespace;
# 啟用JavaScript庫卸載
pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墻,并不確定這個設(shè)置有沒有副作用
# 把多個CSS文件合并成一個CSS文件
pagespeed EnableFilters combine_css;
# 把多個JavaScript文件合并成一個JavaScript文件
pagespeed EnableFilters combine_javascript;
# 刪除帶默認屬性的標(biāo)簽
pagespeed EnableFilters elide_attributes;
# 改善資源的可緩存性
pagespeed EnableFilters extend_cache;
# 更換被導(dǎo)入文件的@import,精簡CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 延時加載客戶端看不見的圖片
pagespeed EnableFilters lazyload_images;
# 啟用JavaScript縮小機制
pagespeed EnableFilters rewrite_javascript;
# 啟用圖片優(yōu)化機制
pagespeed EnableFilters rewrite_images;
# 預(yù)解析DNS查詢
pagespeed EnableFilters insert_dns_prefetch;
# 重寫CSS,首先加載渲染頁面的CSS規(guī)則
pagespeed EnableFilters prioritize_critical_css;
# Example 禁止pagespeed 處理/wp-admin/目錄(可選配置,可參考使用)
測試效果
打開網(wǎng)頁看源碼,刷新下,看看有沒有什么變化。

隨便搜索下 pagespeed,可以發(fā)現(xiàn)源碼大部分都已經(jīng)被替換了,可以看到確實是生效了。