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

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

米科.吉切夫

我在 2019 年 Google I/O 大會的「Faster Web Navigation with Predictive Prefetching」(使用預測預先擷取功能) 工作階段中，開始探討透過程式碼分割功能最佳化網頁應用程式，以及後續頁面瀏覽作業可能對效能的影響。在演講的第二部分中，我曾說明如何使用 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 產生的程式碼會指示瀏覽器將預先擷取區塊 a.js 和機率 0.2 和區塊 b.js 視為機率 0.8。

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

瞭解詳情

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