提升 WordPress 網站效能的 10 大關鍵

為了讓訪客體驗更好、搜尋排名更前面,網站效能一直是相當熱門的話題。為了讓網頁載入速度再快一點,站長們購買一個接一個網站最佳化外掛,嘗試在近百個設定中找到適合自己網站的最佳組合。

然而,對網頁載入資源進行最佳化只是其中一個增進網站效能的手段。事實上,從架設網站最初的主機、網站託管商,到網站架設完成開始運作後的維護,這期間的各個環節都會對 WordPress 網站的效能造成影響。

在這篇文章中,我們整理了 10 個對網站效能造成影響的關鍵要素,並為大家說明其對網站效能的影響。

  1. 主機託管商
  2. 網站 PHP 版本
  3. 佈景主題
  4. CDN
  5. 快取
  6. 圖片
  7. 頁面載入資源
  8. 網頁資源壓縮
  9. 資料庫
  10. 版本更新

主機託管商

多數人在自架站旅程的最初都是以成本、CP 值來決定第一個網站要使用哪個主機託管商的服務,因為缺乏經驗、不熟悉技術相關名詞,大多是聽從網紅、社群 KOL、廣告的建議選擇入門方案。

熟悉之後,真正確認自己架站的需求之後就可以開始決定網站的長久棲身之地了。

時間拉長來看,想要認真經營網站還是得找到能提供穩定、快速主機的託管商,建議可以從這些條件去判斷:

  • 主機規格 – 例如 CPU、記憶體、流量限制等是否符合需求
  • 技術架構 – 如果是商務用途,是否可以乘載高訪客流量
  • 正常運作時間 (uptime) 至少也要有 99.5% 以上

而分享主機方案要達到這些要求一般是比較困難的。

一般入門者,建議可以使用 Cloudways 的服務,近年來持續推出不少提升網站效能、安全防護功能,雖然價格稍高但尋求穩定、輕鬆架站的站長們可以從這開始,相關的教學文章也相對豐富。

進階站長們則可以考慮 Kinsta 的服務,特別是商務用途網站,Kinsta 相當擅長主機效能調校,在台灣也有代理商能夠提供在地的服務。

網站 PHP 版本

WordPress 網站是以 PHP 語言為基礎開發的 (佈景主題、外掛也是),平均每年都會推出一個新的 .x 版本,每個版本的支援期為三年。

目前 (2023 年 3 月) 8.0 以下已經不會再發布安全性修復了,如果想要知道 PHP 各版本的支援狀態,可以追蹤官方的 Supported Versions 頁面。

新版本釋出通常會包含新功能、最佳化以及效能改進,當使用版本差異越大時對網站的效能影響也越大。

可以參考 Kinsta 的測試報告,針對不同的內容管理系統與架構使用不同版本 PHP 的基準測試比較。

對於 WordPress 與 WooCommerce 網站的測試,Kinsta 也將 PHP 7.4 版本納入比較,因為目前還是有相當多 WordPress 網站的 PHP 版本停留在 7.4 以下。

基準測試 – WordPress

這是對 WordPress 核心版本 v6.2.2 與 v6.4.2 使用不同 PHP 版本所進行的測試。

可以看出這兩個 WordPress 核心版本的差異並不大,主要的差別應該是在於 v5 到 v6。

而 PHP 版本的影響就有稍微顯著一些的差別了,以 WordPress 6.4.2 版來說:

  • PHP 7.4 – 149 rps
  • PHP 8.1 – 153 rps
  • PHP 8.2 – 158 rps
  • PHP 8.3 – 169 rps

註:rps – requests per second

kinsta-phpbench2023-wordpress-v2

圖片來源:PHP Benchmarks, Kinsta

基準測試 – WooCommerce

這是使用 WordPress 6.2.2 所架設的 WooCommerce (v7.9) 網站的測試結果。

可以看出 PHP 8.3 在效能表現上有明顯的提升:

  • PHP 7.4 – 48 rps
  • PHP 8.1 – 49 rps
  • PHP 8.2 – 49 rps
  • PHP 8.3 – 58 rps
kinsta-phpbench2023-woocommerce

圖片來源:PHP Benchmarks, Kinsta

為了確保網站的穩定性與安全性,需要定期檢視網站架構中各項元素的版本是否已經可以更新到較新的版本,而這通常也會帶來一些效能改善的效益。

佈景主題

選擇輕量、程式碼品質高的佈景主題也能夠大幅提升網站效能。

2021 年以前,當時還是「能夠製作精美設計」的「頁面編輯器」各自擅場的年代,很多 no code、隨拉即成的頁面編輯器因為打中許多初開始自架 WordPress 網站族群的心,因而流行了一段時間。

