WordPress 懶人版速度改善優化,6 個步驟拿到 Pagespeed 全綠燈

14 mins read

WordPress 速度調教一樣是 80/20 法則,20% 的設定影響 80% 的成績。只要做對關鍵的事情,就可以快速達到高分。

工作時常常需要看自家公司網站的 Pagespeed,常常看到 0 ~ 40 分的成績,總覺得很遜。

心血來潮看看自己的小部落格究竟可以拿到幾分,那麼小應該很快可以拿到個 80 分吧。

登冷,結果是 42 分!

pug covered with blanket on bedspread
WordPress 網站速度很慢怎麼辦?怎麼優化勒?

我記得我用的明明就是號稱 Pagespeed 友善的主題(TheFox),怎麼如此低分。

在公司還可以說可以調整的地方太少,所以拿不到高分。

自己的部落格這麼低分就不能接受,身為工程師這真是種污辱啊

 

花了一整天的嘗試,不斷把每個外掛都開開關關交叉測試,終於把分數拉高到四個綠燈都 90 分以上,Gtmetrix A 評分。再次印證了 80/20 法則,20% 的設定影響 80% 的成績

截圖 2021 08 07 上午10.33.56
WordPress 速度改善優化結果:四個綠燈!

 

與你分享我的簡單部落格,靠著 5 個關鍵設定,在一天內從 Pagespeed 不及格改善到四個綠燈都 90 分以上的步驟:

1. 使用內建字體,不要使用 Google Fonts:PageSpeed 增加 10 分

就算 Google Fonts 看起來很漂亮很酷炫,但從 Google 下載字體是個很慢的過程。會讓你的分數大大降低。

改善辦法是:使用系統內建的字體。可以使用的內建字體為:

  • Helvetica Neue 無襯線(推薦使用)
  • Helvetica 無襯線
  • Arial 無襯線
  • Times 襯線字體
  • Georgia 襯線字體

直接把字型設定成以上幾種,可以省下許多從 Google 下載字體的流量。可以讓你的 Pagespeed 提高 10 分。

圖片
載入一個 Google Font,實際上會載入超多小檔案。拖慢你的網站評分。

 

有人會說「不用 Google 字體的話,網站字體會變很醜」我的看法是,各作業系統的使用者都已經看習慣各平台的字體,例如 Mac 標準字、Windows 標準字或 iPhone 標準字。用內建的字體,就是讓使用者看到最熟悉的字體,並不會有什麼突兀感。

 

2. 用 ShortPixel 壓縮你的圖片:PageSpeed 增加 10 分

這項建議你應該已經聽爛了,上傳圖片前要先壓縮。每次上傳圖片前都要手動壓縮真的是超級麻煩!

這不是懶人應該做的事情,電腦能做的就讓電腦做,幹嘛自己做勒。

 

所以我推薦你一個 wordpress 外掛,他可以:

  • 在你上傳圖片的時候自動幫你壓縮圖片
  • 肉眼看不出失真等級的壓縮,可減少 50%~90% 圖片尺寸
  • 可以一次把過去文章的圖片全部壓縮(超推薦,懶人必備)

這個外掛叫做 ShortPixel,免費版有每月 100 張圖片的額度可以使用,就算付費也是挺便宜的。

非常推薦,從下載安裝到壓縮所有的圖片,大概只花了 15 分鐘就完成,PageSpeed 分數瞬間提升了 10 分。

讓我省了好多步驟。以後管他什麼圖片大小上傳前要先縮壓的,原圖直接上傳 wordpress,讓 ShortPixel 幫忙處理所有的事情就好。輕鬆愉快!

截圖 2021 08 07 下午2.20.52
ShortPixe 驚人的壓縮率以及上傳自動壓縮,從此我都沒在擔心檔案大小問題。交給它就好。

 

 

3. 用 Breeze 壓縮合併 css, js,加上快取:Pagespeed 增加 5 分

主要原理是把會用到的資源檔案打包在一起,讓瀏覽器一次拿回去,就不用分趟拿;然後也跟瀏覽器說,這次拿回去一個禮拜內都不用再來拿,內容都是一樣的。

我的主機是放在 Cloudways,它們有個內建的外掛叫做 Breeze,可以很方便的做到這件事情。把壓縮 CSS、JS,合併 CSS、JS 的勾勾都打勾就行了。

Cloudways Breeze 已經有做好最小化和快取,用他們的就好
Cloudways Breeze 已經有做好最小化和快取,貢獻不少 WordPress 速度優化

 

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 設定追蹤碼就好。輕鬆愉快~

截圖 2021 08 07 下午2.38.45
Google Site Kit 看起來很美,但實在是太胖了。Google PageSpeed 不喜歡它。千萬不要用啊~

 

5. 找個好 SEO 套件:Pagespeed SEO 增加 15 分

一個好的 SEO 套件確實能幫挺多忙,我自己比較完選了看起來比較輕量的 RankMath

他跟 Yoast 有什麼差別呢?嗯外掛比較小,付費版比較便宜,所以我就選它了。

使用上沒什麼問題,還幫我 Pagespeed SEO 加了不少分,挺棒。

rank math modules page
RankMath 可以一次解決不少問題,而且不會拖慢 WordPress 網站速度。用到現在還挺滿意的。

 

重點整理:Wordpress 改善優化網站速度

拿到 Pagespeed 四個綠燈其實不難,挑個好布景,然後實做以下幾點:

  1. 使用內建字體,不要用 Google Fonts
  2. ShortPixel 自動壓縮你的圖片
  3. Breeze 壓縮 JS、CSS,加上快取
  4. 手動設定 GA,不要用 Google Site Kit
  5. 找個好 SEO 套件,我自己用 RankMath

就能拿到四個項目都 90 分以上,GTmetrix A 等級。

GTMetrix 分數跑出來都是 A,心曠神怡啊
GTMetrix 分數跑出來都是 A,心曠神怡啊

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

Follow Us