延遲載入

延遲載入（Lazy loading）會延後載入非關鍵資源（例如圖片或影片），直到需要時才載入。這能縮短頁面初始載入時間並提升感知效能。

延遲載入讓瀏覽器能優先處理首屏內容，進而改善使用者體驗與效能指標。

一個包含長篇文章的部落格導入了原生圖片延遲載入功能。初始載入時間縮短了 35%，同時捲動效能維持順暢。

哪些內容應採用延遲載入

• 首屏下方的圖片
• 嵌入式影片
• 第三方小工具

請避免對影響最大內容繪製（LCP）的元素（例如頁首大圖）使用延遲載入。

最佳實踐

• 盡可能使用原生延遲載入（loading="lazy"）
• 確保內容可被檢索
• 測試在不同裝置與瀏覽器上的行為

延遲載入應旨在提升速度，而非對使用者或搜尋引擎爬蟲隱藏內容。

常見的延遲載入問題

• 對首屏內容進行延遲載入
• 阻礙內容渲染
• 搜尋引擎無法處理的 JavaScript 式延遲載入