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

瞭解預測式預先擷取功能，以及 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。

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

瞭解詳情

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