到達頁載入慢，最後是舊 snippet、字型與雙層快取疊在一起

整理日期：2026-07-20

狀況

一個專業服務網站的廣告流量，大多導向同一個 WordPress 到達頁。頁面功能正常，但手機開啟時偏慢，首屏標題與主要內容需要多等一下才穩定出現。

第一次盤點時看到四個明顯負擔：

頁首同步載入一份外部 jQuery。
Google Fonts 載入六種字重，實際只用到其中三種。
Font Awesome 同時載入相容層、SVG 樣式與主要圖示檔。
沒有表單的到達頁仍載入 Contact Form 7 的 CSS 與 JavaScript。

當時以為這些程式來自子佈景主題和外掛後台，現有 REST 權限碰不到，所以只留下診斷紀錄，沒有急著修改。

重新確認可用權限與實際 hook 來源後，發現前一個前提不成立。

事情怎麼往下查

先確認能改什麼

網站已有 snippet 工具，但沒有提供可用的 REST 管理路由。WordPress 核心的外掛端點則可以在管理員授權下安裝外掛。

因此先備份外掛清單，再安裝一個有 REST CRUD 的 snippet 容器。後面的修改都放在獨立 snippet，能逐支啟用、停用與回滾，不直接碰主題檔案。

這一步的重要性不是「REST 什麼都能做」，而是先實際確認權限與路由，不要沿用幾天前的假設。

第一版移除 jQuery 沒有效果

原本猜測 jQuery 是子佈景主題從 wp_head 加進來，所以第一版程式只移除來源位於子佈景主題的 callback。

啟用第一版 snippet 並檢查公網後，jQuery 還在。

接著建立只限管理員使用的診斷端點，把 wp_head 上的 callback 與來源檔案列出來。結果顯示子佈景主題根本沒有加入那段程式，真正來源是舊 snippet 工具執行的兩支程式：一支載入 jQuery，一支用 jQuery 控制固定選單。

把來源找清楚後，最小的處理不是再用 reflection 硬拆，而是停用兩支舊 snippet，將固定選單改成原生 JavaScript。

(function () {
  const masthead = document.getElementById('masthead');
  if (!masthead) return;

  const update = () => {
    masthead.classList.toggle('fixed', window.scrollY > 0);
  };

  update();
  window.addEventListener('scroll', update, { passive: true });
})();

修改生效了，公網卻看不到

內部渲染結果已經沒有 jQuery，但公開頁面的 HTML 仍和修改前完全一樣。

回應標頭顯示網站同時有兩層 HTML 快取：CDN 的整頁快取，以及主機端保留多天的 Varnish。查詢參數和登入 cookie 都沒有可靠繞過這兩層，因此一般的 cache buster 仍可能讀到舊頁面。

後來改成固定流程：

先從 WordPress 清頁面快取。
再清主機端 Varnish。
最後清 CDN 整頁快取。
每一層都清完，再讀公開 HTML。

這段很關鍵。若沒有先排除快取，會把「修正已生效、但外面仍看到舊版本」誤判成程式沒用。

其他三項也不能一次全關

Font Awesome 的相容樣式比一般資源更晚加入。只在常見的 enqueue 階段移除，主要檔案消失了，相容層還在；最後要在樣式列印前再攔一次。

Google Fonts 的第一輪驗證也出現假陰性。診斷程式抓到的是 dns-prefetch，不是實際字型 CSS URL，因此誤以為字重沒有改。修正檢查規則後，才確認前台只剩需要的三種字重，並使用 display=swap。

Contact Form 7 更不能照「文章內容沒有 shortcode」直接全站卸載。表單實際由共用 footer 元件輸出，內容搜尋找不到，但首頁與文章頁仍有表單。最後只在確定沒有表單的到達頁卸載資源，其他頁保留完整功能。

最後發現

這次不是一個外掛拖慢整站，而是幾個舊設定疊在一起：

舊 snippet 為一個很小的固定選單效果載入整份 jQuery。
字型設定保留了沒有使用的字重。
圖示外掛同時載入已經沒有用途的相容資源。
共用 footer 讓表單資源的實際使用範圍和內容搜尋結果不一致。
CDN 與主機端快取又把修改前的 HTML 留在公網。

如果一開始就把四項全部關掉，很難知道哪一項有效，也很容易讓其他頁面的表單或圖示一起失效。

修正方式

最後採用逐項上線、逐項驗證：

停用舊的 jQuery 與固定選單 snippet，改用原生 JavaScript。
Google Fonts 只保留實際使用的字重，並加上 display=swap。
只移除確認沒有使用的 Font Awesome 相容與 SVG 樣式，保留仍在使用的品牌圖示。
Contact Form 7 只在沒有表單的到達頁卸載，不做全站移除。
每支 snippet 啟用後先檢查原始 HTML、功能與 Console；未通過就立刻停用。
驗證前依序清除 WordPress、Varnish 與 CDN 快取。

處理後，外部 jQuery、兩份多餘圖示樣式與三個未使用字重不再載入；到達頁也少了不需要的表單資源。首屏字型改成 swap，不必等所有字型檔到齊才顯示文字。

不建議先做的事

不要只看程式內容猜來源，先列出實際 hook callback。
不要因為內容裡找不到表單 shortcode，就判定全站沒有表單。
不要一次停用所有前端資源，否則出錯時很難定位。
不要把公網舊 HTML 當成修改失敗，先確認每一層快取。
不要只驗證「檔案少了」，還要確認選單、表單、圖示與追蹤功能都正常。

下次遇到可以先整理什麼

首屏真正載入哪些 CSS、JavaScript、字型與第三方資源。
每個資源是由主題、外掛、snippet 還是共用版型加入。
網站有幾層 HTML 快取，各自怎麼清除。
表單是否來自 footer、popup 或全站元件，而不是文章內容。
哪些頁面確定可以卸載資源，哪些頁面仍依賴它。
每一次修改的回滾方式與最小驗證項目。