然而,SEO 中相當關鍵的一環還是在於網站自身載入效率是否能夠滿足閱覽族群的要求,當載入時間過久、網頁版面跳動導致訪客無法正常操作時,網站的跳出率會大幅提升,單次停駐時間、實際瀏覽時間也會大幅降低。

頁面載入時間從 1 秒拉長到 5 秒,行動裝置使用者離開頁面的可能性將增加 90%。

Think with Google
mobile-page-load-time-bounce

也因此最近幾年 WordPress 佈景主題、外掛社群間逐漸將重點轉向了輕量、不帶冗餘 CSS、JS 程式碼、程式碼使用才載入的風潮,網站的訪客也終於可以輕鬆的閱讀不需要等待數十秒才開啟的網頁了。

可以參考 Cloudways 整理的「最輕量 WordPress 佈景主題」清單中,其中也有我們使用的 Blocksy 佈景主題。

CDN

內容傳遞網路 Content Delivery Network (CDN) 是一種利用全球網絡的內容快取機制,透過將網站上的靜態資源作分散式的鏡像複製、保存,可以更快、更可靠的將音樂、圖片、影片、網頁檔案由最靠近訪客的資料中心傳送給訪客。

架構良好的 CDN 甚至可以將網頁載入時間壓到 50~100ms 以內。

由於訪客存取網站時,會由 CDN 來提供網頁資源,當訪客流量大時對主機的負擔影響也會降到最低。主機的效能、資源也能有最大利用的可能性。

CDN 是非常值得運用的技術,唯一需要注意的就是快取資料的更新,當管理者對網站進行修改或測試完成後,記得要清除相關頁面的 CDN 快取,這樣訪客才不會看到過時的網站內容。

提供 CDN 服務的知名廠商有 CloudflareBunny Net、MaxCDN 以及 Amaxon CloudFront 等。

快取

使用外掛工具進行頁面快取、物件快取,可以提升網站頁面的載入速度,降低主機的存取負擔。例如:W3 Total Cache、LiteSpeed Cache、WP Fastest Cache、Redis Object Cache 等。

一些知名的主機託管商也將快取功能整合到它們提供的服務中。

像是 Cloudways 有:

  • Breeze – 提供 Varnish 快取,可自行設定 CDN
  • Object Cache Pro – Redis 物件快取的進階版外掛

而 Kinsta 也提供了整合的管理式快取功能,包含全頁 (full-page) 快取、物件快取與 CDN 快取,可以很輕鬆的從管理介面清除快取。

圖片

一般網頁頁面載入時,文件內容 (HTML、CSS 等) 的載入時間大約占 30~40% 的時間,剩下的 60~70% 就是頁面中的圖片了。

如果載入的圖片都是原始、未經最佳化壓縮的檔案,載入花費時間的比重還會更高。

為了減輕圖片載入所耗費的時間與流量,可以使用線上圖片壓縮服務 (例如:TinyPNGShortPixel 等) 將圖片壓縮之後,再上傳到 WordPress 網站中。

這類工具的開發商通常也有提供 WordPress 外掛,方便站長們可以在上傳圖檔到 WordPress 網站後台的媒體庫時自動完成圖片壓縮。

口碑好的圖片壓縮外掛有 TinyPNGShortPixel Image OptimizerreSmush.itEWWW 等可以參考使用。

也有提供 CDN 快取圖片的外掛,如 ShortPixel Adaptive ImagesOptimoleEWWW 等。

使用優秀的演算法大型圖片的壓縮效率可以達到 60-80%,檔案大小縮減幅度相當高,大家可以利用這些廠商提供的免費服務對圖片壓縮前、後的圖片品質與檔案大小進行比較,再來決定適合自己的外掛服務。

頁面載入資源

其他頁面載入資源像是 HTML、CCS、JS 程式碼等,過去也是網站最佳化專家們討論最多的核心焦點。

在前述「頁面編輯器」盛行的年代,大眾們關心的是設計網站的過程方不方便,是否可以所見即所得、隨拉即成的方式就將網站設計完成。

在這樣的設計、開發概念下,誕生了許多在網站前、後台為了提供豐富、多元、便捷功能而需要載入肥大 CSS、JS 檔案的頁面編輯器,隨後也誕生了許多運用各式各樣網頁資源最佳化技巧的外掛工具。

這些技巧包含了:

  • 最小化、合併網頁資源 (HTML、CCS、JS)
  • 移除未使用的網頁資源
  • 延遲載入網頁資源,直到訪客互動
  • 延後載入網頁資源,直到進入視野範圍

