General › Core
Perfmatters 是沒有快取功能的優化專用外掛。光靠一般設定分頁的優化功能,就能大幅提升網站效能。
Remove jQuery Migrate
與舊程式碼的通訊:不需要的程式碼
Remove RSD Link
外部應用程式與 WordPress 網站通訊
開啟 Disable XML-RPC 後,這一列會從畫面上消失。
Remove Shortlink
舊版 WordPress 的做法
Disable RSS Feeds
要提供 RSS 訂閱給其他網站時 Uncheck
不提供時 Check
Remove RSS Feed Links
只有勾選 Disable RSS Feeds 時才移除連結(Check)
Remove REST API Links
和停用是完全不同的概念,
是刪除連結本身
Disable Comments
不使用留言功能時 Check
Add Blank Favicon
通常已經設定好網站圖示,所以 Uncheck
給佈景主題、外掛開發者用的功能
Block Style Behavior
提升 CSS 效率
Disable Heartbeat & Revisions
Disable Emojis
WordPress 預設的表情符號功能會另外載入一個 JavaScript(wp-emoji-release.min.js)檔案,產生不必要的請求;勾選後就不會載入這個腳本。
文章內的一般表情符號由瀏覽器直接繪製,所以不受影響。不過 直接在頁首或頁尾插入表情符號時 部分佈景主題可能會出現顯示錯誤。
Disable Dashicons
Disable Embeds
Disable XML-RPC
XML-RPC 功能容易受到暴力破解等攻擊,所以勾選以停用。只有在使用 JetPack 這類會用到 XML-RPC 的外掛時,才維持啟用。
Remove jQuery Migrate
讓舊程式碼與新程式碼能互相通訊的程式碼,實際上用不到,所以勾選以移除。
Hide WP Version
WordPress 版本一旦曝光,漏洞就更容易被找到,所以勾選以移除。
Remove RSD Link
RSD Link 只有透過 XML-RPC 連線的外部程式或行動 App 才需要,所以勾選以移除。
Remove Shortlink
永久連結已設定好的話,就不需要保留短網址,所以勾選以移除。
Shortlink
[https://domain.com/?p=123]
以文章 ID 為基礎的預設連結,舊版 WordPress 的預設形式。
Permalink
[https://domain.com/post-name/]
人容易閱讀的形式,現在大多數網站的標準。
不提供 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。
因此 只對未登入的使用者(登出狀態)停用是最安全的設定,而且比起速度,對安全性的正面影響更大。
如果是一個人經營,就選 [Disable for Non-Admins];如果還有其他作者,就選 [Disable When Logged Out]。
套用 Disable REST API(Logged Out)時,即使 Claude 等 AI 的連線已獲得核准,也可能發生錯誤。
連接 Claude MCP 時如果發生錯誤,在程式碼片段中加入下面的設定即可。
Remove REST API Links
這不是關閉 REST API 功能本身,而是只刪除頁面標頭中相關連結的 meta 標籤,減少不必要的請求。
Disable Google Maps
有些佈景主題或外掛,連不使用地圖的頁面也會自動載入 Google Maps API 腳本;勾選後會封鎖這個腳本,減少外部請求。
如果有文章含有 Google 地圖,可以在 [Exclude Locations] 填入文章 ID 等,讓那篇文章的地圖不會被停用。
Disable Password Meter
密碼強度檢測腳本原本只會在 註冊會員、變更密碼、編輯使用者個人資料 畫面載入,但佈景主題或外掛若在所有頁面加入登入彈出視窗這類表單,[zxcvbn.min.js] 就會在全站載入。
/wp-includes/js/zxcvbn.min.js
/wp-admin/js/password-strength-meter.min.js
勾選以停用。實際上幾乎用不到這個檔案。
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 為中心)的架構,就可能發生樣式衝突。
❌ 以 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
只允許文章與頁面
內容修訂(Revisions)維持預設值的話,會一直累積在資料庫中拖慢速度,所以只允許保留 3 個。
文章自動儲存的間隔預設是 1 分鐘,這裡設為 10 分鐘。
在管理後台撰寫文章時,如果大量使用伺服器 CPU,不管用哪個快取外掛,訪客頁面的速度都可能變慢。不使用 Perfmatters 的話,也可以在 wp-config.php 中直接設定上述項目。
General › Login URL
Login URL 設定
取代其他隱藏登入網址的外掛
登入網址設定
WordPress 管理後台預設是 yourdomain.com/wp-admin,安全上是脆弱的結構。可以使用 Perfmatters 提供的功能,取代其他隱藏管理後台的外掛。
Login URL
Login URL 選項
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
↳ 延遲執行 JavaScript (Delay JavaScript execution)
這個選項會在頁面載入後, 直到使用者互動(捲動、點選、觸控等)之前 暫停 JavaScript 的執行,把廣告、分析、外部追蹤腳本等非必要的 JavaScript 延後,以改善 LCP(Largest Contentful Paint)與 FCP。
如果說 [Defer] 是在 HTML 解析後執行,[Delay] 則是把執行本身延後到使用者有動作為止。自動播放或初始彈出視窗這類必須立即運作的 腳本要設為例外。
Delay JavaScript 啟用時,建議同時啟用底下 3 個選項。
Delay Behavior
不是延遲所有 JS,只延遲「非必要腳本」
建議:[Only Delay Specified Scripts (Default)]
Delay Timeout
使用者沒有任何動作,經過一段時間後也會自動執行
(廣告、統計用,預設 15 秒)
Disable Click Delay
點選後立即回應(改善 INP,避免 UX 延遲)
Enable FastClick
消除行動裝置上的點選回應延遲(避免 iOS 觸控延遲)
Delay Behavior
決定只延遲指定的腳本,還是延遲所有 JavaScript。
✅ 只對特定檔案套用延遲執行
✅ 對所有檔案套用延遲執行
延遲執行所有檔案可能會讓特定外掛或佈景主題出問題,可以在 [Quick Exclusions] 選擇已安裝的外掛與佈景主題來排除。清單上沒有的話,就直接在 [Excluded from Delay] 輸入。
Delay Timeout
即使使用者沒有任何動作(點選、捲動等), 經過一段時間後 就會自動執行被延遲的 JavaScript。預設為 15 秒。
Disable Click Delay
在延遲執行狀態下,使用者要先點選某個東西,JS 才會載入,接著才執行點選的動作(開啟選單、按鈕動作等),所以點選後的回應可能會稍微變慢。這個選項就是 消除這種回應延遲的功能。
情況
預設 Delay JS 狀態
啟用 Disable Click Delay 時
使用者點選
JS 載入後才執行點選事件 → 產生些微延遲
JS 立即執行 → 點選回應快
Enable FastClick
開啟延遲執行後,可能會出現要點兩次才有反應的現象,所有快取與優化外掛都有這個共同問題。這個選項可以改善它。
JavaScript › Minify
↳ 壓縮 JavaScript (Minify JavaScript)
移除 JavaScript 檔案中不必要的字元(空白、換行、註解等), 把檔案大小降到最小的功能,同時減少傳輸容量與語法解析(Parsing)時間。
已經壓縮過的檔案,檔名結尾是 [.min.js]。如果 Google PageSpeed Insights 或 Lighthouse 出現 [壓縮 JavaScript] 警告,就啟用這個選項,連沒壓縮的腳本也一起壓縮。
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 可以 以行內形式插入,或拆成獨立檔案載入。
Inline(預設值):直接把需要的 CSS 插入 HTML 文件中。沒有外部 CSS 請求,對 FCP 與 LCP 有利,但每個頁面的 HTML 都會變大。推薦給 CSS 容量小的部落格型網站。
File:把使用中的 CSS 做成獨立的 .css 檔案載入。可以利用瀏覽器快取,但會多一個外部請求。推薦給大型網站或 CSS 容量大的建構器型頁面。
Stylesheet Behavior
樣式表行為選項是 決定用什麼方式處理不必要 CSS 檔案的設定。
🕒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
CDN URL
輸入 KeyCdn 或 Bunny CDN 等一般的 CDN,把 CSS 檔案套用到 CDN。Cloudflare 會 在 DNS 層級自動快取所有傳送的資源,所以不用加到這個項目。
CSS › Minify
↳ 壓縮 CSS 檔案 (Minify CSS)
移除 CSS 檔案中的空白與註解,縮小檔案大小。訪客頁面上外掛功能跑版或沒有顯示等問題時,就把那個 CSS 檔案加進來。
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)時間。
Chrome 對預先載入的圖片, 最多只有 2 張 會以高優先順序處理,所以 只指定 2~3 張。指定太多會增加伺服器負載,而且圖片比 CSS 先顯示,可能讓 CLS(Cumulative Layout Shift)分數變差。
Preload
預先載入字型等資源,改善 Largest Contentful Paint(LCP)。
對象可以在 Google PageSpeed 或 Chrome 開發人員工具的「網路」分頁中找。預先載入太多資源,可能會增加 total blocking time(TBT)。
Cloudflare Early Hints
Early Hints (HTTP 103) 是 讓瀏覽器在伺服器完整產生 HTML 之前就開始載入資源的功能,和預先載入類似,但執行時間點更早。使用 Cloudflare 的話就勾選。
Fetch Priority
瀏覽器 載入資源的順序,由這個 HTML 屬性指定,設定方式如 [<img fetchpriority="”high”">] 或 [“low”]。 Preload 是強制, Fetch Priority 是建議,所以瀏覽器還有自行判斷的空間。
圖片 class 名稱通常以連字號(-)或底線(_)區隔,但如果在 Chrome 開發人員工具中看起來沒有連字號,就照看到的樣子輸入。
Disable Core Fetch
WordPress 6.3 之後,核心會自動在最上方的圖片加上 [<img fetchpriority="”high”">] 屬性,但 不見得每次都能正確辨識 LCP(最大內容)。開啟這個選項會阻止核心的自動設定,改為在 Perfmatters 只套用直接指定的 fetchpriority 值。
Preloading › Speculative Loading
推測載入支援 Auto(Default)、Prefetch、Prerender、Disabled 4 種模式,除了 Disabled 以外的 3 種模式,還可以再從自動(預設值)、保守、一般、積極中選擇。
Auto (Default)
由 WordPress 核心自動控制推測載入
以預設的 Conservative 等級運作,穩定
Prefetch
預先下載下一頁的資源(不轉譯)
負載小,有改善速度的效果
Prerender
在背景預先轉譯連結目標頁面
換頁速度最快,但伺服器負載大
Disabled
完全停用推測載入功能
移除所有相關程式碼,適合較慢的伺服器或共享主機
Speculative Loading
└─ 模式:Auto(Default),Prefetch,Eagerness
├─ Eagerness 設定
│ ├─ Auto(預設值)
│ ├─ Conservative
│ ├─ Moderate
│ └─ Eager
│
└─ Disabled
Auto(預設值)
由 WordPress 核心自動選擇適當的等級
基本上以 Conservative 等級運作
Conservative
只在點選意圖明確時預先載入
最穩定,有利於節省資源
Moderate
滑鼠懸停(約 200ms)時預先載入
速度與效率的平衡良好
Eager
訊號很弱也會立即預先載入
最快,但資源用量大
考量到會大量使用伺服器 CPU 資源,或讓整體網站速度變慢,再進行設定。
快取外掛的 [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
這是在請求外部資源之前, 預先準備好網路連線的功能。
Preconnect
預先建立與外部資源(字型、CDN、分析腳本等)的網路連線。
瀏覽器在 HTTP 請求之前提早建立連線,消除往返延遲時間。
DNS Prefetch
在使用者點選之前先解析網域名稱。想再稍微縮短 DNS 查詢時間時使用。
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
套用
Lazy Loading › Images
如果說 Preload 是要立刻顯示在畫面上的檔案,Lazy Load 就是捲動後才顯示的圖片。它會把載入延後到使用者往下捲動、實際需要看到圖片的時候。
它實作了 Google PageSpeed 建議的 [延後載入畫面外圖片] 方式,所以 不會影響 SEO。
Images
Preload Critical Images 功能已經會預先載入上方 2 張圖片,並自動從 LazyLoad 排除,所以如果再另外設定 Exclude Leading Images,重複的處理可能會造成資源浪費。
延遲載入不適用於背景圖片。
iFrames and Videos
延遲載入 iframe 與影片的功能,適用於 YouTube、Vimeo、SoundCloud、Google Maps 等嵌入內容,以及用 [<video>] 標籤插入的影片。
有 YouTube 影片的話,就啟用 預覽縮圖功能。它不會載入實際的 iframe,而是顯示 輕量的縮圖與 SVG 播放圖示,只有點選時才載入 iframe,藉此減少 TBT(總封鎖時間)。
Exclude from Lazy Loading
代表圖片或 Logo 這類頁面一打開就該顯示的圖片若被延遲, 畫面會看起來空白或出現閃爍;如果是計入 LCP 的圖片, 分數會變差。要排除的話,輸入該圖片的 檔案路徑(example.png) 或 class 名稱(class=”example”)。
- 如果正在使用 GeneratePress 佈景主題,要排除 Logo 時,輸入 [is-logo-image] class 即可。
- 要排除部落格文章的精選圖片(縮圖),輸入 [class=”attachment-full size-full”] class 即可。
ShortPixel 或
Imagify 這類提供 WebP 圖片的外掛如果正在使用,圖片就會以 [
<picture>] 標籤輸出。輸入整個標籤會排除網站內的所有圖片,所以盡可能
指定特定的 class 或路徑。
.is-logo-image
.featured-image
/uploads/header/
Exclude by Parent Selector
精選圖片或圖庫這類圖片標籤沒有獨特 class 時,用上層容器的 class 來排除的選項。
例如上層選擇器如下時,
<div class=”featured-gallery”>
<img src=”image1.jpg”>
</div>
就像下面這樣輸入。
Threshold
調整門檻值(Threshold),讓圖片在顯示到畫面上前稍早一點預先載入。
預設值是 0px,想減少捲動時圖片突然出現的感覺,就把它設為 100px 或 200px, 稍微加大一點。 Mediavine、AdThrive 等廣告腳本較多的網站,至少設為 300px 以上。
DOM Monitoring
偵測頁面上新增的元素, 自動對新加入的圖片或 iframe 等套用 LazyLoad的功能。頁籤、無限捲動、輪播、AJAX 分頁這類 有動態內容的網站才需要它。
Add Image Dimensions
為圖片加上缺少的寬度與高度。
Fade In
這是把圖片突然顯示的效果 換成平順轉場的視覺輔助功能。
⚙️Lazy Loading 建議設定
Lazy Loading 中說明的建議設定如下。
Exclude Leading Images
⚙️ 0 (Default)
如果 PreLoad 已設定圖片數量,就維持 0
iFrames and Videos
延遲載入 YouTube、嵌入影片
YouTube Preview Thumbnails
先只載入縮圖,點選影片時才載入本體
Exclude from Lazy Loading
⛔ 留空
需要排除特定檔案時手動指定
Exclude by Parent Selector
⛔ 留空
需要排除特定容器時手動指定
Threshold
📏 300
在接近可視區域時開始預先載入
DOM Monitoring
動態變更 DOM 時維持 Lazy Load
Add Image Dimensions
防止 CLS(自動加上 width/height)
Lazy Loading › CSS Background Images
CSS Background Images
可以延遲載入 CSS 樣式表中的背景圖片。
在背景選擇器中,輸入含有背景圖片的容器,或在父容器中找到的特定 ID 或 class。不加前綴([.]、[#]),一行輸入一個。
Exclude Leading 會從第一個載入的項目開始,把特定數量的背景圖片容器排除在延遲載入之外。背景圖片用得多時,就使用 Exclude Leading 功能。
Background Images
延遲載入 CSS [background-image:] 屬性。(例:Hero 區塊背景)
Background Selectors
⛔ 留空
只有指定特定背景 class(.div-background-class)時才輸入
Exclude Leading
⚙️ 0 (Default)
第一張背景圖片立即載入(主要 Hero 等)
Lazy Loading › Lazy Elements
Lazy Elements
啟用 DOM 中的元素延遲。
大多數快取外掛都沒有這個功能,所以和快取外掛一起使用時也要啟用。也可以指定特定元素與父容器。
Elements
對 HTML 元素本身套用 Lazy Load(縮小 DOM 大小、減輕初始轉譯負擔)
Element Selectors
⛔ 留空
只有想對特定容器或區塊做元素延遲載入時才輸入
Fonts
Fonts 分頁的主要功能,分為是否改由本機載入 Google 字型,以及是否停用 Google 字型。
Local Google Fonts vs. 停用 Google Fonts
Local Google Fonts
使用 Local Google Fonts 時,要停用其他佈景主題或快取外掛中的相同功能。
停用 Google Fonts
把 Google Fonts 放在本機託管,就不必從外部(Google 伺服器)載入,而是 儲存在網站本機直接託管,網路請求減少,對 LCP 的改善也有幫助。
停用 Google Fonts 會直接封鎖 Google Fonts,改用 瀏覽器預設字型(例:Arial、Helvetica、sans-serif)取代。網路請求最少,但 可能破壞設計的一致性。
Display Swap
即使網頁字型還沒載入,瀏覽器也會 先用系統預設字型顯示文字,使用者能立即閱讀內容, LCP 與體感速度都會改善。對 CLS 沒有改善效果。
Print Method
本機樣式表的輸出方式預設為檔案(File),改成行內(Inline)的話,會把 CSS 直接插入 HTML 內部, 有助於減少阻礙轉譯、改善 FCP 與 LCP。不過 頁面容量會稍微增加。
Limit Subsets
只載入需要的字元集,縮小字型檔案的容量。 沒選的語言的文字可能不會顯示,所以一般的設定是在 Latin(Default) 之外再加上自己國家的一種語言。
多語系外掛有使用的話,改用能在快取中一併處理所有 Google 字型與
Display Swap 的快取外掛會是更好的選擇。
CDN URL
使用 Cloudflare CDN 以外的一般 CDN 時,可以輸入 URL,把本機字型套用到 CDN。
清除本機字型
變更佈景主題、選了其他字型,或在快取外掛中選了其他字型時,就刪除本機字型。
⤵️ Fonts 建議設定
Local Google Fonts
不從外部(Google 伺服器)載入 Google Fonts,而是儲存在網站本機直接託管。網路請求減少、字型載入延遲降低, 有助於改善 LCP。
Display Swap
在網頁字型載入前先顯示系統預設字型,減少 文字閃爍(FOUT) 的情況。改善 LCP 與體感載入速度,但對 CLS 沒有改善效果。
Print Method
預設是 File 方式,選擇 Inline 時會把 CSS 插入 HTML 內部, 盡量減少阻礙轉譯 與 改善 FCP/LCP,較為有利。不過 HTML 容量可能會稍微增加。
Limit Subsets
只載入需要的字元集, 縮小字型容量、改善載入速度。例:選 [Latin(Default)] + [Korean]。西班牙文包含在 Latin 中,不需要另外加。印度的語言需要另外的 subset(Devanagari 等)。使用多語系外掛時也建議維持。
CDN URL
⚙️ 選用
使用 Cloudflare 以外的 CDN 時可以指定路徑。一般維持空白。
Clear Local Fonts
🔁 需要時執行
變更佈景主題、更換字型,或變更快取外掛時,刪除既有的本機字型並建立新快取。
Google Fonts
停用
完全封鎖 Google Fonts 會讓外部請求消失,但佈景主題指定的字型會全部被移除,改用 預設字型(Arial 等) 取代。設計的一致性可能會被破壞,所以 使用 Local Google Fonts 時維持停用狀態是建議的做法。
CDN
CDN URL 重寫會依序在輸入 URL 後,加入要包含的目錄來運作。設定 wp-content、wp-includes 兩項時,所有圖片、CSS、JS、字型都會透過 CDN 傳送,也可以把想排除的檔案排除在 CDN 之外。
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
登記 PHP、CSS、JS、HTML 程式碼片段,並可開啟或關閉的地方。用 [New Snippet] 新增。
防止 Claude MCP 連線錯誤的片段,設定如下。
<> Code
All Snippets / MCP REST API exception
ActiveSave Snippet④
- ①在 [Code] 選單按 [New Snippet]。
- ②輸入名稱,[Location] 維持 [Everywhere]、[Type] 維持 [PHP]。
- ③用這個畫面的 [Copy] 取得程式碼,貼到 [<?php] 那一行下面的程式碼欄位。
- ④把開關切到 [Active],再按 [Save Snippet]。
Code › Global Scripts
填寫要放進全站 header、body、footer 的程式碼的欄位。用在分析、驗證標籤這類每個頁面都要有的程式碼。
Code › Settings
有程式碼片段的匯出與匯入、編輯器佈景主題、Safe Mode。網站因為程式碼片段打不開時,可以從 Recovery URL 進去關閉。
Tools › Plugin
工具分頁中的其他功能都是選用的,看下面的圖片就能充分了解。要啟用的有兩項:腳本管理器,以及目前為止說明過的設定中所包含的進階選項。
Database
快取外掛沒有提供資料庫優化時,可以使用 Perfmatters 的功能;用哪一邊都行,選比較順手的那一邊即可。