透過預測預先擷取功能加快網頁瀏覽速度

瞭解預測式預先擷取功能，以及 Guess.js 實作此功能的方式。

Minko Gechev

在 2019 年 Google I/O 大會的「預測預先載入功能可加快網頁導覽速度」講座中，我首先談到如何透過程式碼分割來最佳化網頁應用程式，以及後續網頁導覽可能帶來的效能影響。在演講的第二部分，我討論了如何使用 Guess.js 設定預測預先載入功能，進而提升導覽速度：

程式碼分割功能，加快網頁應用程式的速度

網站應用程式速度緩慢，而 JavaScript 是您提供的資源中最耗費資源的資源。等待載入速度緩慢的網頁應用程式，可能會讓使用者感到不耐煩，進而降低轉換次數。

網頁應用程式速度緩慢會讓人感到壓力。

延遲載入是很有效率的技術，可減少您傳輸的 JavaScript 位元組。您可以使用下列幾種技術來延遲載入 JavaScript：

  • 元件層級程式碼分割
  • 路徑層級程式碼分割

您可以運用元件層級的程式碼分割功能，將個別元件移至不同的 JavaScript 區塊。您可以在特定事件中載入相關的程式碼，並轉譯元件。

不過，如果使用路徑層級程式碼拆分功能，您可以將整個路徑移至獨立的區塊。當使用者從一個路徑轉換至另一個路徑時，他們必須下載相關的 JavaScript，並啟動要求的網頁。這些作業都可能導致嚴重延遲，尤其是在網路速度緩慢時。

預先擷取 JavaScript

預先擷取功能可讓瀏覽器下載及快取使用者可能很快就會需要的資源。常見的方法是使用 <link rel="prefetch">，但有兩個常見陷阱：

  • 預先擷取過多資源 (過度擷取) 會消耗大量資料。
  • 使用者需要的部分資源可能永遠不會預先擷取。

預測式預先載入功能會使用使用者瀏覽模式的報表，判斷應預先載入哪些素材資源，以解決這些問題。

預先擷取範例

使用 Guess.js 進行預測式預先載入

Guess.js 是一種 JavaScript 程式庫，可提供預測預先載入功能。Guess.js 會使用 Google Analytics 或其他分析供應商的報表，建立預測模型，以便智慧預先擷取使用者可能需要的內容。

Guess.js 已整合 Angular、Next.js、Nuxt.js 和 Gatsby。如要在您的應用程式中使用這個 ID，請在 webpack 設定中加入以下幾行指令，以指定 Google Analytics 資料檢視 ID：

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

如果你沒有使用 Google Analytics，可以指定 reportProvider，並從喜愛的服務下載資料。

與架構整合

如要進一步瞭解如何將 Guess.js 與您偏好的架構整合，請參閱下列資源：

如要快速瞭解如何與 Angular 整合，請觀看這部影片：

Guess.js 的運作方式為何？

以下是 Guess.js 實作預測預先載入的做法：

  1. 首先會從您偏好的數據分析供應商中，擷取使用者導覽模式的資料。
  2. 然後將報表中的網址對應至 webpack 產生的 JavaScript 區塊。
  3. 系統會根據擷取的資料，建立簡單的預測模型，預測使用者從任何網頁前往哪些網頁。
  4. 它會為每個 JavaScript 區塊叫用模型，預測下一個可能需要的其他區塊。
  5. 這會為各個區塊新增預先擷取操作說明。

當 Guess.js 完成時，每個區塊都會包含類似以下的指令：

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

這個 Guess.js 產生的程式碼會指示瀏覽器預先擷取機率為 0.2 的區塊 a.js，以及機率為 0.8 的區塊 b.js。

瀏覽器執行程式碼後，Guess.js 就會檢查使用者的連線速度。如果足夠的話，Gues.js 會在網頁標頭中插入兩個 <link rel="prefetch"> 標記 (每個區塊各一個標記)。如果使用者使用的是高速網路，Guess.js 會預先擷取兩個區塊。如果使用者的網路連線品質不佳，Guess.js 只會預先擷取區塊 b.js，因為使用者很可能需要該區塊。

瞭解詳情

如要進一步瞭解 Guess.js，請參閱下列資源：