透過 圖片 和影片 通常是網站的有效酬載可能相當可觀 不幸的是，專案利益相關者可能不願意切斷現有媒體資源 應用程式。 這種不規則的確令人沮喪 特別是當所有相關人員都想改善網站效能時 但無法議定如何前往 幸好，延遲載入是一種減少初始頁面酬載的解決方案， 但不會對內容造成負面影響
什麼是延遲載入？
延遲載入是一種會延遲載入網頁上非重要資源的技術 載入時間。相反地，這些非關鍵的資源會在 需求。圖片涉及「非重要」通常等同於 「螢幕外」。如果您使用 Lighthouse，並檢視了 您可能已在該領域中獲得一些指引 延遲稽核畫面外圖片：
您可能已經看過延遲載入功能 ：
- 您到達了頁面，並在您閱讀內容時開始捲動。
- 在某些情況下，您會將預留位置圖片捲動至可視區域。
- 預留位置圖片突然被最終圖片取代。
熱門發布平台提供了圖片延遲載入的範例 中：會在 網頁載入，並在使用者捲動頁面時，以延遲載入的圖片取代這些圖片 檢視區域
如果不熟悉延遲載入機制，您可能會好奇 技巧和優點馬上一探究竟吧！
為什麼要延遲載入圖片或影片，而不是只是「載入」？
因此，您可能會載入使用者看不到的內容。這是 造成問題的原因如下：
- 這會導致資料浪費。使用非計量付費連線時 (雖然下載時可能會使用寶貴的頻寬 以及使用者將會看到的其他資源)。資料受限 不過，載入使用者完全看不到的內容 投入大量資金
- 也會浪費處理時間、電池和其他系統資源。媒體結束後 下載資源後，瀏覽器必須解碼該資源，並在 檢視區域
延遲載入圖片和影片，可縮短初始頁面載入時間 這些因素都會對 才需進行
實作延遲載入
實作延遲載入的方法有很多種， 您在選擇解決方案時，必須考量到支援的瀏覽器、 以及要延遲載入的內容
新式瀏覽器會導入瀏覽器層級的延遲載入，
這項功能可在圖片和 iframe 上使用 loading 屬性啟用。
能夠相容於舊版瀏覽器
或是在沒有內建延遲載入的情況下，對元素執行延遲載入
您可以利用自己的 JavaScript 實作解決方案。
目前也有許多程式庫可協助您完成這項作業。
如需上述所有方法的完整詳細資訊，請參閱本網站的文章：
此外，我們也彙整了延遲載入的潛在問題清單。 以及實作時需要注意的事項
結論
使用時謹慎並延遲載入圖片和影片，可能會大幅降低初始 載入時間和網頁酬載，包括網站體驗核心指標。使用者不會產生不必要的網路 活動，包括連線速度較慢的網路爭用情況，以及媒體資源在處理方面的成本， 仍可視需求查看這些資源
只要效能提陞技術採用時，延遲載入就合理 沒有爭議的內容。如果網站上有很多內嵌圖像， 減少不必要的下載。網站的使用者和 都是專案利害關係人會很高興的！