0元用 SBC 架設自己的 WordPress 網站 #3 速度優化

以目前我使用的 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。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP total cache

Autoptimize

在 JS, CSS & HTML 標籤頁,把 js、css、html 優化全部勾起,這外掛主要會對這三種檔案做壓縮與集中,節省傳輸時間和 request 的次數。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 Autoptimize
0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 Autoptimize

在 Images 標籤頁,把 Lazy-load images 勾選起來,讓圖片延後載入,縮短第一次 render 的時間。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 Autoptimize

Async Javascript

透過這個外掛,修改 html 裡面載入  js 的方式。在畫面中全部勾選 Defer,同時測試看看網頁有沒有問題。如果有問題就逐一改為 Async。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 async javascript
0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 async javascript

簡單解說原理。想像瀏覽器是人類編輯,他會透過閱讀文件(程式碼)來了解內容(顯示網頁)。預設瀏覽器在看 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 分。已經可接受。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 pagespeed
電腦版網頁分數
0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 pagespeed
手機版網頁分數

網頁 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,這樣整體就能正常運作了!

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache

經過實測,本來一個頁面需要 2.73 s,透過 Cloudflare 後只需要 162 ms!加快十倍之多!

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache
和 banana pi 要網頁,費時 2.73s
0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache
透過 Cloudflare cache,只需要 162ms

要判斷頁面有沒有 cache hit 也很簡單。網頁上點右鍵選檢查,切換到 Network 標籤,左下 Name 點選查看的 url,右下再選 Header 標籤(說得好累)。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache

其中檢查  cf-cache-status,如果是 HIT 表示快取成功,如果是 MISS 則失敗,會再去 web server 抓,速度就慢。

0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache
cache miss,速度慢
0元用 SBC 架設自己的 WordPress 網站 #3 速度優化 WP Cloudflare Super Page Cache
cache hit,速度快

不過使用一段時間,發現 WP Cloudflare Super Page Cache 外掛做 preload 的時候有一些缺陷,所以有時候使用者還是會 cache miss 而載入緩慢,下一篇會再分享如何使用 python 搭配 crontab 自己搭建 preload 機制。

延伸閱讀:使用 AWS lambda 做免錢的 Cloudflare cache preload

封面圖片備註

速度!速度!速度與激情(誒搞錯了哦!)

Written by J
雖然大學唸的是生物,但持著興趣與熱情自學,畢業後轉戰硬體工程師,與宅宅工程師們一起過著沒日沒夜的生活,做著台灣最薄的 intel 筆電,要與 macbook air 比拼。 離開後,憑著一股傻勁與朋友創業,再度轉戰軟體工程師,一手扛起前後端、雙平台 app 開發,過程中雖跌跌撞撞,卻也累計不少經驗。 可惜不是那 1% 的成功人士,於是加入其他成功人士的新創公司,專職開發後端。沒想到卻在採前人坑的過程中,拓寬了眼界,得到了深層的領悟。