Nginx伺服器開啟pagespeed加速的教程

上周有一個站長問到我一個問題，問fastcgi_cache和pagespeed加速有沒有衝突。略微想了下，2個都是比較原生的主，應該不存在相容問題。
至於這個朋友問到這2個機制處理的先後問題，我思考了下。既然fastcgi_cache已經是緩衝到本地的檔案，那麼pagespeed肯定是後處理的。通俗來說，就是當使用者訪問WEB時，Nginx 應該是先調用 fastcgi緩衝，然後再進行pagespeed最佳化處理，最後返回資料給使用者。
當然，經過我最後的測試，也證實了我的猜測是正確的。

一、還能再快

 

張戈部落格已經很快了，然而並沒有什麼L用，該抄襲的抄襲，模仿的模仿，關鍵詞和流量都碎了一地。在這個互連網時代，張戈溫馨提示一下，有什麼好的創意或賺錢方法，絕逼不要透漏。唯有悶聲發大財才是王道，因為這是一個沒有道義、不講章法的混亂時代！案例就不貼了，看到張戈部落格某篇部落格排名好，指數高，各種模仿，那標題擬的和張戈部落格親生似的。某度也是一個大煞筆，什麼垃圾辨識度，不識原創為何物，真是無力吐槽！好久沒在文章中吐槽了，真是憋著荒！
回到文章，分享還得繼續...
印象中張戈部落格從51CTO轉載過一篇pagespeed相關文章，但是一直也沒去嘗試一下。搜尋一下發現是2年前的教程：
藉助PageSpeed,為Nginx網站伺服器提速
這次正好周末有空，就果斷重新編譯了一下Nginx，測試了一把 pagespeed。最終還是不負眾望，效果比較滿意。如果想網站速度更進一步，可以跟著本文走一遍。

二、重新編譯

 

大夥大概也發現了，編譯nginx 是折騰它的基本功，如果你還不會，那就看下張戈部落格以前分享的文章，學好這個基本功再來玩：
Nginx線上服務狀態下平滑升級或新增模組的詳細操作記錄
一般來說新增編譯一個模組，只要提供這個模組的下載地址，編譯應該就沒多大問題了。
本文模組下載及編譯參考：

#進入 nginx 源碼同級目錄，比如在 /usr/local/src #下載模組wget -O ngx_pagespeed-release-1.9.32.6-beta.tar.gz https://codeload.github.com/pagespeed/ngx_pagespeed/tar.gz/release-1.9.32.6-beta #解壓tar zxvf  ngx_pagespeed-release-1.9.32.6-beta.tar.gz #下載psol最佳化庫cd ngx_pagespeed-release-1.9.32.6-betawget https://dl.google.com/dl/page-speed/psol/1.9.32.6.tar.gz #解壓psoltar zxvf 1.9.32.6.tar.gz #查看現有nginx的編譯參數/usr/local/nginx/sbin/nginx -V #重新編譯nginx，新增pagespeed模組cd /usr/local/src/nginx-1.60./configure  --add-module=../ngx_pagespeed-release-1.9.32.6-beta 後面接上上一步查詢到的參數 #再往後make 和 make upgrade 就不多說了，之前張戈部落格都已經分享過了

三、修改配置

 

編輯網站的nginx設定檔，比如 zhangge.net.conf，在server模組裡面加入如下代碼：

#如果不知道加到哪，可以加入到 root /home/wwwroot/yourdomain.com; 的後面即可# 啟用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; #Google被牆，並不確定這個設定有沒有副作用 # 把多個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 處理/wp-admin/目錄(可選配置，可參考使用)pagespeed Disallow "*/wp-admin/*";然後，新增快取檔案夾：mkdir -p /tmp/cache/ngx_pagespeed_cache

最後，重啟Nginx即可生效（實測發現這個模組的修改必須重啟nginx，reload是無效的...），發現很多朋友不知道如何重啟nginx，然後看到要重啟就把伺服器重啟了下，雖然也可以，但是也太暴力了點吧？
通過工具安裝nginx，一般都帶有service控制，可以使用如下命令重啟nginx

service nginx restart或/etc/init.d/nginx restart實在沒有，也可以先kill掉，再啟動：Shell#無情殺死pkill -9 nginx #重新救活/usr/local/nginx/sbin/nginx

Ps：那些用面板的朋友可別說不是這個路徑啥的， 誰要你用面板。。。這也是面板蛋疼的一點，路徑個性不一，自己擼去吧。\

四、測試效果\

①、看源碼

好了，重啟Nginx後，咱們重新整理一下前台，隨便搜尋下 pagespeed，可以發現源碼大部分都已經被替換了：

如圖，絕大部分js、css的url都變了，被合并成了一個url。

體積小點的圖片，比如表情，被轉成了瀏覽器編碼的形式，算是減少伺服器請求的一種最佳化：

看起來最佳化後，html代碼變多了很多，於是下載看了下：

果然， 同一個頁面開啟後，大了20多k！尼瑪，要是其他地方沒有大的改善，這絕逼有點嚇人了，於是繼續看看。

②、看圖片

接著，看了下文章縮圖，發現還能壓縮圖片體積：

比如未啟用pagespeed之前的圖片大小【圖片地址】：

開啟後：【圖片地址】

尼瑪，十多倍的差異，讓我有點不信邪。於是下載到電腦看下：

這下差異確實小了點，大概2倍多。但是，後者本是WebP格式，也就是Google（google）開發的一種旨在加快圖片載入速度的圖片格式。我下載到本地後會自動轉成了jpge格式，體積肯定是有所變化！總的來說，這壓縮效果真的很明顯！不過經過我多次驗證，發現並非所有圖片都有這個效果，估計和原本圖片的壓縮程度有關係。

③、工具測

光靠肉眼，有點無力。pagespeed 主要用來加快瀏覽器的渲染載入，所以我決定用下阿里測分析下加速前後的區別。

最佳化前的測試報告：

報告地址：http://www.alibench.com/rp/f9a4c1a8ddd267e0897613501dd2b422

最佳化後的測試報告：

報告地址：http://www.alibench.com/rp/17778d646ca7133609cc348b77096f37

點開一下載入詳情對比了下：

最佳化前：

最佳化後：

效果還是很明顯的，感興趣的可以自己點開報告地址，查看更詳細的對比！當然也推薦喜歡折騰的朋友嘗試一下開啟 Nginx 伺服器 pagespeed加速！如果是 Apache 伺服器，可以整合 mod_pagespeed，感興趣的自己去找資料折騰吧！

最新補充：張戈部落格體驗了幾天，發現一個問題：啟用這玩意之後，CPU佔用會比較高，Nginx 經常100%，雖然存在靜態緩衝，但是網站後台偶爾會比較卡，暫時已取消這個功能。所以對於使用單核CPU的雲端服務器就不建議折騰這個玩意了

 

原文來自:http://zhangge.net/5063.html