instant.page - 預先加載超連結頁面，加快網站載入速度並提升頁面轉化率

instant.page 是一款免費開源的 JavaScript 腳本，能在使用者點擊連結前預先載入目標頁面，讓網站的頁面切換接近即時完成。安裝只需要一行程式碼，對 WordPress 和非 WordPress 網站都適用。

instant.page 是什麼

instant.page 是一個僅 1 kB 的免費開源（MIT 授權）JavaScript 腳本，由 Alexandre Dieulot 開發維護。它的功能很單純：在使用者還沒點擊連結之前，就提前載入目標頁面的 HTML，讓頁面切換幾乎感受不到延遲。

Amazon 的內部研究發現，頁面載入時間每增加 100 毫秒，銷售額就下降 1%。Google 的研究也指出，行動裝置上載入超過 3 秒的頁面，有 53% 的使用者會直接離開。這些數據說明了一件事：網站速度直接影響轉換率和營收。如果你對頁面載入速度如何影響使用者行為還不熟悉，建議先了解基本概念。

截至 2026 年 5 月，instant.page 的最新版本為 5.2.0，已被 Adidas、Spotify、Rakuten、PepsiCo 等網站採用。腳本託管在 Cloudflare Workers 上，沒有傳統伺服器的安全風險。

官方網站提供即時體驗功能，你可以直接到 instant.page 官方網站感受滑鼠懸停時頁面就已經準備好的效果。

運作原理：hover 與 touch 的即時預載入

instant.page 的核心邏輯建立在「使用者行為預測」上，分為桌面端和行動裝置兩種情境。

桌面端的運作方式：使用者在點擊連結前，滑鼠一定會先懸停（hover）在連結上。根據官方統計，當滑鼠懸停超過 65 毫秒時，使用者有二分之一的機率會點擊該連結。instant.page 在這個瞬間就開始預載入頁面，平均能爭取到 300 毫秒以上的預載入時間。如果你使用 v5.0 的 mousedown 模式，甚至能在使用者按下滑鼠鍵的那一刻就觸發載入，平均再省下 80 毫秒。

行動裝置的運作方式：使用者在觸碰螢幕後到放開手指之間，平均有 90 毫秒的間隔。instant.page 在 touchstart 事件觸發時就開始預載入。另一個選項是 viewport 模式，讓連結一出現在畫面上就開始預載入，但這會產生較多請求。

頻寬保護機制：預載入只下載頁面 HTML，不包含圖片、CSS 或 JavaScript 等資源。它使用 passive event listener 和 requestIdleCallback，避免影響頁面流暢度。當使用者開啟 Data Saver 或處於 2G 網路時，腳本會自動退回預設行為，不會浪費流量。

Prefetch、Preload、Prerender 差異比較

瀏覽器資源提示技術有三種主流做法，它們的運作方式和適用場景完全不同。

技術	觸發時機	下載內容	對使用者的影響
Prefetch	瀏覽器空閒時	指定資源（可為頁面或檔案）	背景執行，不影響當前頁面。instant.page 使用的就是這個技術
Preload	頁面載入時立即	當前頁面需要的關鍵資源（字型、CSS 等）	優先下載，加速當前頁面渲染
Prerender	瀏覽器空閒時	完整頁面（含所有子資源）	消耗最多頻寬和記憶體，Chrome 已限制使用場景

instant.page 採用 Prefetch 策略，只在使用者有高度意願時才預載入純 HTML。比起 Prerender 的完整渲染，頻寬消耗低很多，也不會產生虛假的 Analytics 數據。

三種安裝方式

無論你用的是 WordPress 還是其他平台，安裝 instant.page 都不超過 5 分鐘。以下三種方式擇一即可。

方式一：WordPress 外掛安裝

在 WordPress 後台搜尋「instant.page」即可找到官方外掛，安裝並啟用後不需要任何設定，腳本會自動加入頁面。這是最簡單的方式，適合不想動程式碼的使用者。

如果你對WordPress 是什麼還不太了解，或是剛開始架站，也可以先用 InstaWP 測試站來練習安裝，避免直接在正式站上操作。

方式二：手動加入 JavaScript 腳本

在頁面的 </body> 標籤前加入以下程式碼：

<script src="//instant.page/5.2.0" type="module"></script>

如果你使用的是非 WordPress 網站，或是想要自己控制腳本版本，這是推薦的做法。

方式三：透過 functions.php 嵌入

如果你使用 WordPress 但不想裝外掛，可以在佈景主題的 functions.php 中加入：

function add_instant_page_script() {
    echo '<script src="//instant.page/5.2.0" type="module"></script>';
}
add_action('wp_footer', 'add_instant_page_script');

