排除不必要的下載作業

Ilya Grigorik
Ilya Grigorik

最快且最合適的資源是不會傳送的資源,您應將不必要的資源從應用程式中刪除。建議您與團隊一起針對隱性和明確性的假設進行質疑並定期重新審視。舉例來說:

  • 資源 X 一直都是在網頁上加入,但下載和顯示該資源的費用是否會影響它為使用者提供的價值?能否評估並證明其價值?
  • 這項資源 (尤其是第三方資源) 是否能提供一致的效能?這項資源是否位於關鍵路徑?如果資源位於重要路徑,是否會造成網站的單點故障?這表示如果沒有可用的資源,是否會影響網頁的效能和使用者體驗?
  • 這項資源是否需要或具有服務水準協議?這項資源是否遵循效能最佳做法 (壓縮、快取等)?

網頁往往包含非必要的資源,或甚至還會拖欠網頁效能,而不會為訪客或所代管網站帶來太多價值。這種情況也適用於第一方和第三方資源和小工具:

  • 網站 A 決定在首頁上顯示相片輪轉介面,讓訪客透過按一下的方式預覽多張相片。所有相片都會在網頁載入時載入,使用者則需先翻閱相片。
    • 問題:您評估過有多少使用者在輪轉介面中查看多張相片嗎?下載大多數訪客從未查看的資源,可能會造成負載高估。
  • 網站 B 決定安裝第三方小工具來顯示相關內容、提升社交參與度或提供其他服務。
    • 問題:您是否追蹤過有多少訪客使用這個小工具或點閱這個小工具提供的內容?這個小工具帶來的參與度,是否能證明這個小工具有負擔?此外,您是否可以運用載入策略,確保在必要時才載入指令碼

判斷是否刪除不必要的下載作業,往往需要審慎思考和評估。為了獲得最佳成效,請定期清點網頁上的各項素材資源,並重新評估這些問題。

對 Core Web Vitals 的影響

Core Web Vitals 是 Google 推出的工具,旨在提供一組指標,可反映使用者瀏覽網站時的體驗。雖然 Core Web Vitals 有許多最佳化策略,但思考是否要在網頁中載入特定資源或許有助於改善網站上的這些指標。以下列舉幾個值得參考的範例 (按各個 Core Web Vital 分組)。雖然這份清單並不完整 (而且還有許多範例!),閱讀這些範例或許能為您提供一些參考資訊。

最大內容繪製 (LCP)

Largest Contentful Paint (LCP) 會評估載入最大內容 (例如主頁橫幅或標題) 的時間點。這項指標是一種重要的感知指標,可讓使用者瞭解網站載入的速度很快。

一般來說,下載的資源較少,代表使用者應分配到的資源較少,還能提升 LCP。典型的例子就是延遲載入;在瀏覽器判斷使用者較有可能看到圖片之前,系統不會下載網頁載入期間可視區域外的圖片。如果您的縮圖庫含有 50 張圖片,但是延遲載入所有圖片 (前 10 張),瀏覽器可以更有效率地利用頻寬,而且使用者看到的第一張圖片會更快載入。

不過,這不僅是減少圖片,必要性也更少。瀏覽器會根據內部優先順序配置,決定各項資源應接收的頻寬。不過,即使使用了這些「所有」資源 (尤其是以高優先順序下載的資源),仍有可能衍生潛在 LCP 元素的相依資源。尤其是在網路連線緩慢時。相依資源可以是代表網頁 LCP 元素的圖片檔,但瀏覽器需要轉譯的文字節點也可以是網頁的 LCP 元素。

如果網站的內容繁重,很可能是網頁的 LCP 元素是文字節點。雖然目前已有許多良好的字型最佳化和載入策略,但您可能仍需要考慮系統字型是否足以滿足網站的需求。這樣一來,當 CSS 和 HTML 從伺服器傳來時,就可以載入屬於文字節點的文字節點,不需依賴網路字型資源也能載入。

累計版面配置位移 (CLS)

每個載入的資源都可能影響網頁的累計版面配置位移 (CLS),特別是在初次繪製時尚未下載完畢的情況下。圖片應避免使用 CLS,例如設定明確尺寸等做法。就字型而言,管理字型載入和可能的備用字型比對功能,可以盡量減少網路字型交換期間的位移。以 JavaScript 來說,可以管理指令碼操控 DOM 的方式,讓版面配置位移減少到可接受的數量。

每個參與網頁 CLS 的資源都必須投入大量心力,才能確保網頁版面配置穩定可靠。想知道自己是否需要特定資源,而不只是加快頁面載入速度,也能減少維持版面配置穩定性所需的認知。這不僅會降低使用者體驗的困擾,還會降低開發人員的困擾,因為您將有更多時間在專案上實現其他目標。

與下一個顯示的內容互動 (INP)

與下一個顯示內容的互動 (INP)」指標會評估在網頁生命週期中,使用者輸入內容的回應速度。JavaScript 是網路中大部分的互動體驗元素,因此網頁的 INP 會受到極大影響。尤其是在網頁載入期間下載的指令碼資源數量,可能會使得指令碼評估和編譯中耗費大量成本的工作。因為啟動期間載入的 JavaScript 越少,瀏覽器在網頁體驗的關鍵時刻所需要的工作就越少,因為使用者可能會嘗試與網頁互動。

雖然有一些策略可以縮減啟動期間下載的 JavaScript 資源「大小」(例如程式碼分割和樹狀結構),但還是值得稽核您在專案中使用的套件,確認是否需要這些套件。舉例來說,lodash 有許多方法依然可以派上用場,但其隨附方法則是由瀏覽器立即提供,例如 Array 專用的對應縮小篩選其他方法

漸進式強化對於 JavaScript 也是相當實用的做法,可讓您為擁有更強大的裝置和更快速網路連線的使用者提供基本 (但仍可正常運作) 的體驗。無論您是否遵循漸進式強化原則,重點仍然存在:凡是您不可能下載的 JavaScript 資源,都可能導致系統更快回應使用者互動,這是網頁效能中相當重要的部分。

結論

為了提供快速的使用者體驗,檢查網站是否有不必要的下載,或許是提供快速體驗的一個面向,但這將是可能影響重大的因素。一起來複習:

  • 清點網頁上自有的素材資源和第三方資產。
  • 評估每個資產的成效:價值和技術成效。
  • 判斷資源是否提供足夠的價值。
  • 瞭解不必要的下載作業對Core Web Vitals 和支援指標的影響。

以這種方式最佳化內容效率,這樣不僅會改善整體效能,還能避免浪費使用者頻寬,還可能改善以使用者為中心的指標,進而提供更好的使用者體驗。