控制台(Dashboard)
控制台可以查看目前使用中的授權與有效期限。之後需要重設快取時,可以在右側點選清除並預先載入 [Cache Files],以及清除 [Priority Elements]。遇到問題時,也可以從頁面右側的 [View my account] 或下方的 [Ask support] 取得 WP Rocket Support 的協助。
Rocket Insights Score — 顯示追蹤中頁面的效能分數與 LCP · TBT · CLS · TTFB。
Cache Files — 刪除所有快取檔案並執行預先載入。
已使用的 CSS — 刪除已使用的 CSS 檔案。
優先元素 — 重設與自動延遲轉譯、關鍵圖片、外部網域預先連線、字型預先載入相關的已儲存優化。
Rocket Insights
Rocket Insights 是用 GTmetrix 檢查頁面,並顯示效能分數與 LCP · TBT · CLS · TTFB 的分頁。可以加入要檢查的頁面網址;開啟 [Performance Monitoring] 後,就會依設定的週期自動檢查。
Content Delivery(CDN)
RocketCDN Free 包含在 WP Rocket 授權中,會從 10 個邊緣節點傳送你自選的 3 個頁面。若要套用到整個網站,就要升級到每月 $7.99 的 RocketCDN Pro,邊緣節點會增加到 100 個以上。
使用其他 CDN 時,在 [Other CDN] 輸入 CDN 業者設定的 CNAME 紀錄。這裡是 Cloudflare CDN 以外的 CDN 設定;Cloudflare CDN 可以在附加元件中啟用。
檔案優化(File Optimization) · CSS Files
檔案優化是縮小 CSS 與 JavaScript 檔案、並調整載入順序的分頁。建立快取檔案時,也會一併套用到該頁面的 CSS 和 JavaScript。
在下方樹狀圖中,屬於伺服器端快取的 網站快取。
💾 快取
├── 伺服器端快取
│ ├── 網站快取
│ │ ├─ 轉換成 HTML 靜態檔案(CSS、JavaScript 等)
│ │ └─ 網頁快取儲存位置
│ │ ├─ 記憶體快取(RAM)
│ │ └─ 磁碟快取(HDD/SSD)
分成 CSS 檔案優化與 JavaScript 檔案優化兩種功能。
① CSS 檔案
ⓐ 壓縮 CSS 檔案
↳ 壓縮 CSS 檔案會移除空白與註解,縮小檔案大小。啟用後若有外掛的版面跑掉,就把那個 CSS 檔案加入排除清單。
排除清單像下面這樣,一行寫一個路徑。
wp-content/plugins/Plugin/(.*).css
ⓑ CSS 傳遞優化
↳ CSS 傳遞優化是去除阻礙轉譯的 CSS 的功能,可以和壓縮 CSS 檔案一起開啟。[移除未使用的 CSS] 與 [非同步載入 CSS] 只能二選一。
Remove Unused CSS(移除未使用的 CSS)
WP Rocket 建議使用 [移除未使用的 CSS]。它會拿掉每個頁面沒用到的 CSS,減少頁面大小與 HTTP 請求;啟用後版面跑掉的元素,可以在 [CSS safelist] 寫入檔名 · ID · class,把它排除在移除對象之外。
Load CSS Asynchronously(非同步載入 CSS)
[非同步載入 CSS] 會另外產生第一個畫面需要的 CSS,其餘 CSS 則以非同步方式載入。[移除未使用的 CSS] 出問題時改用這個。
檔案優化(File Optimization) · JavaScript Files
② JavaScript 檔案
JavaScript 檔案設定分成壓縮 JavaScript 檔案、合併 JavaScript 檔案、延遲載入 JavaScript、延遲執行 JavaScript 共 4 種。
JavaScript
合併檔案
減少 HTTP 請求
JavaScript
延遲載入
消除阻礙轉譯
讓阻礙轉譯的 JavaScript 檔案在 HTML 解析結束後才執行。
JavaScript
延遲執行
改善使用者體驗
在使用者捲動、點選等互動之前,延後載入 JavaScript 檔案。
ⓐ 壓縮 JavaScript 檔案
移除空白與註解,縮小檔案大小。啟用後若訪客頁面有部分功能無法運作,就關閉這項設定。
ⓑ 合併 JavaScript 檔案
把多個 JavaScript 檔案合併成一個,減少 HTTP 請求數。不建議使用 HTTP/2 的網站使用;開啟 [Delay JavaScript execution] 時無法選擇此選項。啟用後看到錯誤,再關掉網站就會恢復正常。
ⓒ 延遲載入 JavaScript
延遲載入 JavaScript 會把 JavaScript 的執行延後到 HTML 解析結束,消除阻礙轉譯的 JavaScript,進而改善 首次內容繪製(FCP) 和 最大內容繪製(LCP)。
它是怎麼運作的?
它會在 <script> 標籤加上 defer 屬性,讓它不妨礙 HTML 解析。這樣網頁瀏覽器在下載 JavaScript 檔案時,也能繼續轉譯其他 HTML 元素,使用者感受到的 頁面載入速度就會變快。
什麼時候使用延遲載入 JavaScript?
主要用在顯示網頁初始畫面時非必要的 JavaScript 檔案。
檔案優化(File Optimization) · Delay JavaScript execution
ⓓ 延遲執行 JavaScript
延遲執行 JavaScript 是在訪客捲動、點選等操作頁面之前,先不載入 JavaScript 檔案的功能。
一鍵排除是 WP Rocket 為了方便使用者而提供的功能:勾選常用的外掛 · 佈景主題 · 服務,就會把它們的 JavaScript 檔案排除在延遲執行之外。
一鍵排除中預設可以排除的項目如下。提供核取方塊讓你直接勾選,其實是其他快取外掛很少見的功能。
排除項目中沒有需要的項目時,可以自行設定排除內容。
https://platform.twitter.com/widgets.js
https://connect.facebook.net/en_US/fbevents.js
https://pagead2.googlesyndication.com/pagead/js
https://cdnjs.cloudflare.com/
https://stackpath.bootstrapcdn.com/
https://code.jquery.com/
[Safe Mode for Delay JavaScript Execution] 是把網站內部腳本全部排除在延遲對象之外的安全模式。
媒體(Media)
媒體分頁以圖片設定為主,也可以套用 YouTube 與 Google 字型的設定。
設定 ① 延遲載入與 ② 圖片尺寸。
延遲載入會在圖片 · iframe · 影片進入畫面時才載入,減少 HTTP 請求數。開啟 [Replace YouTube iframe with preview image] 後,YouTube 影片會先以預覽圖片顯示。
[Add missing image dimensions] 會補上圖片缺少的 width · height 屬性,減少版面位移。
③ 字型中的 [Preload fonts] 會先載入第一個畫面用到的字型,[Self-host Google Fonts] 則把 Google 字型下載到自己的伺服器再傳送。
預先載入(Preload)
快取預先載入是所有快取外掛都會套用的功能。在訪客造訪之前先預先載入文章、頁面等內容,訪客打開 WordPress 某個頁面時,就已經能享有快速的載入。
開啟預先載入後,WP Rocket 會找出網站地圖、儲存所有網址並事先建立快取。[Enable link preloading] 會在訪客把滑鼠移到連結上時,先下載那個頁面。
這是實際確認 WP Rocket 是否進行快取預先載入的結果。大約每分鐘最多 30 個左右,第一次建立快取時會產生更多預先載入快取。
除了預先載入,能清除單篇文章快取的功能,在經營網站時非常實用。
進階規則(Advanced Rules)
我個人除了把快取壽命設為 9 小時之外,沒有做其他設定。
預設值是 10 小時,畫面上也提示:如果週期性出現問題,就調到 10 小時以下。
快取壽命
設定快取檔案的有效期間
指定快取檔案從伺服器自動刪除的時間。
永不快取的 URL
排除特定頁面的快取
把含有敏感資訊(登入 / 登出頁面)的 URL 排除在快取之外。
永不快取的 Cookie
依特定 Cookie 排除快取
瀏覽器設定了特定 Cookie 時,不快取頁面。
永不快取的使用者代理
排除特定使用者的快取
讓帶有指定使用者代理(User Agent)的訪客看不到快取頁面。
一律清除的 URL
強制讓快取失效
指定每次更新文章或頁面時,一律從快取中刪除的 URL。
要快取的查詢字串
快取特定 URL 參數
強制快取包含特定 GET 參數(例如:?utm_source=google)的 URL。
資料庫(Database)
資料庫分頁會刪除內容修訂、自動草稿、垃圾桶中的文章、垃圾留言與已刪除的留言、暫存資料,並優化資料表。清理後無法復原,執行前請先備份資料庫。
開啟 [Schedule Automatic Cleanup] 後,會依設定的週期自動清理。
Heartbeat
WordPress Heartbeat 是讓 WordPress 在網頁瀏覽器與伺服器之間 定期通訊的 API。就像心臟跳動一樣,這個 API 會定期送出訊號,維持與伺服器的連線。
WordPress 利用這個 Heartbeat API 實作多種功能。例如在 WordPress 編輯器中有使用者正在修改文章時,用來實作防止其他使用者編輯同一篇文章的
鎖定 功能。
此外,撰寫文章時的即時自動儲存,以及在管理後台控制台傳送即時通知,也都會用到 Heartbeat。
[Reduce activity] 會把原本 1 分鐘送一次的訊號減少為 2 分鐘一次。完全關閉的話,使用這個 API 的外掛與佈景主題可能無法運作。
附加元件(Add-ons)
使用者快取
為每位登入的使用者分別建立專屬的快取檔案。我個人實際上沒有使用。
WP Rocket 清除快取時,會自動一併清除 Varnish 快取,
讓內容保持最新。
WebP 相容性
依支援 WebP 圖片的瀏覽器另外建立快取。WP Rocket 不會幫你產生 WebP 圖片;如果使用像 IMAGIFY 這樣直接傳送 WebP 的外掛,就不需要開啟。
可以在 WP Rocket 中管理 Cloudflare 的快取,並啟用最佳設定。
Sucuri
WP Rocket 清除快取時,會自動同步並清除 Sucuri 快取。
附加元件(Add-ons) · Varnish
① Varnish Cache
設有 Varnish 快取的伺服器,通常會把 Varnish 放在 Apache 或 Nginx 伺服器的前端。
Varnish Cache 是一種網站加速器,會在發生動態網站與 API 請求時快取回應,減輕後端伺服器的負擔並提升頁面載入速度。
WP Engine , Flywheel, Cloudways 或 WPX 代管時 WP Rocket 會自動偵測環境並啟用 Varnish 附加元件。
SiteGround , Kinsta、Pressable 上,WP Rocket 的快取已經與該伺服器的快取同步,所以不需要啟用這個選項。
Varnish Cache 是把網站的
最終結果(HTML、圖片等)儲存起來,再直接傳送給使用者的方式。OpCache 與 Redis 則是快取構成網站的
內部資料或程式碼,兩者性質不同。
附加元件(Add-ons) · Cloudflare
② Cloudflare 設定
如果使用 Cloudflare,可以啟用後與 WP Rocket 連動,也能和既有的其他 CDN 一起使用。
啟用 Cloudflare 時,輸入帳號電子郵件、Global API 金鑰與區域 ID 來連動。
圖片優化(Image Optimization)
據說網站載入時間有 50% 花在圖片上。 Imagify 是本頁建議安裝的外掛,免費方案每月可壓縮到 20MB(約 200 張圖片),並轉換成 WebP 或 AVIF。
工具(Tools)
[工具] 提供把 WP Rocket 中的設定內容匯出的功能。
可以為了測試先匯出設定再重新匯入,也可以把設定檔下載到電腦後再上傳,還原設定。
新加入的 [MCP Server] 是把 AI 工具連接到 WP Rocket 的項目。
[Rollback] 會在出問題時退回上一個版本;[Update Inclusion and Exclusion Lists] 則手動更新原本每週自動下載的相容性清單。
教學(Tutorials)
快取外掛不管說明寫得再好、效能再好,實際上要百分之百發揮用法並不容易。
外掛頁面為各項功能提供了教學,所以使用者在安裝 WP Rocket 外掛、完成基本設定與測試之後,仍然有機會持續提升效能。
我們的外掛(Our Plugins)
WP Rocket 外掛被大量 WordPress 網站使用,因此有相當多外掛宣傳自己可以和 WP Rocket 外掛一起使用、不會衝突。 實際上,設定快取功能時發生的錯誤是所有外掛的共同問題,所以需要在適當的地方取得平衡。
group.one 這家公司在 2021 年 4 月收購了
WP Media,之後又在 2023 年 5 月收購了
RankMath。也就是說,WP Rocket、IMAGIFY、RankMath 是同一家公司的產品,彼此相容性良好。