如果你不確定 WordPress.com 和 WordPress.org 的差異，請注意只有 self-hosted（WordPress.org）的網站才能編輯 functions.php。

安裝後的驗證方法

安裝完成後，打開瀏覽器的開發者工具（F12），切換到 Network 分頁。將滑鼠懸停在站內連結上，應該能看到一個新的 HTML 請求被發出，且 Purpose: prefetch 標頭出現在請求中。這表示腳本正在運作。

進階設定：data 屬性說明

instant.page 提供幾個 data 屬性，讓你控制預載入的行為。這些屬性可以加在 <body> 標籤或個別連結上。

調整延遲時間（data-instant-intensity）：預設是懸停 65 毫秒後觸發。如果你的網站有大量大面積的連結區塊（例如電商商品列表），可以拉長延遲以減少無效預載入。

<body data-instant-intensity="150">

如果想要更即時的反應，也可以縮短延遲：

<body data-instant-intensity="50">

使用 mousedown 值可以在使用者按下滑鼠時才觸發載入，不產生任何無效請求，但仍能平均省下 80 毫秒。使用 viewport 則會在連結進入可視區時就開始預載入，適合對速度極度要求的行動裝置場景。

強制預載入特定連結（data-instant）：如果你希望某個特定連結無條件被預載入，可以加上這個屬性。

<a href="https://shop.example.com/product" data-instant>查看商品</a>

排除特定連結（data-no-instant）：對於結帳頁、登入表單等不應被預載入的連結，加上這個屬性即可排除。

<a href="/checkout?step=payment" data-no-instant>前往結帳</a>

開啟查詢字串預載入（data-instant-allow-query-strings）：預設情況下，帶有查詢字串（?key=value）的連結不會被預載入，因為這類頁面可能是動態產生的。如果你確定需要預載入這類連結，可以在 <body> 加上這個屬性。

外部連結預載入（data-instant-allow-external-links）：預設只預載入同網域的內部連結。如果你有明確需求需要預載入外部連結，可以加上這個屬性。但一般不建議開啟，因為外部網站的回應速度你無法控制，預載入效果有限。

搭配 CDN 與快取外掛發揮最大效果

instant.page 的預載入效果，取決於伺服器回應 HTML 的速度。如果伺服器本身回應就要 500 毫秒以上，300 毫秒的預載入時間遠遠不夠。因此，搭配良好的Cloudflare CDN 設定和快取外掛是必要的。

Cloudflare CDN：啟用 Cloudflare 後，HTML 頁面會從最近的節點回應，大幅縮短 TTFB（Time to First Byte）。如果你不清楚 TTFB 的意義，可以參考TTFB 是什麼以及如何優化的說明。搭配 instant.page，使用者懸停連結時，預載入請求直接命中 CDN 快取，回應速度可以壓到 50 毫秒以內。

WP Rocket：WP Rocket 快取外掛提供頁面快取、瀏覽器快取和 GZIP 壓縮等功能。instant.page 負責頁面切換時的預載入，WP Rocket 負責讓伺服器更快產生頁面，兩者互補不衝突。如果你的 WP Rocket 有啟用「延遲 JavaScript 執行」功能，記得將 instant.page 加入排除清單。你也可以同時參考 WordPress 快取外掛推薦來選擇適合自己的工具。

主機選擇：如果你的主機本身回應速度慢，任何前端優化手段的效果都有限。選擇一台回應速度快、穩定性好的主機是基礎。建議參考虛擬主機推薦與比較，找到適合自己預算和需求的方案。如果你需要啟用GZIP 壓縮來進一步減少傳輸量，也有完整的教學可以參考。

想知道目前網站的效能表現，可以用網站速度測試工具做一次完整的檢測，再對照安裝 instant.page 前後的數據變化。

注意事項與不適合的場景

instant.page 不是萬靈丹，以下幾個情況需要特別留意。

頻寬消耗：雖然每次預載入只下載 HTML（通常幾十 KB），但如果網站有大量連結、使用者快速移動滑鼠，仍會產生不少預載入請求。對於流量有限的主機或使用者，這是需要考量的成本。建議使用 SG Optimizer 或其他伺服器端快取來降低每個請求的處理成本。

不適合的場景：

單頁式網站（SPA）：頁面切換由前端 JavaScript 控制，instant.page 的預載入沒有作用。
結帳流程和表單頁面：這類頁面每次載入都應該取得最新狀態，預載入可能導致資料不一致。記得用 data-no-instant 排除。
流量極大的網站：如果伺服器已經接近負載上限，預載入帶來的額外請求可能雪上加霜。

