Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法

聯盟行銷揭露 Ver 3.1
聯盟行銷揭露 Ver 3.2(僅限行動版)

Perfmatters 外掛是 WordPress 優化外掛中,既輕巧又能提供強大效能的工具。它能輕鬆控制不必要的腳本與資源,改善頁面載入速度,並把伺服器負載降到最低。使用 5 年以上的感想是,它不只是單純提升速度,還能提高整個網站的穩定性與管理便利性。

目前這個網站同時使用 WP Rocket Cache 外掛和 Perfmatters。本文會分享只單獨套用 Perfmatters 時的 基本設定方法與 選擇各個項目的理由,以及 優化結果。

Ⅰ. 最佳 WordPress 優化外掛

WordPress 快取外掛是 WordPress 使用者永遠少不了的關鍵字。大多數使用者安裝快取外掛後,都會在 Google PageSpeed 和 Chrome 開發人員工具上看到令人滿意的網站效能提升。

但經營網站時,為了改善訪客體驗或擴充功能,會陸續加入各種外掛。問題是在這個過程中,不必要的腳本與資源越來越多,反而常常出現 頁面載入速度變慢的現象。

其實我在使用 WP Rocket 外掛時也有同樣的經歷;雖然可能是我的經驗與知識不足,但我得出的結論是,其他快取外掛也不會是更好的替代方案。

1️⃣ 優化外掛比較

和 clearfy、Autoptimize、Asset CleanUp 相比,我選擇 Perfmatters 的原因,是它有最直覺的使用者介面,每項設定也都有詳細說明,幾乎不需要另外 Google 搜尋。

Perfmatters選擇
最直覺的使用者介面,每項設定都有詳細說明。
和 Perfmatters 定位相近,但 Perfmatters 更直覺,說明也不複雜。
功能太少。
Asset CleanUp
提供相同的功能,但太複雜。安裝 5 分鐘後就刪除了。

TrustPilot 上獲得 4.9 的高評價。第一次挑選 WordPress 優化外掛時,我就是看到這個評價才決定用 Perfmatters。

Perfmatters Reviews on TrustPilot

2️⃣ Perfmatters pricing & Promo Code

使用 Perfmatters 5 年以上後,我正式獲得了 Perfmatters 官方提供的優惠碼。
Promo Code
WPUKNEW20% 折扣
方案
原價
套用優惠碼
Personal1 個網站
$29.95
$23.96
Business3 個網站
$59.95
$47.96
Unlimited網站數無限制Best Value
$124.95
$99.96
以年繳計算
套用 Perfmatters 優惠碼(20% 折扣)
在結帳畫面的 [Enter a discount code] 輸入優惠碼,就會套用 20% 折扣。

Ⅱ. Perfmatters 基本設定教學

WordPress 的 CSS 與 JS 檔案是全域載入的,連沒用到的頁面也會載入相關程式碼,因而拖慢網站效能,這種情況很常見。 Perfmatters 提供了 WordPress 優化外掛應具備的程式碼移除、資源控制、請求最小化等所有功能。

這種方式能從根本上減少單靠快取外掛無法解決的「資源浪費」問題,結果就能同時獲得 改善頁面載入速度與降低伺服器負載 這兩種效果。

從 Perfmatters 一般設定開始,涵蓋資料庫的基本優化功能與資產優化功能;腳本管理器(Script Manager)則要從管理後台切換到造訪網站後再設定。教學會從一般設定開始,腳本管理器之後再另外說明。

