排除不必要的下載作業

伊利亞 (Ilya Grigorik)
Ilya Grigorik

最快且最佳最佳化資源是系統不會傳送的資源。建議您將不必要的資源從應用程式中排除。建議您對團隊提出隱含與顯性的假設,並定期檢討。例如:

  • 資源 X 一直都在網頁上,但下載及顯示資源 X 的成本,是否與帶給使用者的價值相抵觸?是否可衡量並證明其價值?
  • 這項資源 (特別是第三方資源) 能否維持一致的效能?這項資源是否位於重要路徑?還是必須?如果資源在關鍵路徑中,是否會造成網站的單點故障?也就是說,如果資源無法使用,是否會影響網頁的效能和使用者體驗?
  • 這項資源是否需要或具有服務水準協議?這項資源是否遵循效能最佳做法:壓縮、快取等?

很多時候,網頁含有不必要的資源,甚至會降低網頁效能,且無法為訪客或他們所在網站提供過多價值。這種情況同樣適用於第一方和第三方資源和小工具:

  • 網站 A 決定在首頁上顯示相片輪轉介面,讓訪客只需按一下就能預覽多張相片。所有相片都會在網頁載入時載入,且使用者會自行瀏覽相片。
    • 問題:你是否評估過有多少使用者在輪轉介面中查看多張相片?如果您下載大多數訪客從未查看的資源,可能會招致高額負荷。
  • 網站 B 決定安裝第三方小工具來顯示相關內容、提升社交參與度或提供某些其他服務。
    • 問題:是否追蹤過有多少訪客使用這個小工具或點閱這個小工具提供的內容?這個小工具帶來的參與度是否足以合理化負荷?此外,您是否能使用載入策略,確保指令碼只有在必要時才會載入

判斷是否刪除不必要的下載,往往需要經過深厚的思考與評估。為求最佳成效,請定期清點網頁上的每項素材資源,並重新審視這些問題。

網站體驗核心指標的影響

「網站體驗核心指標」的初始項目是由 Google 推出,目的是提供一組指標,反映使用者使用網路時的體驗。雖然網站體驗核心指標有許多最佳化策略,但是對於是否在網頁上載入特定資源,這個問題可能有助於改善網站上的這些指標。以下依個別 Core Web Vitals 分組列出了一些值得仔細考量的例子。雖然這並不是一份完整的範例清單 (而且很多!),閱讀它們或許能產生一些想法。

最大內容繪製 (LCP)

最大內容繪製 (LCP) 表示載入最大內容 (例如主頁橫幅或廣告標題) 的時間。這是一個重要的感知指標,可以幫助使用者看出網站載入速度快慢。

一般來說,下載的資源較少,代表系統會分配使用者所耗用的頻寬較少,且可能會提升 LCP 的品質。常見的例子是延遲載入;在瀏覽器判斷使用者較有可能看到這類圖片前,系統在載入網頁期間不會下載可視區域以外的圖片。假設有 50 張圖片的大型縮圖庫,其中顯示全部的前 10 張圖片是延遲載入;在這種情況下,瀏覽器可以更有效率地使用可用的頻寬,使用者看到的第一張圖片就會加快載入速度。

不過,我們不僅要載入較少的圖片。瀏覽器設有內部優先順序機制,用來決定每項資源應接收的頻寬。不過,即使使用這類「所有」資源,特別是以高優先順序下載的資源,仍然可能破壞潛在的 LCP 元素的相依資源。網路連線速度緩慢時,這一點尤其重要。這類相依資源可以是代表網頁的 LCP 元素的圖片檔,但也可以是網頁字型資源,瀏覽器需要轉譯文字節點,系統可能會判定網頁的 LCP 元素。

如果網站含有大量文字,原因可能是網頁的 LCP 元素是文字節點。雖然有許多良好的字型最佳化和載入策略,但還是建議您評估系統字型是否足以滿足網站的需求。這樣一來,不必依賴網路字型資源就能載入文字節點,而且在 CSS 和 HTML 從伺服器送達時立即繪製幾乎是文字節點。

累計版面配置位移 (CLS)

您載入的每項資源都可能促成網頁的累計版面配置位移 (CLS),尤其是在初次繪製前尚未完成下載作業的情況下,針對圖片,避免 CLS 涉及設定明確尺寸等做法。針對字型,管理字型載入以及可能的備用字型比對方式,可以盡量減少網頁字型交換期間的位移。對 JavaScript 而言,這類工具可以管理指令碼操控 DOM 的方式,以便將版面配置位移降至可接受的量。

構成網頁 CLS 的每項資源都需進行一些作業,才能確保網頁版面配置夠穩定。詢問是否需要特定資源時,您不僅要加快頁面載入速度,也在瞭解維持版面配置穩定性時所需的認知。這不僅會造成使用者體驗不佳,還能減少開發人員的困擾,讓您有餘裕的時間達成專案中的其他目標。

與下一個顯示畫面 (INP) 和首次輸入延遲時間 (FID) 的互動

與下一個顯示的內容 (INP) 互動首次輸入延遲時間 (FID) 是評估使用者輸入內容回應速度的指標。雖然 INP 預計於 2024 年 3 月取代 FID 做為 Core Web Vitals,但 FID 的最佳化策略通常也適用於 INP。此外,與 FID 相比,INP 通常較難進行最佳化,因為 INP 會追蹤「所有」網頁互動的完整互動延遲時間,而不只是以 FID 評估的方式計算最初互動的輸入延遲時間。

JavaScript 主要是影響 INP 和 FID 的主因,因為 JavaScript 是推動網路上大多數互動的主因。針對 INP 和 FID,網頁載入期間下載的指令碼資源數量會啟動指令碼評估和編譯所涉及的高成本工作。啟動期間載入的 JavaScript 越少,瀏覽器在網頁體驗的關鍵時間點所須執行的準備工作就越少。

儘管已有策略可以減少啟動期間下載的 JavaScript 資源「大小」(例如程式碼分割和樹狀結構),建議您稽核專案中所使用的套件,確認是否需要用到這些套件。舉例來說,lodash 的許多方法目前仍然很實用,但其隨附的方法也必須提供瀏覽器立即可用的方法,例如用於對應Array 專屬函式、減少篩選,以及其他許多函式

漸進增強也是一種 JavaScript 相當實用的方法,可讓您為使用者提供基本 (但仍然有效) 的體驗,讓具備更強大裝置且連線速度更快的使用者體驗。無論您是否遵循漸進式增強原則,重點是:避免下載的 JavaScript 資源都能加快系統回應使用者互動的速度,這對網頁效能來說至關重要。

結語

稽核網站並下載不必要的下載作業,可能只是提升使用者體驗的快速體驗之一,但最可能影響的是極大影響。一起來複習:

  • 清點網頁上所有自有資產和第三方資產。
  • 評估各項素材資源的成效:價值與技術成效。
  • 判斷這些資源是否提供了足夠的價值。
  • 瞭解不必要的下載內容對網站體驗核心指標和支援指標的影響。

藉由這種方式最佳化內容效率,您不僅可以改善整體效能,還能避免浪費使用者頻寬、有望改善以使用者為中心的指標,以及提供更優質的使用者體驗。