Lazy Loading
Lazy loading 延後載入非首屏資源可提升首屏速度，但若用錯可能影響 LCP 或讓內容不易被抓取。
定義
Lazy loading 是延後載入非立即可見資源（圖片、iframe）的策略（例如 loading="lazy"）。它能減少首屏負載，但若把首屏主圖也 lazy，可能讓 LCP 變差；若內容只在滾動後才載入，爬蟲也可能抓不到。
為什麼重要
- 能降低首屏資源負載，加快初始頁面載入速度
- 減少不必要的頻寬消耗，對行動用戶友善
- 配合圖片尺寸可減少 CLS（保留空間避免跳動）
- 瀏覽器原生支援 loading="lazy"，無需額外 JS
- 對長頁面尤其有效，避免一次載入數十張圖
- 用錯會影響 LCP 與可索引性（首屏主圖不應 lazy）
- iframe（如 YouTube）lazy 載入能大幅降低首屏阻塞
怎麼做（實作重點）
- 首屏主圖不要 lazy，改用 fetchpriority="high" 或 <link rel="preload">
- 對非首屏圖片統一使用 loading="lazy"
- 確保重要內容不是只有滾動後才出現（影響爬蟲）
- 為 lazy 圖片設定 width 與 height 避免 CLS
- iframe（如 YouTube embed）也可用 loading="lazy"
- 使用 Intersection Observer 實作進階控制（動畫效果等）
- 測試：用 DevTools Network 面板確認圖片只在需要時載入
範例
html
<!-- 非首屏圖片使用 lazy -->
<img src="/below-fold.webp" alt="產品圖片" loading="lazy" width="800" height="600" />
<!-- 首屏主圖用 eager（預設）+ fetchpriority -->
<img src="/hero.webp" alt="主視覺" loading="eager" fetchpriority="high" />
<!-- iframe 也能 lazy -->
<iframe src="https://www.youtube.com/embed/xxx" loading="lazy"></iframe>html
// 更精細控制的 lazy loading
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
}, { rootMargin: '100px' });
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});相關連結
常見問題
關於這個詞彙的常見問答。