優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

最後更新於 2022 年 2 月 19 日

隨著網站建立的時間越來越長以及發布的文章、安裝的插件越來越多後,慢慢感覺網站的速度一天不如一天,在這之前我也嘗試安裝過許多插件試圖提升我的網站速度,但是發現效果都微乎其微,幾乎可以說是沒有任何改善。

我的網站是使用 bluehost 主機,已經是市面上速度數一數二快的主機商了,既然主機商沒有問題,那我就只能從改善我的網站下手,因此我終於在連看好幾個 WordPress 站長推薦 WP Rocket 後也下定決心買了 single 方案來試一試。

那麼安裝並且完整設定完之後我的網站到底效能提高多少呢?

我沒有寫到任何一句 code,純粹靠著插件的設定就達到了手機評分 99 以及電腦 95 分的優秀成績:

比較失策的是我忘記在設定之前先截圖一下測之前的成績了,只能用文字來說:

一直都是手機 36 分、電腦 75 ~ 86 分徘徊

WP Rocket 甚至直接幫我把手機的效能拉高了整整 60 多分… 十分驚人。

我的 GTmetrix 分析紀錄從設定前 F 25% 到設定後測出 A 87%,也是可以看出網站效能巨幅提升。

什麼是WP Rocket?

WP Rocket 是一款付費的 WordPress 效能優化插件,基本上你可以在所有的效能提升文章中看到它的身影,幾乎集齊了所有優化的功能,並且設定方式非常簡單,只需要跟著設定頁面的功能一個一個啟用就行,完全不需要碰到 code。

重點是支持多國語言,也有繁體中文。

以下是 WP Rocket 官網給出的功能一覽:

feature 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

PS. 有提供電子商務插件兼容

方案一覽

  • Single 一年 1 個網站 $49 (如果你只有一個網站買這個就可以了)
  • Plus 一年 3 個網站 $99
  • Infinite 一年無限個網站 $249
方案 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

我的網站需要安裝嗎?

對於網站效能優化,在這之前我們可能會需要安裝:lazy load、CSS JS 優化、快取、HeartBeat…等插件,而如果使用 WP Rocket,你可以把這些插件全部卸載了,因為它將這些功能全部整合在了一起。

如果你對於自己的網站是否需要使用 WP Rocket 還是很猶豫的話,你可以先看完這篇文章再決定是否要使用,我會把所有 WP Rocket 基本版的功能全部展示並且介紹。

安裝方法

購買

首先到 WP Rocket 的購買頁面選擇一個方案後按下「Buy WP Rocket」按鈕,接著填寫你的個人資料以及信用卡資訊。

wprocket 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

購買完成之後就能夠直接下載 WP Rocket 插件,我們需要將它上傳到主機。

wprocket2 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

上傳及啟用

使用主機的 online file 功能上傳整個插件壓縮檔到 wp-content/plugins

安裝1 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法
安裝2 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

上傳完畢之後解壓縮(Extract):

安裝3 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

回到 WordPress 後台,在已安裝的外掛列表中找到 WP Rocket 將它啟用。

安裝5 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

啟用之後你可以在「設定」-「WP Rocket」來設定,也可以在上方 admin bar 看到 WP Rocket 的快捷菜單。

後台 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法
快捷 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

安裝 WP Rocket 後,打開網站根目錄底下的 .htaccess 可以看到 WP Rocket 還替我們做了一些隱形的優化,比如 GZIP 壓縮。Gzip 是一種檔案格式也是軟體,應用於檔案壓縮,我們可以利用Gzip來對網頁內容進行壓縮再傳輸到client端瀏覽器,經過壓縮後的傳輸速度會提升很多,因此能加快網頁載入的速度。

gzip 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

你也可以用開發人員工具的 Network 標籤頁找到名稱為你的域名資源中的 accept-encoding: gzip, deflate, br 來檢查網站是否確實有啟用 Gzip 壓縮。

開發者工具 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

控制台

你可以在控制台快速清除網站的所有快取檔案以及預先載入,並且決定是否要啟用 Rocket 分析功能

控制台 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

快取

快取的用意是為你的網站創建靜態的HTML,使用者初次進入頁面時會抓取頁面的內容然後產生快取文件,之後再訪問就不需要再重新產生 HTML,省去了產生時所耗費的時間。

