用短短6行HTML加速任何網站的載入速度 (Speculation Rules API)

您是否曾經瀏覽過一些網站，只是隨便點擊一個連結，幾乎立即就出現了下一頁？（夏木樂就是這樣喔～）

在過去，通常是使用 Quicklink 之類的技術來達成。近年來，由於 Chrome Speculation Rules API，這種神奇的快速體驗現在變得更容易實現。這項新的瀏覽器功能，只需幾行 HTML 程式碼，就可以讓頁面載入速度近乎即時。

本文章目次

這功能是如何運作的？

<script type="speculationrules">
  {
    "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }],
    "prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
  }
</script>

Chrome 的推測規則 API 允許開發人員以聲明的方式告訴瀏覽器需要預先載入和預先算繪哪些頁面，用以提供近乎即時的載入體驗：

"prefetch"告訴瀏覽器僅下載連結頁面的頂層 HTML 文件。它不會渲染頁面或取得其子資源。這比預先渲染佔用更少的資源，但仍然透過在快取中準備好 HTML 來節省時間。
"prerender"指示瀏覽器不僅下載頁面，還在後台完整渲染頁面。這包括取得所有子資源（例如 CSS、JavaScript 和圖片），並執行 JavaScript。當使用者點擊連結時，頁面幾乎可以立即切換到視圖中。
"eagerness": "moderate"會被瀏覽器解釋為：「使用者將滑鼠指標懸停在連結上 200 毫秒後開始操作。」

可能的情境

以下是一個可能的情境：

使用者正在閱讀您網站上的頁面。
他們移動滑鼠遊標並將其停留在連結上（例如「我們的服務」）。
瀏覽器將此懸停解讀為意圖訊號。經過短暫的延遲（例如，約 200 毫秒，以避免滑鼠意外懸停時觸發），它會觸發「我們的服務」頁面的預先渲染或預先取得操作。
如果用戶隨後點擊該鏈接，頁面已在後台加載（或至少部分加載），從而實現近乎即時的導航。

在過去，夏木樂網站已經使用了 Quicklink prefetch 技術，在滑鼠懸停在連結上時預先載入頁面。現在，我們的網站實現了 Speculation Rules API ，這樣就能夠擺脫 Quicklink，並透過預先渲染更快地載入重量級頁面。

瀏覽器限制

可惜的是，現階段 Speculation Rules API 僅在 Chrome 121 及更高版本中支援。

但對於 Firefox 和 Safari 用戶，依然可以使用過去常見的 Quicklink 來實現預載入技術。以下是一個簡易的範例，當瀏覽器不是 Chrome 時，則啟用 Quicklink：

<script type="speculationrules">
  {
    "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }],
    "prefetch": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]
  }
</script>
<script>
  // 偵測 Speculation Rules API 是否可用
  if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('speculationrules')) {
    // 瀏覽器不支援，載入 quicklink
    const script = document.createElement('script');
    script.defer = true;
    script.src = 'https://cdn.jsdelivr.net/npm/quicklink@3.0.1/dist/quicklink.umd.js';
    script.onload = () => {
      window.addEventListener('load', () => {
        quicklink.listen();
      });
    };
    document.head.appendChild(script);
  }
</script>