Google Analytics 數據：instant.page 使用的是標準瀏覽器 prefetch 機制，只有在使用者實際點擊連結時才會觸發頁面載入和 Analytics 追蹤。預載入的 HTML 不會產生虛假的瀏覽數據。你可以搭配 Site Kit by Google 來監控安裝前後的實際數據變化。

instant.page vs Quicklink vs Guess.js

市面上有三款主流的預載入工具，各自有不同的策略和適用場景。

工具	預載入策略	檔案大小	適合誰
instant.page	根據 hover/touch 事件即時預載入	1 kB	內容站、部落格、中小型電商，想要零設定即裝即用
Quicklink	連結進入 viewport 時預載入	約 4 kB	行動裝置為主的網站，願意接受較多請求換取速度
Guess.js	根據 Analytics 數據和 AI 模型預測下一頁	依實作而定	有足夠流量數據的大型網站，願意投入設定成本

對大多數 WordPress 站長來說，instant.page 是最佳選擇：體積最小、設定最簡單、預載入最精準（只在使用者有意願時才觸發），不會產生無效請求。Quicklink 適合行動裝置場景較多的網站，但會產生較多預載入請求。Guess.js 的預測準確度最高，但設定複雜，需要串接 Analytics 數據，適合有技術團隊的大型網站。

常見問題 FAQ

instant.page 會不會影響 SEO 排名？

不會。instant.page 使用的是標準瀏覽器 prefetch 機制，Google 的爬蟲不會執行這個預載入行為。它只影響使用者的實際瀏覽體驗，不會改變搜尋引擎看到的頁面內容。如果你的網站本身速度不佳，建議先從WordPress 整體速度優化著手。

免費版和付費版有什麼差異？

instant.page 的核心腳本是免費且開源的（MIT 授權），功能完全相同。付費版提供的是額外的技術支援和進階整合方案，適合企業用戶。一般網站使用免費版就足夠了。

不用 WordPress 也能用嗎？

可以。instant.page 是純 JavaScript 腳本，任何網站只要能在 </body> 前加入一行 script 標籤就能使用，不限定 WordPress。支援 Bluehost、Kinsta、A2 Hosting、SiteGround、DreamHost、Hostinger 等各種主機環境。

會不會增加伺服器流量成本？

會有一點增加，但幅度很小。每次預載入只下載 HTML（不含圖片和子資源），通常幾十 KB。如果你的網站使用 CDN 快取，大部分預載入請求會命中 CDN 節點，不會打到原始伺服器。搭配 Imagify 圖片壓縮和 WebP 格式轉換等其他優化手段，整體流量增幅非常有限。

行動裝置上有沒有效果？

有。在行動裝置上，instant.page 在使用者觸碰螢幕（touchstart）時就開始預載入，平均爭取到 90 毫秒的預載入時間。你也可以啟用 viewport 模式，讓連結一出現在畫面上就預載入，但這會增加較多請求。

instant.page 和瀏覽器的 DNS prefetch 衝突嗎？

不衝突。DNS prefetch 處理的是域名解析，instant.page 處理的是頁面 HTML 的預載入，兩者作用在不同階段。你可以同時使用 Cloudflare 1.1.1.1 DNS 等服務來加速 DNS 解析，再搭配 instant.page 來加速頁面載入。

可以跟 WP Rocket 或其他快取外掛一起用嗎？

可以，而且建議一起使用。instant.page 負責頁面切換時的預載入，快取外掛負責減少伺服器的重複運算。兩者互補，搭配使用效果最好。唯一需要注意的是，如果你的快取外掛有「延遲 JavaScript 執行」功能，可能需要把 instant.page 的腳本加入排除清單。更多 WordPress 速度技巧可以參考WordPress 網站速度優化技巧。

三個立即可以做的下一步

1. 安裝 instant.page：選擇上面三種安裝方式的其中一種，花 5 分鐘完成安裝。如果是 WordPress 網站，直接裝外掛最快。安裝後用瀏覽器開發者工具確認預載入請求有正常發出。

2. 檢查主機和 CDN 基礎：用測速工具檢查目前的 TTFB。如果超過 200 毫秒，先處理主機回應速度和 CDN 快取設定，instant.page 的預載入效果才會明顯。你可以參考 Fast or Slow 測速工具從全球節點測試。

3. 設定 data-no-instant 排除敏感頁面：找出網站中的結帳頁、登入頁、表單提交頁，加上 data-no-instant 屬性。這一步很重要，避免預載入導致頁面狀態不一致的問題。

如果你正在找適合的 WordPress 主機來搭配整體速度優化，可以參考 Bluehost WordPress 教學或 SiteGround 評價，了解不同主機的特色與適合族群。如果你是 WordPress 新手，也可以先看看如何選擇 WordPress 佈景主題和最佳 WordPress 佈景主題推薦，從基礎開始打好網站的效能地基。