網站一般酬載中的圖片和影片部分可能相當龐大。遺憾的是，專案相關人員可能會不願意將任何媒體資源從現有應用程式中切斷。這類錯誤會令人感到沮喪，特別是當所有參與方都想提升網站效能時，但如果他們對於如何達成共識，更也無法達成共識。幸運的是，延遲載入是可以減少初始頁面酬載「和」載入時間的解決方案，但不會略過內容。
什麼是延遲載入？
延遲載入是一種技術，可在頁面載入時間延遲載入非關鍵資源。而是在需要的時候載入這些非關鍵資源。如果圖片不重要，「非重要」通常等同於「畫面外」。如果您已使用過 Lighthouse 並已查看改善項目，可能已經透過延遲畫面外映像檔稽核的形式看到這個領域中的一些指引：
您可能已經看到延遲載入的實際運作情形，運作方式如下：
- 抵達網頁後，隨著您閱讀內容，就會開始捲動畫面。
- 在某些情況下，您將預留位置圖片捲動至可視區域。
- 最終圖片會突然取代預留位置圖片。
圖片延遲載入範例位於熱門發布平台 Medium。這個平台會在網頁載入時載入輕量的預留位置圖片，並在使用者捲動至可視區域時，以延遲載入的圖片取代這類圖片。
如果您對延遲載入不熟悉，可能會想知道這項技術有多實用，以及該技術的優點。馬上一探究竟吧！
為何要延遲載入圖片或影片，而不只是載入圖片或影片？
因為載入內容很可能就是使用者看不到的內容。這種問題有幾個原因：
- 這麼做會浪費資料。以非計量付費連線來說，這並不是最糟的 (雖然您或許使用此寶貴的頻寬下載使用者確實看到的其他資源)。然而，在有限的數據方案中，載入使用者從未見到的內容可能會浪費資金。
- 這會浪費處理時間、電池和其他系統資源。下載媒體資源後，瀏覽器必須解碼資源，並在可視區域算繪內容。
延遲載入圖片和影片可以縮短初始頁面載入時間、初始頁面權重和系統資源用量，這些因素都會對效能產生正面影響。
實作延遲載入
延遲載入有幾種方式。選擇解決方案時，您必須將支援的瀏覽器和要延遲載入的項目納入考量。
新式瀏覽器會導入瀏覽器層級延遲載入，在圖片和 iframe 上使用 loading 屬性即可啟用此功能。如要與舊版瀏覽器相容，或在沒有內建延遲載入的情況下在元素上執行延遲載入，您可以使用自己的 JavaScript 實作解決方案。此外，還有一些現有程式庫可協助您完成這項作業。如需這些方法的完整詳細資料，請參閱本網站的貼文：
此外，我們也彙整了延遲載入可能的問題清單，以及實作時應留意的事項。
結論
請謹慎使用，延遲載入圖片和影片可能會大幅降低網站的初始載入時間和網頁酬載，包括 Core Web Vitals。使用者不會產生不必要的網路活動 (包括在連線速度緩慢的網路爭用網路爭用)，以及處理媒體資源的費用，但使用者還是能視需要查看這些資源。
就效能改善技術而言，延遲載入相當毫無爭議。如果您的網站上有許多內嵌圖像，這個方法能減少不必要的下載內容。你的網站使用者和專案相關人員 都會很感謝！