WordPress 速度調教一樣是 80/20 法則,20% 的設定影響 80% 的成績。只要做對關鍵的事情,就可以快速達到高分。
工作時常常需要看自家公司網站的 Pagespeed,常常看到 0 ~ 40 分的成績,總覺得很遜。
心血來潮看看自己的小部落格究竟可以拿到幾分,那麼小應該很快可以拿到個 80 分吧。
登冷,結果是 42 分!

我記得我用的明明就是號稱 Pagespeed 友善的主題(TheFox),怎麼如此低分。
在公司還可以說可以調整的地方太少,所以拿不到高分。
自己的部落格這麼低分就不能接受,身為工程師這真是種污辱啊。
花了一整天的嘗試,不斷把每個外掛都開開關關交叉測試,終於把分數拉高到四個綠燈都 90 分以上,Gtmetrix A 評分。再次印證了 80/20 法則,20% 的設定影響 80% 的成績。

與你分享我的簡單部落格,靠著 5 個關鍵設定,在一天內從 Pagespeed 不及格改善到四個綠燈都 90 分以上的步驟:
頁面內容 Table of Contents
1. 使用內建字體,不要使用 Google Fonts:PageSpeed 增加 10 分
就算 Google Fonts 看起來很漂亮很酷炫,但從 Google 下載字體是個很慢的過程。會讓你的分數大大降低。
改善辦法是:使用系統內建的字體。可以使用的內建字體為:
- Helvetica Neue 無襯線(推薦使用)
- Helvetica 無襯線
- Arial 無襯線
- Times 襯線字體
- Georgia 襯線字體
直接把字型設定成以上幾種,可以省下許多從 Google 下載字體的流量。可以讓你的 Pagespeed 提高 10 分。

有人會說「不用 Google 字體的話,網站字體會變很醜」我的看法是,各作業系統的使用者都已經看習慣各平台的字體,例如 Mac 標準字、Windows 標準字或 iPhone 標準字。用內建的字體,就是讓使用者看到最熟悉的字體,並不會有什麼突兀感。
2. 用 ShortPixel 壓縮你的圖片:PageSpeed 增加 10 分
這項建議你應該已經聽爛了,上傳圖片前要先壓縮。每次上傳圖片前都要手動壓縮真的是超級麻煩!
這不是懶人應該做的事情,電腦能做的就讓電腦做,幹嘛自己做勒。
所以我推薦你一個 wordpress 外掛,他可以:
- 在你上傳圖片的時候自動幫你壓縮圖片
- 肉眼看不出失真等級的壓縮,可減少 50%~90% 圖片尺寸
- 可以一次把過去文章的圖片全部壓縮(超推薦,懶人必備)
這個外掛叫做 ShortPixel,免費版有每月 100 張圖片的額度可以使用,就算付費也是挺便宜的。
非常推薦,從下載安裝到壓縮所有的圖片,大概只花了 15 分鐘就完成,PageSpeed 分數瞬間提升了 10 分。
讓我省了好多步驟。以後管他什麼圖片大小上傳前要先縮壓的,原圖直接上傳 wordpress,讓 ShortPixel 幫忙處理所有的事情就好。輕鬆愉快!

3. 用 Breeze 壓縮合併 css, js,加上快取:Pagespeed 增加 5 分
主要原理是把會用到的資源檔案打包在一起,讓瀏覽器一次拿回去,就不用分趟拿;然後也跟瀏覽器說,這次拿回去一個禮拜內都不用再來拿,內容都是一樣的。
我的主機是放在 Cloudways,它們有個內建的外掛叫做 Breeze,可以很方便的做到這件事情。把壓縮 CSS、JS,合併 CSS、JS 的勾勾都打勾就行了。

4. 手動設定 GA,不要用 Google Site Kit:PageSpeed 增加 5 分
剛架網站設定 GA 時發現這套件還很開心,Google 官方出的,可以一次設定好 Google Analytics、Search Console。
後來打開 PageSpeed 一看,這東西也太肥了,把我用不到的 Google Ads, GTM 都載入。明明我只需要 GA,一行程式碼就搞定的事情變成這麼肥大。官方出的套件結果拖累官方評分,不要用他。
不用 Google Site Kit,你有三個選擇:
- 很多 SEO 套件內建有追蹤 GA 的設定,例如 RankMath。用其他套件內建的就好,不要另外裝。
- 裝一個迷你版的,推薦 GA Google Analytics。經過實測不會影響速度。
- 工程師選擇:手動把 GA 追蹤碼加入原始碼中
嗯我很懶,所以我選第一種:直接在 RankMath 設定追蹤碼就好。輕鬆愉快~

5. 找個好 SEO 套件:Pagespeed SEO 增加 15 分
一個好的 SEO 套件確實能幫挺多忙,我自己比較完選了看起來比較輕量的 RankMath。
他跟 Yoast 有什麼差別呢?嗯外掛比較小,付費版比較便宜,所以我就選它了。
使用上沒什麼問題,還幫我 Pagespeed SEO 加了不少分,挺棒。

重點整理:Wordpress 改善優化網站速度
拿到 Pagespeed 四個綠燈其實不難,挑個好布景,然後實做以下幾點:
- 使用內建字體,不要用 Google Fonts
- 用 ShortPixel 自動壓縮你的圖片
- 用 Breeze 壓縮 JS、CSS,加上快取
- 手動設定 GA,不要用 Google Site Kit
- 找個好 SEO 套件,我自己用 RankMath
就能拿到四個項目都 90 分以上,GTmetrix A 等級。

至於其它設定都比較不影響分數,就可以等待日後有空再回來慢慢調~