在快取頁面,WP Rocket 會自動為你偵測你的網站是否需要針對行動裝置產生快取檔案,如果偵測到需要就會自動替你啟用。你還可以在下方設定是否要讓已經登入的使用者建立快取和設定快取的生命週期

不過要特別提醒,快取文件只是先替你當前的網站產生了一分靜態的HTML,所以某些時候當你的網站有做新的更改卻沒有清除快取重新產生的話,看到的內容就會是舊的,這部分需要自行斟酌。

快取 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

檔案最佳化

根據網站使用的主題、插件或者你可能像我一樣會自己搗股CSS,就可能會多出一些不必要的空行和語法,長久累積下來也會讓我們的網站加載速度變慢,因此我們需要將它們進行壓縮。

最佳化 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

你可以使用網站測速工具分析你的網站效能,通常在沒有優化前的網站最佳化建議都會出現「減少無用的CSS」或者「減少無用的JavaScript」,我們就可以用 WP Rocket 提供的壓縮功能來進行壓縮,直接打勾就能啟用。

減少無用的 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

網站效能分析:https://developers.google.com/speed/pagespeed/insights/

媒體

延遲載入

圖片延遲載入iframe 影片延遲載入這些功能視個人需求啟用,要注意的是 WP Rocket 對圖片的優化只有延遲載入,沒有壓縮圖片的功能,如果需要壓縮圖片可以使用同個團隊開發的 Imagify

媒體延遲載入 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

WebP caching

webp 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

WebP 兼容性功能它可以幫你網站上的所有 WebP 圖像創建單獨的緩存文件,但是如果你的網站上沒有 WebP 圖像,WP Rocket 推薦使用它們自家的 Imagify 插件來生成 WebP 格式圖像,一定要注意直接啟用這個功能它是不會幫你創建 WebP 圖像的,如果你的網站沒有 WebP 格式圖像的話用了等於沒用。

若你的網站是會需要上傳大量圖片的話,建議啟用這個功能,相同尺寸的圖片,通常來說 WebP 格式的圖檔大小會比 JPG 和 PNG 格式小個 20% 左右 (不是絕對)。

因為這部分比較細節,詳細的內容請參考官方的文檔:https://docs.wp-rocket.me/article/1282-webp

預先載入

在上方快取的部分有提到透過產生靜態HTML可以提升網站加載的速度,但這個前提是你必須先訪問過才能產生,那這樣初次訪問網站的人勢必會耗費一些時間在做讀取和產生快取的動作,這時候預先載入的作用就非常重要。

:預先載入功能不適用於用戶緩存或特定於 cookie 的緩存文件。

Preload Cache

開啟預先載入功能(Activate Preloading)後,當你發布或更新文章/頁面…等內容,WP Rocket 會自動清除該特定內容和與其相關的任何其他內容(即主頁、類別、標籤、分頁等)的緩存,此內容和相關頁面將自動預加載。

Preload Links 功能則是當使用者將鼠標懸停在連結超過100 毫秒或更長時間,則後台會去獲取這個連結頁面的 HTML ,因此當他們實際點連結進入頁面時,頁面就會馬上載入。

預先載入 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

補充

移動裝置預先載入:如果你有啟用行動裝置快取功能,WP Rocket 除了電腦版緩存文件之外,也會幫你的手機版產生緩存文件。

WebP兼容預先載入:如果你有啟用 WebP 快取,WP Rocket 將預先載入 WebP 緩存文件而不是非 WebP 緩存文件。

Prefetch DNS Requests

如果網站有讀取外部資源,填入這些外部資源的域名可以加快DNS解析,填寫的格式如下:

  • 刪除 httphttps
  • 保留雙斜線

例如:

https://fonts.googleapis.com/css?family=Roboto:900%2C400%2C500%2C300%7CRaleway:700%2C300%7COpen+Sans:300%2C800

將它改為: 

//fonts.googleapis.com

file 91GB1oEd21 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

Preload Fonts

若你有使用自己的字體,可以在 Preload Fonts 的部分寫上你的字體路徑,它能夠幫你預先載入字體,但前提是你的字體必須託管在你自己的域名上或者CDN指定的域上。

字體 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

