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

瞭解預測預先載入功能，以及 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。如要在應用程式中使用這項功能，請將以下行加入 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 就會檢查使用者的連線速度。如果足夠，Guess.js 會在網頁標頭中插入兩個 <link rel="prefetch"> 標記，每個區塊一個。如果使用者使用的是高速網路，Guess.js 會預先擷取兩個區塊。如果使用者的網路連線品質不佳，Guess.js 只會預先擷取區塊 b.js，因為使用者很可能需要該區塊。

瞭解詳情

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