Perfmatters 基本設定畫面分頁
General
JavaScript(優化)
CSS(優化)
Preloading
Lazy Loading
Fonts(字型優化)
CDN
Analytics
Code
Tools
Database(優化)
License(授權管理)
Support(支援)
Documentation
Contact Us
Frequently Asked Questions
Perfmatters: script manager
General › Core
1 / 2
Perfmatters settings: general core 1
Perfmatters settings: general core 2
Perfmatters 是沒有快取功能的優化專用外掛。光靠一般設定分頁的優化功能,就能大幅提升網站效能。
項目名稱
Check / Uncheck
簡短說明
Disable Emojis
Check
header & footer 等處沒有表情符號就勾選
文章內的圖片不受影響⤵️
Remove jQuery Migrate
Check
與舊程式碼的通訊:不需要的程式碼
Hide WP Version
Check
網站安全性
Remove RSD Link
Check
外部應用程式與 WordPress 網站通訊
開啟 Disable XML-RPC 後,這一列會從畫面上消失。
Remove Shortlink
Check
舊版 WordPress 的做法
Disable RSS Feeds
Uncheck
要提供 RSS 訂閱給其他網站時 Uncheck
不提供時 Check
Remove RSS Feed Links
Uncheck
只有勾選 Disable RSS Feeds 時才移除連結(Check)
Disable REST API
Check
讓外部程式也能使用內部資料的 「資料通訊窗口」⤵️
其他 App、網站、外掛 等
Remove REST API Links
Check
和停用是完全不同的概念,
是刪除連結本身
Disable Google Maps
Check
會拖慢速度,所以停用:
可以只在需要的頁面啟用⤵️
Disable Comments
Check
不使用留言功能時 Check
Add Blank Favicon
Uncheck
通常已經設定好網站圖示,所以 Uncheck
給佈景主題、外掛開發者用的功能
Block Style Behavior
Check
提升 CSS 效率
Disable Heartbeat & Revisions
Check
Disable Emojis
WordPress 預設的表情符號功能會另外載入一個 JavaScript(wp-emoji-release.min.js)檔案,產生不必要的請求;勾選後就不會載入這個腳本。
文章內的一般表情符號由瀏覽器直接繪製,所以不受影響。不過 直接在頁首或頁尾插入表情符號時 部分佈景主題可能會出現顯示錯誤。
Disable Dashicons
Dashicons 原本是 WordPress 官方字型圖示,但新的佈景主題與外掛都使用自己的圖示或 SVG,現在只在管理後台使用。勾選以停用。
Disable Embeds
勾選後,[wp-embed.min.js] 檔案就不會載入。 雖然無法嵌入其他 WordPress 網站,但 YouTube 仍然可以嵌入,所以如果不使用 WordPress 網站之間的嵌入,就停用它。
Disable XML-RPC
XML-RPC 功能容易受到暴力破解等攻擊,所以勾選以停用。只有在使用 JetPack 這類會用到 XML-RPC 的外掛時,才維持啟用。
Remove jQuery Migrate
讓舊程式碼與新程式碼能互相通訊的程式碼,實際上用不到,所以勾選以移除。
Hide WP Version
WordPress 版本一旦曝光,漏洞就更容易被找到,所以勾選以移除。
RSD Link 只有透過 XML-RPC 連線的外部程式或行動 App 才需要,所以勾選以移除。
永久連結已設定好的話,就不需要保留短網址,所以勾選以移除。
類別
範例
說明
Shortlink
[https://domain.com/?p=123]
以文章 ID 為基礎的預設連結,舊版 WordPress 的預設形式。
Permalink
[https://domain.com/post-name/]
人容易閱讀的形式,現在大多數網站的標準。
Disable RSS Feeds
不提供 RSS 訂閱給其他網站時,勾選以停用。
只有勾選 Disable RSS Feeds 時才移除連結。
Disable Self Pingbacks
在自己的網站內加上指向自己網站的內部連結時,會產生 Self Pingbacks,所以勾選以停用。 Pingbacks 產生的留言反向連結對 SEO 沒有太大幫助。
Disable REST API
REST API 是 App、網站、外掛、外部服務與 WordPress 之間以 JSON 格式交換內部資料的通訊窗口。
情況
說明
✅ REST API 啟用狀態
外部 App 或外掛連到 [https://domain.com/wp-json/wp/v2/posts] 網址時,就能以 JSON 取得部落格文章清單資料
⚙️ 使用 REST API 的例子
在行動 App 載入 WordPress 文章清單,或外部工具(例如 Rank Math、Elementor)自動更新網站資料時使用
❌ 停用 REST API 時
存取上面的網址時資料會被封鎖,外部請求會被拒絕
維持公開時,任何人都能取得基本的網站資訊;而包含 Rank Math 在內的許多外掛,只在已登入的管理員環境中使用 REST API。
Perfmatters-Disable REST API
因此 只對未登入的使用者(登出狀態)停用是最安全的設定,而且比起速度,對安全性的正面影響更大。
如果是一個人經營,就選 [Disable for Non-Admins];如果還有其他作者,就選 [Disable When Logged Out]。
套用 Disable REST API(Logged Out)時,即使 Claude 等 AI 的連線已獲得核准,也可能發生錯誤。
連接 Claude MCP 時如果發生錯誤,在程式碼片段中加入下面的設定即可。
這不是關閉 REST API 功能本身,而是只刪除頁面標頭中相關連結的 meta 標籤,減少不必要的請求。
Disable Google Maps
有些佈景主題或外掛,連不使用地圖的頁面也會自動載入 Google Maps API 腳本;勾選後會封鎖這個腳本,減少外部請求。
Perfmatters settings: general disable google maps
如果有文章含有 Google 地圖,可以在 [Exclude Locations] 填入文章 ID 等,讓那篇文章的地圖不會被停用。
Disable Password Meter
密碼強度檢測腳本原本只會在 註冊會員、變更密碼、編輯使用者個人資料 畫面載入,但佈景主題或外掛若在所有頁面加入登入彈出視窗這類表單,[zxcvbn.min.js] 就會在全站載入。
/wp-includes/js/zxcvbn.min.js
/wp-admin/js/password-strength-meter.min.js
勾選以停用。實際上幾乎用不到這個檔案。
Disable Comments
WordPress 網站不使用留言的話,就勾選以停用留言功能。
Add Blank Favicon
新安裝的 WordPress 沒有 [/favicon.ico] 檔案,做效能測試時會出現 404 錯誤;這個選項是為了消除這個錯誤、給佈景主題與外掛開發者用的功能。 已經加入網站圖示的 WordPress 網站則不需要。
Remove Global Styles
從 WordPress 5.9 起,核心會自動在 [<head>] 插入 [global-styles-inline-css] 行內 CSS。這是為 FSE 佈景主題準備的 150~200 行行內 CSS,但 Kadence、GeneratePress 這類傳統佈景主題就算不用 FSE 也會一直附加,HTML 因而變大,FCP/LCP 也會稍微變差。
啟用這個選項來移除這段程式碼。
remove_action(‘wp_enqueue_scripts’, ‘wp_enqueue_global_styles’);
Block Style Behavior
在 2.6.8 的畫面中,以前的 [Separate Block Styles] 切換開關改成了 [Block Style Behavior] 下拉選單。預設值 [Separate Styles Inline (Default)] 就是依區塊分開載入的方式。
WordPress 的每個區塊(段落、圖片、圖庫、按鈕等)都有專用的 CSS,預設狀態下,連沒用到的區塊 CSS 也會被包進 全域樣式表一起載入。依區塊分開後,只會載入頁面上實際有的區塊 CSS。
  • CSS 使用量最多 減少 17%
  • 部分單頁網站 LCP 改善約 30~50ms
  • TBT(總封鎖時間)的減少不明顯,但 CSS 解析負擔變小
類別
運作方式
載入結果
❌ 原本(預設狀態)
一次載入所有區塊 CSS
包含大量不必要的 CSS
Block Style Behavior
只載入頁面上有的區塊 CSS
CSS 檔案數量稍微增加, 但 CSS 總大小減少
WordPress 核心從 6.2 起正式支援, Kadence、Spectra、GeneratePress 這類佈景主題與外掛不會有問題。不過, 如果有自己的 CSS 載入邏輯,或是以 FSE 為基礎(以 theme.json 為中心)的架構,就可能發生樣式衝突。
上述功能使用 WordPress 核心的 [should_load_separate_core_block_assets] 篩選器。要注意 CSS 會以行內方式插入網站的 body,而不是 head,因此 W3C 驗證工具可能會出現警告。
參考:perfmatters 文件
類型
範例
原因
❌ 以 FSE 為基礎的佈景主題
Twenty Twenty-Four、Blockbase 等
全域樣式(theme.json)與 CSS 綁定
⚠️ 舊式建構器型佈景主題
Avada、WPBakery、Jupiter X 等
自有 CSS 結構與核心 CSS 重複載入
⚠️ 以舊式 CSS 為基礎的區塊外掛
較舊的 Ultimate Blocks、Stackable(舊版)等
假設區塊共用 CSS 會全域載入
Disable Heartbeat & Revisions
WordPress [Heartbeat] 是確認伺服器與網站是否連線的訊號,在控制台每 15 秒就會向 /wp-admin/admin-ajax.php 發送 POST 請求。只在編輯文章與頁面時允許,並把頻率設為 60 秒,以減輕伺服器負擔。
Heartbeat
Perfmatters Heartbeat 功能 1
只允許文章與頁面
Perfmatters Heartbeat 功能 2
內容修訂(Revisions)維持預設值的話,會一直累積在資料庫中拖慢速度,所以只允許保留 3 個。
Perfmatters settings: general limit post revisions
文章自動儲存的間隔預設是 1 分鐘,這裡設為 10 分鐘。
Perfmatters Autosave Interval 設定
在管理後台撰寫文章時,如果大量使用伺服器 CPU,不管用哪個快取外掛,訪客頁面的速度都可能變慢。不使用 Perfmatters 的話,也可以在 wp-config.php 中直接設定上述項目。
General › Login URL
1 / 2
Perfmatters settings: general login url
Perfmatters settings: general login url local redirect
項目名稱
Check / Uncheck
簡短說明
Login URL 設定
Check
取代其他隱藏登入網址的外掛
登入網址設定
WordPress 管理後台預設是 yourdomain.com/wp-admin,安全上是脆弱的結構。可以使用 Perfmatters 提供的功能,取代其他隱藏管理後台的外掛。
Login URL
Perfmatters Login URL 1
Login URL 選項
Perfmatters Login URL 2
JavaScript › Defer
Perfmatters settings: javascript defer
↳ 延遲載入 JavaScript (Load JavaScript deferred)
JavaScript Defer 是讓 HTML 文件先完成解析、畫面顯示之後才執行 JavaScript, 延後載入、避免阻礙轉譯的功能。 DOMContentLoaded 時間點的延遲會縮短,FCP 與 LCP 也會跟著改善。
Include Inline Scripts
這個選項會連直接寫在 HTML 文件內(<script>…</script>)的短 JavaScript 程式碼也一起延遲。行內腳本常是選單切換等初始動作所需要的,所以 除非有特別的理由,否則維持停用。
Include jQuery
許多外掛與佈景主題都依賴 jQuery,把 jQuery 納入延遲載入,可能會讓選單切換、輪播、彈出視窗等網站的一部分壞掉。 維持停用,只有在需要時,經過測試再啟用。
Excluded from Deferral
輸入延遲後無法正常運作的腳本(輪播、表單驗證、選單等)的檔案路徑,就會 排除在 Defer 之外並立即載入。
/wp-includes/js/jquery/jquery.min.js
/wp-content/plugins/contact-form-7/includes/js/scripts.js
JavaScript › Delay
Perfmatters settings: javascript delay
↳ 延遲執行 JavaScript (Delay JavaScript execution)
這個選項會在頁面載入後, 直到使用者互動(捲動、點選、觸控等)之前 暫停 JavaScript 的執行,把廣告、分析、外部追蹤腳本等非必要的 JavaScript 延後,以改善 LCP(Largest Contentful Paint)與 FCP。
如果說 [Defer] 是在 HTML 解析後執行,[Delay] 則是把執行本身延後到使用者有動作為止。自動播放或初始彈出視窗這類必須立即運作的 腳本要設為例外。
Perfmatters Delay - 延遲執行 JavaScript
Delay JavaScript 啟用時,建議同時啟用底下 3 個選項。
Perfmatters Delay - 延遲執行 JavaScript_建議啟用 3 個選項
選項
建議狀態
說明
Delay Behavior
Check
不是延遲所有 JS,只延遲「非必要腳本」
建議:[Only Delay Specified Scripts (Default)]
Delay Timeout
Check
使用者沒有任何動作,經過一段時間後也會自動執行
(廣告、統計用,預設 15 秒)
Disable Click Delay
Check
點選後立即回應(改善 INP,避免 UX 延遲)
Enable FastClick
Check
消除行動裝置上的點選回應延遲(避免 iOS 觸控延遲)
Delay Behavior
決定只延遲指定的腳本,還是延遲所有 JavaScript。
Perfmatters Delay - 延遲執行 JavaScript_特定檔案或全部延遲執行
✅ 只對特定檔案套用延遲執行
Perfmatters Delay - 延遲執行 JavaScript_特定檔案或全部延遲執行_輸入欄
✅ 對所有檔案套用延遲執行
延遲執行所有檔案可能會讓特定外掛或佈景主題出問題,可以在 [Quick Exclusions] 選擇已安裝的外掛與佈景主題來排除。清單上沒有的話,就直接在 [Excluded from Delay] 輸入。
Perfmatters Delay - 延遲執行 JavaScript_所有檔案
Delay Timeout
即使使用者沒有任何動作(點選、捲動等), 經過一段時間後 就會自動執行被延遲的 JavaScript。預設為 15 秒。
Disable Click Delay
在延遲執行狀態下,使用者要先點選某個東西,JS 才會載入,接著才執行點選的動作(開啟選單、按鈕動作等),所以點選後的回應可能會稍微變慢。這個選項就是 消除這種回應延遲的功能。
情況
預設 Delay JS 狀態
啟用 Disable Click Delay 時
使用者點選
JS 載入後才執行點選事件 → 產生些微延遲
JS 立即執行 → 點選回應快
Enable FastClick
開啟延遲執行後,可能會出現要點兩次才有反應的現象,所有快取與優化外掛都有這個共同問題。這個選項可以改善它。
JavaScript › Minify
Perfmatters settings: javascript minify
↳ 壓縮 JavaScript (Minify JavaScript)
Perfmatters Delay - 壓縮 JavaScript(Minify JavaScript)
移除 JavaScript 檔案中不必要的字元(空白、換行、註解等), 把檔案大小降到最小的功能,同時減少傳輸容量與語法解析(Parsing)時間。
已經壓縮過的檔案,檔名結尾是 [.min.js]。如果 Google PageSpeed Insights 或 Lighthouse 出現 [壓縮 JavaScript] 警告,就啟用這個選項,連沒壓縮的腳本也一起壓縮。
CSS › Unused
Perfmatters settings: css unused
CSS 設定提供移除未使用的 CSS 與壓縮 CSS 2 種方法。
↳ 移除未使用的 CSS (Remove Unused CSS)
找出頁面中實際沒用到的 CSS 程式碼並移除的功能。 WordPress 佈景主題與外掛大多會在幾乎所有頁面共同載入 CSS 檔案,沒用到的 CSS 會增加檔案大小與阻礙轉譯的時間,對 LCP 與 FCP 造成負面影響。
啟用後,會在各頁面 只擷取實際需要的 CSS 放進頁面;使用大型佈景主題(Elementor、Divi、Avada 等)或 大量外掛的網站,效果特別明顯。輪播或表單建構器這類有部分樣式遺漏時,就加到 [Excluded Stylesheets]。
Used CSS Method
使用中的 CSS 可以 以行內形式插入,或拆成獨立檔案載入。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
Inline(預設值):直接把需要的 CSS 插入 HTML 文件中。沒有外部 CSS 請求,對 FCP 與 LCP 有利,但每個頁面的 HTML 都會變大。推薦給 CSS 容量小的部落格型網站。
File:把使用中的 CSS 做成獨立的 .css 檔案載入。可以利用瀏覽器快取,但會多一個外部請求。推薦給大型網站或 CSS 容量大的建構器型頁面。
Stylesheet Behavior
樣式表行為選項是 決定用什麼方式處理不必要 CSS 檔案的設定。
Perfmatters CSS Setting - 樣式表行為
設定
運作方式
特色
🕒Delay (Default)
稍微延遲載入樣式表。
預設設定,在大多數網站都能穩定運作,對初始轉譯(FCP、LCP)有利。
🚀Async
樣式表以 非同步 方式載入。
不會阻礙 HTML 解析,有提升速度的效果,但部分高度依賴 CSS 的佈景主題要注意。
⚡Remove
完全移除未使用的樣式表。
效能提升效果最大,但部分 UI 元素(選單、動畫等)可能會壞掉,需要測試。
  • Delay = 穩定性與速度的平衡
  • Async = 盡量減少阻礙轉譯
  • Remove = 最大效能提升
設定
速度提升
穩定性
推薦對象
🕒Delay (Default)
⭐⭐⭐
⭐⭐⭐⭐
使用多個外掛時推薦
🚀Async
⭐⭐⭐⭐
⭐⭐
靜態頁面、CSS 依賴度低的網站
⚡Remove
⭐⭐⭐⭐⭐
⭐
自訂佈景主題、實驗性設定
Excluded Stylesheets
設定要保留、不刪除的 CSS。
· 排除特定外掛的全部 CSS 時 ⤵️
/wp-content/plugins/contact-form-7/
· 只排除特定檔案時 ⤵️
/wp-content/plugins/contact-form-7/includes/css/styles.css
Excluded Selectors
排除 CSS 選擇器,指的是套用在 HTML 元素上的 CSS 不列入移除對象。
· 引文區塊 ⤵️
.wp-block-quote
blockquote
· 程式碼區塊 ⤵️
pre
code
.wp-block-preformatted
.wp-block-code
· Astra 佈景主題 ⤵️
/uploads/astra/astra-theme-dynamic-css
/uploads/astra-addon/astra-addon-dynamic-css
· GeneratePress Premium 的 Off-Canvas 行動版選單 ⤵️
/wp-content/plugins/gp-premium/menu-plus/functions/css/offside.min.css
更多選項可以查看 Perfmatters 官方文件的 CSS 移除。
CDN URL
輸入 KeyCdn 或 Bunny CDN 等一般的 CDN,把 CSS 檔案套用到 CDN。Cloudflare 會 在 DNS 層級自動快取所有傳送的資源,所以不用加到這個項目。
Perfmatters CSS Setting - 套用 CDN
CSS › Minify
Perfmatters settings: css minify
↳ 壓縮 CSS 檔案 (Minify CSS)
移除 CSS 檔案中的空白與註解,縮小檔案大小。訪客頁面上外掛功能跑版或沒有顯示等問題時,就把那個 CSS 檔案加進來。
Perfmatters CSS Setting - 壓縮 CSS 檔案
Preloading › Preload
Perfmatters settings: preloading preload
這是把資源 預先載入、加快轉譯速度的功能,能改善首屏顯示(LCP)與換頁速度。由基本的預先載入項目、推測載入、預先連線(Preconnect, DNS Prefetch)3 種組成。
項目
伺服器負載影響
Core Web Vitals 影響(LCP / FCP / TTFB)
Preload
🔸 稍微增加
✅ 改善 LCP / ⚠️ TTFB 沒有變化
Speculative Loading
🔺 中~高
⚡ 改善下一頁的 LCP·FCP / ⛔ 對目前頁面影響很小
Preconnect
🔹 非常小
✅ 改善 FCP·LCP(減少外部資源的連線延遲)
DNS Prefetch
⚪ 幾乎沒有
⚪ 可能小幅改善 FCP(間接效果)
Preload Critical Images
預先載入重要圖片,縮短 LCP(Largest Contentful Paint)時間。
Perfmatters 預先載入 - 圖片預先載入
Chrome 對預先載入的圖片, 最多只有 2 張 會以高優先順序處理,所以 只指定 2~3 張。指定太多會增加伺服器負載,而且圖片比 CSS 先顯示,可能讓 CLS(Cumulative Layout Shift)分數變差。
Preload
預先載入字型等資源,改善 Largest Contentful Paint(LCP)。
Perfmatters settings: preloading preload add new
對象可以在 Google PageSpeed 或 Chrome 開發人員工具的「網路」分頁中找。預先載入太多資源,可能會增加 total blocking time(TBT)。
Cloudflare Early Hints
Early Hints (HTTP 103) 是 讓瀏覽器在伺服器完整產生 HTML 之前就開始載入資源的功能,和預先載入類似,但執行時間點更早。使用 Cloudflare 的話就勾選。
Perfmatters 預先載入 - Cloudflare Early Hints 功能
Fetch Priority
Perfmatters 預先載入 - Fetch Priority 功能
瀏覽器 載入資源的順序,由這個 HTML 屬性指定,設定方式如 [<img fetchpriority="”high”">] 或 [“low”]。 Preload 是強制, Fetch Priority 是建議,所以瀏覽器還有自行判斷的空間。
Perfmatters 預先載入 - Fetch Priority 設定範例
圖片 class 名稱通常以連字號(-)或底線(_)區隔,但如果在 Chrome 開發人員工具中看起來沒有連字號,就照看到的樣子輸入。
Disable Core Fetch
WordPress 6.3 之後,核心會自動在最上方的圖片加上 [<img fetchpriority="”high”">] 屬性,但 不見得每次都能正確辨識 LCP(最大內容)。開啟這個選項會阻止核心的自動設定,改為在 Perfmatters 只套用直接指定的 fetchpriority 值。
Preloading › Speculative Loading
Perfmatters settings: preloading speculative loading
推測載入支援 Auto(Default)、Prefetch、Prerender、Disabled 4 種模式,除了 Disabled 以外的 3 種模式,還可以再從自動(預設值)、保守、一般、積極中選擇。
Perfmatters 預先載入 - 推測載入 4 種模式
模式
說明
特色
Auto (Default)
由 WordPress 核心自動控制推測載入
以預設的 Conservative 等級運作,穩定
Prefetch
預先下載下一頁的資源(不轉譯)
負載小,有改善速度的效果
Prerender
在背景預先轉譯連結目標頁面
換頁速度最快,但伺服器負載大
Disabled
完全停用推測載入功能
移除所有相關程式碼,適合較慢的伺服器或共享主機
Speculative Loading
└─ 模式:Auto(Default),Prefetch,Eagerness
├─ Eagerness 設定
│ ├─ Auto(預設值)
│ ├─ Conservative
│ ├─ Moderate
│ └─ Eager
│
└─ Disabled
Perfmatters 預先載入 - 推測載入_選擇模式後的 4 種設定
Eagerness 等級
說明
特色
Auto(預設值)
由 WordPress 核心自動選擇適當的等級
基本上以 Conservative 等級運作
Conservative
只在點選意圖明確時預先載入
最穩定,有利於節省資源
Moderate
滑鼠懸停(約 200ms)時預先載入
速度與效率的平衡良好
Eager
訊號很弱也會立即預先載入
最快,但資源用量大
考量到會大量使用伺服器 CPU 資源,或讓整體網站速度變慢,再進行設定。
Perfmatters 預先載入 - 推測載入建議設定
快取外掛的 [Preload Links](Instant Page / Prefetch)是滑鼠移到連結上時預先取得頁面的功能。推測載入的伺服器效率更好,所以兩者只用一個;如果使用推測載入,就停用快取外掛的連結預先載入。
類別
Instant Page (Prefetch)
Speculative Loading
技術方式
用 JavaScript 在 [<a>] 標籤 hover 時預先 fetch
以瀏覽器原生的 Speculation Rules API 為基礎
運作時間點
使用者把滑鼠移到連結上時
瀏覽器自動預測「前往的可能性」(hover、點選、觸控等各種訊號)
載入範圍
只預先取得連結頁面的 HTML
Prefetch(只有資源)+ Prerender(連轉譯)都可以
套用層級
單一 fetch 層級(以 JavaScript 為主)
在瀏覽器內部做網路與轉譯層級的優化
WordPress
整合
以外部腳本為基礎(instant.page)
整合進 WordPress 6.8 核心
效能效率
快,但無法控制瀏覽器
更快更穩定,節省資源
Preloading › Connection
Perfmatters settings: preloading connection
這是在請求外部資源之前, 預先準備好網路連線的功能。
項目
說明
Preconnect
預先建立與外部資源(字型、CDN、分析腳本等)的網路連線。
瀏覽器在 HTTP 請求之前提早建立連線,消除往返延遲時間。
DNS Prefetch
在使用者點選之前先解析網域名稱。想再稍微縮短 DNS 查詢時間時使用。
Perfmatters 預先載入 - 連線設定
Perfmatters 預先載入 - Preconnect、Prefetch 使用範例_uknew
Preconnect 項目全部都套用的話,會對伺服器資源造成負擔,所以只設定 2~3 個左右。
//encrypted-tbn1.gstatic.com
//encrypted-tbn2.gstatic.com
//ep1.adtrafficquality.google
//fundingchoicesmessages.google.com
//pagead2.googlesyndication.com
//tpc.googlesyndication.com
//www.googleadservices.com
//googleads.g.doubleclick.net
//www.google.co.kr
//www.googletagservices.com
//www.youtube.com
//analytics.google.com
//www.google-analytics.com
大多數快取外掛都有 Preconnect / Prefetch 功能,所以和快取外掛一起使用時,就把這兩個功能關掉。
Preconnect/DNS Prefetch
套用
Perfmatters 單獨使用時
Check
和快取外掛一起使用時
Uncheck
Lazy Loading › Images
Perfmatters settings: lazy loading images
如果說 Preload 是要立刻顯示在畫面上的檔案,Lazy Load 就是捲動後才顯示的圖片。它會把載入延後到使用者往下捲動、實際需要看到圖片的時候。
它實作了 Google PageSpeed 建議的 [延後載入畫面外圖片] 方式,所以 不會影響 SEO。
Images
Preload Critical Images 功能已經會預先載入上方 2 張圖片,並自動從 LazyLoad 排除,所以如果再另外設定 Exclude Leading Images,重複的處理可能會造成資源浪費。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
延遲載入不適用於背景圖片。
iFrames and Videos
延遲載入 iframe 與影片的功能,適用於 YouTube、Vimeo、SoundCloud、Google Maps 等嵌入內容,以及用 [<video>] 標籤插入的影片。
Perfmatters settings: lazy loading iframes and videos
有 YouTube 影片的話,就啟用 預覽縮圖功能。它不會載入實際的 iframe,而是顯示 輕量的縮圖與 SVG 播放圖示,只有點選時才載入 iframe,藉此減少 TBT(總封鎖時間)。
Exclude from Lazy Loading
代表圖片或 Logo 這類頁面一打開就該顯示的圖片若被延遲, 畫面會看起來空白或出現閃爍;如果是計入 LCP 的圖片, 分數會變差。要排除的話,輸入該圖片的 檔案路徑(example.png) 或 class 名稱(class=”example”)。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
  • 如果正在使用 GeneratePress 佈景主題,要排除 Logo 時,輸入 [is-logo-image] class 即可。
  • 要排除部落格文章的精選圖片(縮圖),輸入 [class=”attachment-full size-full”] class 即可。
ShortPixel 或 Imagify 這類提供 WebP 圖片的外掛如果正在使用,圖片就會以 [<picture>] 標籤輸出。輸入整個標籤會排除網站內的所有圖片,所以盡可能 指定特定的 class 或路徑。
picture
.is-logo-image
.featured-image
/uploads/header/
Exclude by Parent Selector
精選圖片或圖庫這類圖片標籤沒有獨特 class 時,用上層容器的 class 來排除的選項。
Perfmatters - Lazy Loading_延遲載入排除_用父選擇器全域排除
例如上層選擇器如下時,
&lt;div class=”featured-gallery”>
&lt;img src=”image1.jpg”>
&lt;/div>
就像下面這樣輸入。
featured-gallery
Threshold
調整門檻值(Threshold),讓圖片在顯示到畫面上前稍早一點預先載入。
Perfmatters - Lazy Loading_門檻值設定
預設值是 0px,想減少捲動時圖片突然出現的感覺,就把它設為 100px 或 200px, 稍微加大一點。 Mediavine、AdThrive 等廣告腳本較多的網站,至少設為 300px 以上。
DOM Monitoring
偵測頁面上新增的元素, 自動對新加入的圖片或 iframe 等套用 LazyLoad的功能。頁籤、無限捲動、輪播、AJAX 分頁這類 有動態內容的網站才需要它。
Perfmatters - DOM Monitoring
DOMContentLoaded 是初始 DOM 完成的時間點,DOM Monitoring 則是偵測之後的變化。
Add Image Dimensions
為圖片加上缺少的寬度與高度。
Perfmatters settings: lazy loading add image dimensions
Fade In
這是把圖片突然顯示的效果 換成平順轉場的視覺輔助功能。
Perfmatters - Lazy Loading_Fade In
⚙️Lazy Loading 建議設定
Lazy Loading 中說明的建議設定如下。
選項
建議狀態
說明
Images
Check
對所有圖片套用 Lazy Load
Exclude Leading Images
⚙️ 0 (Default)
如果 PreLoad 已設定圖片數量,就維持 0
iFrames and Videos
Check
延遲載入 YouTube、嵌入影片
YouTube Preview Thumbnails
Check
先只載入縮圖,點選影片時才載入本體
Exclude from Lazy Loading
⛔ 留空
需要排除特定檔案時手動指定
Exclude by Parent Selector
⛔ 留空
需要排除特定容器時手動指定
Threshold
📏 300
在接近可視區域時開始預先載入
DOM Monitoring
Check
動態變更 DOM 時維持 Lazy Load
Add Image Dimensions
Check
防止 CLS(自動加上 width/height)
Fade In
Check
平順的淡入效果(提升 UX)
Lazy Loading › CSS Background Images
Perfmatters settings: lazy loading css background images
CSS Background Images
可以延遲載入 CSS 樣式表中的背景圖片。
Perfmatters - Lazy Loading_納入 CSS Background Images
在背景選擇器中,輸入含有背景圖片的容器,或在父容器中找到的特定 ID 或 class。不加前綴([.]、[#]),一行輸入一個。
Exclude Leading 會從第一個載入的項目開始,把特定數量的背景圖片容器排除在延遲載入之外。背景圖片用得多時,就使用 Exclude Leading 功能。
Perfmatters - Lazy Loading_排除 CSS Background Images
選項
建議狀態
說明
Background Images
Check
延遲載入 CSS [background-image:] 屬性。(例:Hero 區塊背景)
Background Selectors
⛔ 留空
只有指定特定背景 class(.div-background-class)時才輸入
Exclude Leading
⚙️ 0 (Default)
第一張背景圖片立即載入(主要 Hero 等)
Lazy Loading › Lazy Elements
Perfmatters settings: lazy loading lazy elements
Lazy Elements
啟用 DOM 中的元素延遲。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
DOM(Document Object Model)是瀏覽器解析 HTML 文件後建立的 元素樹狀結構,結構越大, 記憶體用量, 樣式計算時間, 版面重新計算(Reflow) 的成本就越高。
類別
內文(body)中的節點數
狀態
正常
800 個以下
🟢 正常
警告
超過約 800 個
🟠 注意
錯誤
超過約 1,400 個
🔴 警告
大多數快取外掛都沒有這個功能,所以和快取外掛一起使用時也要啟用。也可以指定特定元素與父容器。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
選項
建議狀態
說明
Elements
Check
對 HTML 元素本身套用 Lazy Load(縮小 DOM 大小、減輕初始轉譯負擔)
Element Selectors
⛔ 留空
只有想對特定容器或區塊做元素延遲載入時才輸入
Fonts
Perfmatters settings: fonts
Fonts 分頁的主要功能,分為是否改由本機載入 Google 字型,以及是否停用 Google 字型。
Local Google Fonts vs. 停用 Google Fonts
Local Google Fonts
Perfmatters settings: fonts local google fonts
使用 Local Google Fonts 時,要停用其他佈景主題或快取外掛中的相同功能。
停用 Google Fonts
Perfmatters settings: fonts disable google fonts
把 Google Fonts 放在本機託管,就不必從外部(Google 伺服器)載入,而是 儲存在網站本機直接託管,網路請求減少,對 LCP 的改善也有幫助。
停用 Google Fonts 會直接封鎖 Google Fonts,改用 瀏覽器預設字型(例:Arial、Helvetica、sans-serif)取代。網路請求最少,但 可能破壞設計的一致性。
Display Swap
即使網頁字型還沒載入,瀏覽器也會 先用系統預設字型顯示文字,使用者能立即閱讀內容, LCP 與體感速度都會改善。對 CLS 沒有改善效果。
Local Google Fonts - Display Swap
Print Method
Local Google Fonts - Print Method
本機樣式表的輸出方式預設為檔案(File),改成行內(Inline)的話,會把 CSS 直接插入 HTML 內部, 有助於減少阻礙轉譯、改善 FCP 與 LCP。不過 頁面容量會稍微增加。
Limit Subsets
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法
只載入需要的字元集,縮小字型檔案的容量。 沒選的語言的文字可能不會顯示,所以一般的設定是在 Latin(Default) 之外再加上自己國家的一種語言。
多語系外掛有使用的話,改用能在快取中一併處理所有 Google 字型與 Display Swap 的快取外掛會是更好的選擇。
CDN URL
使用 Cloudflare CDN 以外的一般 CDN 時,可以輸入 URL,把本機字型套用到 CDN。
Local Google Fonts - CDN URL
清除本機字型
清除 Local Google Fonts
變更佈景主題、選了其他字型,或在快取外掛中選了其他字型時,就刪除本機字型。
⤵️ Fonts 建議設定
項目
建議狀態
說明
Local Google Fonts
Check
不從外部(Google 伺服器)載入 Google Fonts,而是儲存在網站本機直接託管。網路請求減少、字型載入延遲降低, 有助於改善 LCP。
Display Swap
Check
在網頁字型載入前先顯示系統預設字型,減少 文字閃爍(FOUT) 的情況。改善 LCP 與體感載入速度,但對 CLS 沒有改善效果。
Print Method
Check
預設是 File 方式,選擇 Inline 時會把 CSS 插入 HTML 內部, 盡量減少阻礙轉譯 與 改善 FCP/LCP,較為有利。不過 HTML 容量可能會稍微增加。
Limit Subsets
Check
只載入需要的字元集, 縮小字型容量、改善載入速度。例:選 [Latin(Default)] + [Korean]。西班牙文包含在 Latin 中,不需要另外加。印度的語言需要另外的 subset(Devanagari 等)。使用多語系外掛時也建議維持。
CDN URL
⚙️ 選用
使用 Cloudflare 以外的 CDN 時可以指定路徑。一般維持空白。
Clear Local Fonts
🔁 需要時執行
變更佈景主題、更換字型,或變更快取外掛時,刪除既有的本機字型並建立新快取。
Google Fonts
停用
Uncheck
完全封鎖 Google Fonts 會讓外部請求消失,但佈景主題指定的字型會全部被移除,改用 預設字型(Arial 等) 取代。設計的一致性可能會被破壞,所以 使用 Local Google Fonts 時維持停用狀態是建議的做法。
CDN
Perfmatters settings: cdn
CDN URL 重寫會依序在輸入 URL 後,加入要包含的目錄來運作。設定 wp-content、wp-includes 兩項時,所有圖片、CSS、JS、字型都會透過 CDN 傳送,也可以把想排除的檔案排除在 CDN 之外。
Perfmatters - CDN 排除檔案範例
Analytics
Perfmatters settings: analytics
可以用 Google 推出的 Site Kit 這類外掛連接 Google Analytics。但安裝 Site Kit 外掛後,只要做一次 Google PageSpeed Insights 檢測,就能感受到效能下降。需要連接 Google Analytics 並用本機設定提升速度時,再啟用。
包含 Site Kit 在內, Yoast 與 RankMath 這類 SEO 外掛的 Google Analytics 如果分別設定,HTTP 請求會從 1 個變成 2 個,所以只在其中一邊選擇使用。
Code › Snippets
Perfmatters settings: code snippets
登記 PHP、CSS、JS、HTML 程式碼片段,並可開啟或關閉的地方。用 [New Snippet] 新增。
防止 Claude MCP 連線錯誤的片段,設定如下。
<> Code
All Snippets / MCP REST API exception
ActiveSave Snippet
Name
MCP REST API exception
Location
Everywhere⌄
Type
PHPJSCSSHTML
Code
<?php
1// Let WP Rocket MCP (OAuth) requests through the Perfmatters REST API restriction
2add_filter('perfmatters_rest_api_exceptions', function($exceptions) {
3 $exceptions[] = '/mcp/mcp-oauth-server';
4 return $exceptions;
5});
  1. ①在 [Code] 選單按 [New Snippet]。
  2. ②輸入名稱,[Location] 維持 [Everywhere]、[Type] 維持 [PHP]。
  3. ③用這個畫面的 [Copy] 取得程式碼,貼到 [<?php] 那一行下面的程式碼欄位。
  4. ④把開關切到 [Active],再按 [Save Snippet]。
Code › Global Scripts
Perfmatters settings: code global scripts
填寫要放進全站 header、body、footer 的程式碼的欄位。用在分析、驗證標籤這類每個頁面都要有的程式碼。
Code › Settings
Perfmatters settings: code settings
有程式碼片段的匯出與匯入、編輯器佈景主題、Safe Mode。網站因為程式碼片段打不開時,可以從 Recovery URL 進去關閉。
Tools › Plugin
Perfmatters settings: tools plugin
工具分頁中的其他功能都是選用的,看下面的圖片就能充分了解。要啟用的有兩項:腳本管理器,以及目前為止說明過的設定中所包含的進階選項。
Tools › Settings
Perfmatters settings: tools settings
Database
Perfmatters settings: database
快取外掛沒有提供資料庫優化時,可以使用 Perfmatters 的功能;用哪一邊都行,選比較順手的那一邊即可。
Perfmatters 外掛評價 & 教學:使用 5 年的 WordPress 效能優化設定方法

Ⅲ. Perfmatters Script Manager 使用方法

Perfmatters 的 Script Manager,要在管理後台按下「造訪網站」按鈕後才能使用。依使用中的佈景主題或外掛不同,管理畫面的構成可能不一樣;不需要的腳本,可以把該項目的啟用按鈕關掉,讓它不載入。

例如,Perfmatters 一般設定中可以停用的 Dashicons 先保留,需要只在特定頁面停用時,就可以在 Script Manager 中停用。

Perfmatters: script manager disabled options

Ⅳ. 結論 & FAQ

Perfmatters 不只是單純移除腳本與資源的 [速度改善用外掛], 而是控制 WordPress 整體結構的低效率、同時提高網站穩定性與管理效率的工具。

重要的不是 [開啟所有功能], 而是了解網站的性質與外掛結構,有選擇地套用。

Perfmatters 是 控制不必要的程式碼與請求、讓網站結構本身變輕的外掛。它透過控制 CSS、JS、字型、圖片的載入方式,提高 Core Web Vitals 分數並降低伺服器負載。

Perfmatters 是 [提升整個網站效能用],Asset CleanUp 則是 [控制個別資源用]。

一般的 WordPress 經營者, 選 Perfmatters 會更實用、更穩定。

最有效的組合是 WP Rocket + Perfmatters。

WP Rocket 負責快取、壓縮、預先載入等靜態優化,Perfmatters 則以程式碼、資源、請求控制負責動態優化,兩者不會重疊。

🧭 WP Rocket · Perfmatters 相關文章 文章 11 · 工具 3
📋 WP Rocket 設定教學 📄 Perfmatters 教學 📄 WP Rocket With Perfmatters 📄 WP Rocket MCP Server
📄 WP Rocket 速度測試 📝 快取 · 優化外掛 📝 速度改善案例
📋 快取:定義與所有領域 📄 網站快取 & 伺服器內部快取
📋 BEST 主機 TOP 7 📄 快速主機 2026
🛠️ WordPress 偵測 🛠️ WHOIS 網域查詢 🛠️ 我的 IP 查詢

ℹ️ 聯盟行銷說明
本站內容包含聯盟行銷連結。訪客透過這些連結購買商品或服務時,本站會從賣家獲得佣金。在這個過程中,購買者支付的金額(遇到活動折扣時金額會降低↓)並不會因此提高。刊登的價格、折扣與庫存資訊以撰寫當時為準,可能與實際情況不同,購買前請向賣家做最後確認。商品的挑選與評價依本站自訂的標準撰寫,是否支付佣金不會影響介紹順序或評價內容。

發佈留言

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

Prove your humanity: 8   +   10   =