以目前我使用的 banana pi m2 plus，老實說跑 php 效能不怎樣，一個頁面可能要花個 1 ~ 2 秒才能 render 出來。外加 WordPress 的垢病就是對 SEO 沒有做預設優化。如何在先天不足的情況下去優化他是一個極大的挑戰，就讓我們一步步試試吧！
SEO 優化
首先從基本的 SEO 下去優化。Wordpress 基本上不外乎裝外掛，這邊推薦幾個必裝外掛，也會一一說明。
WP total cache
這個外掛蠻猛，包含了 CDN 設定、Page cache、Object cache、Browser cache、html js css minify 等等。功能設定繁多，這邊分享我的設定。
在 General setting 部分，啟用 Object cache 和 Browser cache。
Autoptimize
在 JS, CSS & HTML 標籤頁，把 js、css、html 優化全部勾起，這外掛主要會對這三種檔案做壓縮與集中，節省傳輸時間和 request 的次數。
在 Images 標籤頁，把 Lazy-load images 勾選起來，讓圖片延後載入，縮短第一次 render 的時間。
Async Javascript
透過這個外掛，修改 html 裡面載入 js 的方式。在畫面中全部勾選 Defer，同時測試看看網頁有沒有問題。如果有問題就逐一改為 Async。
簡單解說原理。想像瀏覽器是人類編輯，他會透過閱讀文件（程式碼）來了解內容（顯示網頁）。預設瀏覽器在看 html 文件的時候，會逐一讀取裡面的內容，發現如果裡面引用 js 文件，就會停止閱讀，先去抓 js。抓好先把 js 看完，再回頭從剛剛中斷的 html 文件繼續讀，如此重複直到 html 讀完。如果過程中不斷的被 js 中斷，讀完整份文件的時間就會很長！
async 的概念是，一但他發現 html 引用 js 文件，他會請小弟去幫忙抓，自己則繼續閱讀。一但小弟抓好了，他則會中斷目前的閱讀，先讀 js 文件，讀完再回頭繼續。叫小弟幫忙的招數已經讓整份讀完的時間下降不少。
defer 的概念是，一但他發現 html 引用 js 文件，一樣會請小弟去抓，但他跟小弟說，等我看完整份 html 再給我。後續閱讀過程中如果又遇到引用，也是丟給小弟去做。等到整份 html 文件都看完，才來讀 js 文件。用這個方式閱讀 html 速度會是最快的！
但用 defer 的缺點是，如果某些網頁顯示依賴於 js 就有可能出問題。所以我們先從 defer 開始測試，有問題再開回去 async。
成果
透過這些手法，首頁原來在 PageSpeed mobile 分數非常差（忘記截圖了），現在首頁則來到 75 分。電腦版來到 92 分。已經可接受。
網頁 render 優化
因為目標是零元建置，所以只能使用手上舊的 SBC 來做 server，效能肯定是拉不上去，只能透過 cache 這個手法。這邊我透過 Cloudflare（免費版） 和 WP Cloudflare Super Page Cache 外掛來達成。
概念是，透過這個外掛，監測如果有頁面更新，自動對 Cloudflare 做 preload，並且讓 Cloudflare 做 total cache。也就是整份 html、js、css 都 cache 起來。一但使用者發出要求，如果 cache hit 會由 Cloudflare 回應，而不是透過貧弱的 SBC 回應。
因為外掛需要對 Cloudflare 做設定，所以安裝完外掛後，依照外掛頁面引導依序去 Cloudflare 取得 api key，這樣整體就能正常運作了！
經過實測，本來一個頁面需要 2.73 s，透過 Cloudflare 後只需要 162 ms！加快十倍之多！
要判斷頁面有沒有 cache hit 也很簡單。網頁上點右鍵選檢查，切換到 Network 標籤，左下 Name 點選查看的 url，右下再選 Header 標籤（說得好累）。
其中檢查 cf-cache-status，如果是 HIT 表示快取成功，如果是 MISS 則失敗，會再去 web server 抓，速度就慢。
不過使用一段時間，發現 WP Cloudflare Super Page Cache 外掛做 preload 的時候有一些缺陷，所以有時候使用者還是會 cache miss 而載入緩慢，下一篇會再分享如何使用 python 搭配 crontab 自己搭建 preload 機制。
延伸閱讀：使用 AWS lambda 做免錢的 Cloudflare cache preload
封面圖片備註
速度！速度！速度與激情（誒搞錯了哦！）