然而,現今有許多輕量佈景主題、區塊編輯器可供選擇,使用這類程式碼品質高的區塊編輯器設計網站時,開發商一般會按功能分門別類將關聯的 CSS、JS 程式碼拆開,當頁面上有使用到相關功能時才會載入這些 CSS、JS 程式碼。

也因此,對使用這類編輯器架設的網站來說,前述的網頁資源最佳化技巧大多已經不合時宜,還可能有「過度最佳化」的問題,造成頁面設計跑版、功能缺失等。

然而,倘若使用的是需要進行載入資源最佳化的「頁面編輯器」,那麼善用這些技巧絕對是可以改善網頁載入效能的。

我們曾經做過的網站最佳化案例分享:「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme

口碑好的網站最佳化外掛有 Asset CleanUp、Performatters、Clearfy、Autoptimize、Swift Performance 等,部分 (前述的) 快取外掛也有提供網頁資源最佳化的功能。

網站資源壓縮

訪客造訪網站頁面,頁面內容會被傳輸到訪客的瀏覽器上進行解讀,在傳輸網頁檔案的過程中如果能對這些檔案進行壓縮,讓檔案大小在壓縮後才進行傳輸,就能進一步縮短頁面呈現在訪客瀏覽器上的時間了。

Gzip 是最為普及的壓縮技術之一,大多數快取外掛都有內建這個功能。

另一個更為先進的壓縮技術是 Brotli,是 Google 開發出來的開源壓縮演算法,用來作為 Gzip、Zopfli 與 Deflate 的替代演算法。

Our results indicate that brotli, and only brotli out of all the benchmarked algorithms, would be a good replacement for the common use cases of the deflate algorithm in all three aspects,
compression ratio, compression speed, and decompression speed.

Comparison of Brotli, Deflate, Zopfli, LZMA, LZHAM and Bzip2 Compression Algorithms (PDF) – Google

無論如何,請記得選擇啟用 Gzip 或 Brotli 壓縮方法,可以縮短頁面載入時間。

設定完成後想知道自己的網站是不是使用 Brotli 壓縮技術,可以到 KeyCDN 提供的檢測服務頁面進行確認。

或是直接使用瀏覽器的開發者工具,在頁面上按滑鼠右鍵 > 檢查,點選頁面資源之後查看 Content-Encoding 的內容為何。

  • Content-Encoding = gzip,代表使用的是 Gzip 壓縮技術。
  • Content-Encoding = br,代表使用的是 Brotli 壓縮技術。
developer-tool-content-encoding-gzip

資料庫

架設網站時間越久,網站資料庫中儲存的東西就會越多越雜,可能來自於許多安裝、測試後移除的外掛,也可能是長期撰寫文章、留言與訪客互動遺留下來的冗餘資料。

當資料庫增長的越來越大,表格中的資料數量越來越多,就會讓檢索資料的速度漸漸變慢。

定期的使用資料庫最佳化外掛可以移除這些多餘的資料,例如:

  • 垃圾留言
  • 過期頁面、文章版本
  • 過期的暫存資料
  • 無歸屬的 Metadata

相關的外掛有 Advanced Database CleanerWP-Optimize;此外,Breeze 也有提供資料庫最佳化的功能。

版本更新

最後就是在網站日常維護中最需要注意的,確保 WordPress 核心版本、佈景主題版本、外掛版本都能更新到當前最穩定、安全的版本,因為新版本通常能夠提供較佳的效能表現與安全防護。

當然,也需要時常保持與這些工具開發商之間的訊息暢通,才能夠在第一時間知道近期發布的新版本是否有需要額外注意的隱憂。例如後門漏洞、副作用等。

結語

要能夠建立一個效能表現好的網站確實不容易,好在 WordPress 的生態圈中提供了許多實用的外掛工具,讓我們能事半功倍的朝向目標一步步前進。

跟著這十點的建議,從最初的選擇主機託管商開始,一直到網站架設完成、開始運作後的維護,只要能將這些環節都顧好,雖然過程會有一點辛苦,需要持續不斷的反覆測試,但完成後看到頁面快速載入的喜悅與成就感是無法比擬的。

參考文章:「進行網站功能測試時所需要的規劃與準備

圍繞著網站最佳化這個議題,我們也會持續與大家分享相關的分析文章,協助大家在自架站的旅程上更為順遂。

主題頁面:「網站最佳化

對這些步驟的細節不熟悉也不用擔心,可以委託具備網站最佳化經驗的專家協助完成,將這個建議清單當作溝通需求的參考即可。

如果有任何問題想要詢問、討論,也歡迎加入社團一起交流唷!

The-Plugin-With-the-Best-Video-Experience-440X231

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *