瀏覽器在載入網站時會先下載必需的資源（CSS、JavaScript、字型），但往往要等到解析 HTML 後才發現這些資源的存在。如果資源分散在多個外部服務，建立連線本身就要耗時幾百毫秒。WordPress 提供三種資源提示，讓你提前告訴瀏覽器「接下來會用到什麼」，從而加快載入速度——特別是在手機網路不穩定的環境下，這套做法能顯著改善使用者體驗。

三種資源提示的角色分工

預連線（Preconnect） 針對你確定會用到的外部服務網域。比起等著要用時才建立連線，預先建立 DNS 查詢、TCP 握手與 TLS 協商讓瀏覽器少等 100–300 毫秒。Google Fonts 這類必用服務就適合加 preconnect，因為幾乎每個頁面都需要。

預載（Preload） 是告訴瀏覽器「這個資源我現在就要用，請立即下載」。通常用在關鍵 CSS、網頁字型、英雄圖片這類會直接影響首屏顯示速度的檔案。但要小心不要過度預載——預載超過 4、5 個檔案反而會讓瀏覽器頻寬分散，延誤真正需要的資源。一句話：preload 很強，但只能用在真正關鍵的東西上。

預猜測（Prefetch） 則是為下一個頁面預做準備。假設訪客來到首頁，你猜他接下來多半會點 About 或 Services 頁面，就可以提前下載那些頁面用到的資源。預猜測不會卡住目前頁面，瀏覽器有閒置頻寬時才會背景執行，所以風險相對低。常見用途包括下一篇文章的圖片、熱門頁面的 JavaScript。

在主題 header 中插入資源提示

最直接的做法是在主題的 header.php 內，</head> 標籤前面用 WordPress 的 wp_head() 掛鉤來加入這些提示。

開啟主題編輯器（外觀 > 主題檔案編輯器），找到 header.php，在 wp_head() 之前或之後加上以下程式碼：

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://example.com/critical.css">
<link rel="preload" as="font" href="https://example.com/font.woff2" type="font/woff2" crossorigin>
<link rel="prefetch" href="https://example.com/next-page-asset.js">

不過直接改 header.php 有個缺點：更新主題時會被覆蓋。更穩妥的做法是透過 wp_head 掛鉤在主題的 functions.php 內動態新增：

function add_resource_hints() {
  echo '<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>';
  echo '<link rel="preload" as="style" href="https://example.com/critical.css">';
}
add_action( 'wp_head', 'add_resource_hints' );

或者使用 WordPress 內建的 wp_resource_hints 掛鉤，讓其他外掛也能共同管理這些提示。

實務上該怎麼判斷需求

加資源提示前，先拿 Chrome 開發者工具的 Network 分頁掃一遍你的頁面。找出會卡首屏的資源——通常是外部字型、CDN 上的關鍵 CSS、必需的 JavaScript——就從這些下手。Google PageSpeed Insights 也會明確指出哪些資源應該預載，直接跟著建議加就不會錯。

如果用了 WP Rocket、Perfmatters、LiteSpeed Cache 這類快取外掛，它們內建就有資源提示面板，一鍵勾選就能自動管理重複項，省去手動排查的工夫。新手不想動 code 的話，這類外掛最保險。

常見踩坑

不要一次預載超過 4、5 個資源，否則瀏覽器反而會被搞慢——頻寬被瓜分，原本能立即出現的東西反而延遲了。也不要預猜測那些用戶幾乎不會點進去的頁面，白白浪費訪客的行動網路配額，招致反感。最後，preload 的 as 屬性一定要填正確（as="style" 給樣式表、as="script" 給 JS、as="image" 給圖片），不然瀏覽器無法正確優先化。

若把這三種提示用對，搭配 WordPress 標準的快速化設定（壓縮圖片、啟用快取、用 CDN），你的網站首頁載入時間可以改善 30–40%，訪客體驗會明顯升級。