Lazy Loading
延遲載入（懶載入）
01你是不是遇到這個 / THE SYMPTOM
我的網頁一打開就把所有圖片、整頁內容全部載完，第一次開超慢。我只想先載使用者看得到的部分，其他等他捲到再載。
↑ 如果你點頭了，你要的關鍵字就是 Lazy Loading。
02這是什麼 / DEFINITION
一種「需要時才載入」的策略：不在一開始就把全部資源（圖片、元件、資料）抓下來，而是等到使用者真的要用到（捲到、點開）那一刻才載，縮短初次載入時間。
03什麼時候用 / WHEN TO USE
長頁面的圖片、首屏看不到的區塊、點開才出現的彈窗或分頁內容、很重的圖表或地圖元件——只要「不是一進來就要用」的東西都適合。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
幫我把這個圖片列表改成 lazy loading，只在使用者捲動到圖片快進入畫面時才載入；HTML img 也加上 loading="lazy"。
05常見坑 / WATCH OUT
⚠ 別把首屏（一進來就看到）的主圖也設成 lazy，反而會讓最大內容繪製變慢、傷 LCP 效能分數。lazy loading 是針對「畫面外」的資源；和 code splitting（拆 JS 程式碼）不同，這個多半指圖片與內容。
06相關的詞 / RELATED