其他更進階的比如:修改預先加載抓取的時間間隔或在特定時間預先加載,可以參考官方的文檔說明:https://docs.wp-rocket.me/article/8-how-the-cache-is-preloaded

進階規則

這部分如果你的WordPress 僅僅只是平常發布心得、文章這種小用途的話可以跳過,如果是做電商…等有涉及個人隱私財產方面比較敏感的內容,可能會需要做設定,比如:登入/登出頁面需要過濾掉不讓它產生快取,保護帳號安全。

進階規則 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

資料庫

新版的 WordPress 有提供版本控制的功能,你的文章所有發布及編輯的紀錄都會被記錄下來方便之後恢復或者修改,雖然很方便但也產生了部分的”垃圾”,若你不需要自動保存的草稿、回收桶裡的文章以及每篇文章的各個修改版本紀錄,你可以選擇將它清除掉。

資料庫 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

在最下方可以勾選排程自動清理,頻率可以是每天、每週、每月

自動清理 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

要注意的是,在清除之前記得先進行資料庫的備份,付費的主機基本上都會提供定時備份資料庫的功能,你可以將自動清理時間頻率設定在你的資料庫備份之後。

CDN

如果你沒有啟用 CDN 功能,WP Rocket 有自己的 CDN 插件 RocketCDN,價格是 $7.99 / 月,因為我個人已經有使用免費的 Cloudflare 服務所以我就沒有啟用。

CDN 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

對 CDN 有疑問的可以參考我之前發布的文章:Siteground主機Cloudflare CDN加速 教程

HeartBeat

Heartbeat API 是內置於 WordPress 的簡單伺服器輪詢 API,可以實時前端更新,也正是因為輪詢的時間間隔短、請求頻繁,造成後台開啟的速度變得緩慢,因此我們需要對其進行優化 (將頻率從 1分鐘2次 的改為 2分鐘1次)。

Heartbeat API 的示例包括:

  • 文章編輯器中的自動保存和修訂
  • WordPress 管理儀表板上的通知
  • 另一位編輯正在處理帖子時的鎖定信息
  • 通過插件(電子商務)在儀表板上顯示實時數據

建議將此功能啟用,並且每個都設置為「Reduce activity」以減少 heartbeat event 的頻率。

heartbeat 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

附加功能

這部分就是WP Rocket 可以兼容的一些其他產品功能,比如我在用 WP Rocket 之前就有用 Cloudflare,我就可以設定 Cloudflare 的 API 與 WP Rocket 整合在一起。

附加功能 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

Cloudflare 整合

cloudflare1 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

你可以在 cloudflare 後台看到你的 Zone ID,並且點擊「Get your API token」獲取全域 API:

cloudflare2 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

Global API Key 旁邊點擊「檢視」:

cloudflare3 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

輸入密碼之後就能獲取全域 API,將它複製貼上到 WP Rocket 設定中。

cloudflare5 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法
cloudflare6 1 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

接著根據個人需求啟用 cloudflare 功能,比如我啟用了最佳化設定。

cloudflare7 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

Google Fonts 優化

🚀 從 WP Rocket 3.7 版開始,此功能會在新安裝時自動啟用!

這個功能會將頁面上多個對 google fonts 請求合併成一個請求,作法是將 display=swap 參數添加到請求中(如果頁面上只有一個字體請求也會應用這個優化),以及使用 rel="preload" 來提示預加載。

preload 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

文章編輯設定

WP Rocket 也提供你在文章發布和編輯時設定是否要針對這篇文章進行相關優化:

文章編輯 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法

結論

真的不是業配文,我在嘗試了許多免費的插件之後再狠下心來買 WP Rocket,只能說一分錢一分貨,該花的錢還是得花。要想網站效能提升,使用免費的插件效果還是不會太顯著。如果你也跟我一樣網站效能很差並且找不到方式優化,可以考慮購買 WP Rocket 來用,完全傻瓜設定,幾乎不需要你做任何事情就能優化你的網站效能。

有任何對功能不理解或者需要幫助的地方,WP Rocket 都很貼心的有在每項功能旁邊附上相關說明,查閱後若還是有不解之處可以在WP Rocket 官網填寫表單詢問:https://wp-rocket.me/contact/

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 優化 WordPress 效能最佳神器-WP Rocket 詳細介紹及使用方法
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論