Lazy Loading 延遲載入，是目前提升網站載入速度最有效的技術之一。網站圖片太多、頁面載入慢、跳出率高——這些問題，幾乎每隔一段時間就會有客戶向我們提起。問題根源往往不是設計，而是網頁在用戶未滾動到的位置，就已經把所有資源一次過載入完畢。延遲載入正正解決這個問題：只載入用戶當下看到的內容，其餘等需要時才加載，既省頻寬，又大幅改善體驗與 SEO 表現。
Lazy Loading 是什麼？
Lazy Loading（延遲載入）是一種網頁效能優化技術，核心概念是「按需載入」——網頁打開時，只優先載入用戶可見範圍（首屏）的資源，圖片、影片、iframe 等非關鍵內容，等到用戶滾動接近時才觸發載入。與之相對的是傳統的 Eager Loading（即時載入），頁面一打開便全部資源一次過下載。
用一個簡單比喻：你去餐廳食飯，廚房唔會一次過把所有菜都上齊，而是按順序出菜。Lazy Loading 的邏輯一樣——先給用戶看到、用到的，其餘慢慢來。
延遲載入 vs 預加載
| 技術 | 載入時機 | 適用場景 |
|---|---|---|
| Lazy Loading | 滾動至可視範圍時 | 圖片、影片、長頁面 |
| 預加載 (Preload) | 頁面載入初期主動提前 | 關鍵字型、首屏圖片 |
兩者並不互斥，實際上應配合使用：首屏關鍵資源用預加載確保速度，非首屏資源則用延遲載入減少初始負擔。
延遲載入如何提升網站效能
網站效能的核心指標，Google 已透過 Core Web Vitals 明確說明，其中 LCP（最大內容繪製） 和 FID（首次輸入延遲） 均直接受載入策略影響。啟用延遲載入後，最直接的改善體現在以下幾個層面：
- 減少初始頁面請求數量，瀏覽器無需一次過下載數十張圖片
- 加快首屏顯示速度，LCP 分數明顯改善
- 降低伺服器頻寬消耗，對共享主機尤其重要
- 改善手機瀏覽體驗，流動數據用戶感受更明顯
- 減少不必要的資源浪費，部分用戶從未滾動到底部，那些圖片根本不需要載入
根據 Google Developers 的官方指引，圖片延遲載入可以有效減少初始頁面大小，對移動端效能提升尤為顯著。在香港，大量用戶以手機瀏覽網站，這一點對中小企的網站影響相當實際。
如果你正在規劃或重新設計公司網站，網頁設計初期就應考慮效能架構，而不是設計完成後才補救。
圖片延遲載入的實作方法
圖片是最常見的延遲載入對象，佔網頁總資源體積通常超過 50%。實作方式分兩種：
方法一：HTML 原生 loading 屬性（最簡單）
現代瀏覽器已原生支援 loading="lazy" 屬性，只需在 <img> 標籤加入即可，無需任何 JavaScript：
- 語法：
<img src="image.jpg" loading="lazy" alt="圖片說明"> - 支援 Chrome、Firefox、Edge、Safari 等主流瀏覽器
- 首屏關鍵圖片應設為
loading="eager"或移除此屬性 - 必須同時設定
width和height，避免版面偏移（CLS）
方法二：Intersection Observer API（進階控制）
如需更精細控制載入觸發時機，可使用 JavaScript 的 Intersection Observer API。這方法允許自訂「距離可視區域多遠時開始載入」（rootMargin），適合效能要求較高的網站。相比舊式的 scroll 事件監聽，Intersection Observer 更輕量、效能更佳，是目前業界主流的延遲載入實現方式。
實務上，HTML 原生方法對絕大多數中小企網站已完全足夠，除非需要處理複雜的動態內容或自訂動畫效果，才需要考慮 JavaScript 方案。
JavaScript 延遲載入設定技巧
除了圖片，JavaScript 本身也是拖慢網頁的主要元兇之一。JS 延遲載入主要透過以下幾種方式實現：
defer屬性：腳本在 HTML 解析完成後才執行，不阻塞渲染，適合大部分非關鍵 JSasync屬性：腳本非同步下載，下載完即執行，適合獨立、無依賴的腳本（如分析工具）- 動態載入（Dynamic Import）：用 JavaScript 在需要時才引入模組，適合單頁應用（SPA）
常見錯誤是把所有 JS 都放到 <head> 而不加任何屬性，瀏覽器必須等腳本下載並執行完才繼續渲染頁面，嚴重影響首屏速度。建議非關鍵 JS 一律加上 defer，這是最低成本、效果最直接的優化動作。
第三方腳本（如 Facebook Pixel、Google Tag Manager、即時聊天工具）也應盡量延遲載入，避免這些外部請求拖累整體速度。
WordPress 啟用延遲載入步驟
WordPress 自 5.5 版本起已內建圖片原生延遲載入，對 <img> 標籤自動加入 loading="lazy"，基本情況下無需額外設定。但要做到更全面的效能優化，通常需要透過外掛輔助。
推薦設定步驟
- 安裝效能外掛：如 WP Rocket（付費，功能完整）或 LiteSpeed Cache（免費，適合 LiteSpeed 伺服器）
- 啟用圖片延遲載入：外掛設定內通常有專屬選項，一鍵開啟
- 排除首屏圖片：設定 Hero Image 或 Banner 不套用延遲載入，確保首屏視覺即時呈現
- 啟用 iframe 延遲載入：YouTube 嵌入影片、Google Maps 應一併延遲載入
- 測試效果：用 Google PageSpeed Insights 或 GTmetrix 驗證改善成效
如果你使用 WordPress 網頁設計，效能優化應納入網站建置的基本配置，而不是後期追加的選項。
延遲載入對 SEO 的影響分析
Lazy Loading 對 SEO 的影響，是很多人有疑慮的地方。Google 的 Googlebot 採用 Chromium 為基礎的渲染引擎，能夠處理 JavaScript 並渲染動態內容，理論上可以抓取延遲載入的內容。但實際上有幾個需要注意的地方：
- Google 官方文件明確指出，使用
loading="lazy"的圖片可被正常索引，建議使用原生方法 - 依賴純 JavaScript 的延遲載入，若實作不當（如圖片 src 在 JS 執行前為空），可能導致 Googlebot 無法抓取圖片的 alt 文字及圖片本身
- 延遲載入改善 Core Web Vitals 分數，間接提升 SEO 排名潛力
- 首屏圖片切勿使用延遲載入，影響 LCP 反而得不償失
簡單結論：用原生 loading="lazy" 對 SEO 無負面影響，且透過提升頁面速度指標，對排名有正面幫助。若需要同步提升網站的自然搜尋表現，可了解 SEO 優化的整體策略。
常見延遲載入問題與解決方案
問題一：圖片載入時版面跳動（CLS 偏高）
原因是圖片尺寸未預先定義，瀏覽器不知道預留多少空間。解決方法是在 <img> 標籤明確設定 width 和 height 屬性，或使用 CSS aspect-ratio 預留佔位。
問題二：首屏圖片顯示慢
誤將 Hero Banner 或 Logo 等首屏關鍵圖片也套用延遲載入。應將首屏圖片明確設為 loading="eager"，或加入 <link rel="preload"> 提前載入。
問題三：SEO 無法索引圖片
自訂 JavaScript 延遲載入時，圖片真實 URL 存放在 data-src 而非 src，Googlebot 可能未能正確讀取。建議優先使用 HTML 原生方法，或確保 JS 方案在 Googlebot 渲染時能正常觸發。
問題四：影片嵌入拖慢速度
YouTube iframe 是效能殺手，建議使用「Facade 模式」——先顯示影片縮圖，用戶點擊後才載入真正的 iframe，可大幅減少初始頁面重量。
進階延遲載入優化策略
基本設定做好後，進階優化可以從以下幾個方向入手：
- 使用 WebP 格式：配合延遲載入，圖片改用 WebP 可進一步減少檔案大小 25–35%
- 響應式圖片（srcset）：根據裝置螢幕提供不同尺寸圖片，手機不需下載桌面版大圖
- CDN 加速：配合內容分發網路，從最近的伺服器節點提供資源，減少延遲
- 關鍵 CSS 內聯：首屏所需 CSS 直接嵌入 HTML，避免額外請求阻塞渲染
- 字型延遲載入：非關鍵自訂字型加入
font-display: swap;屬性。這能確保在字型檔案下載完成前，系統先以預設字型顯示文字，避免出現「隱形文字」（FOIT）現象，提升用戶感知的載入速度。 - 第三方資源延遲： 對於 Facebook Pixel、Google Analytics 等分析工具，或是第三方客服對話框，可以設定在頁面完全載入後 2–3 秒再執行，確保不與網站核心內容爭奪頻寬。
最終維護建議：速度與體驗的平衡點
延遲載入雖然強大，但並非「加得越多越好」。過度使用可能導致用戶滾動太快時，頁面出現大量空白區塊，反而損害體驗。
- 設定適當的邊距（Threshold）： 使用 JavaScript 方案時，建議設定在用戶滾動到距離圖片 200–300 像素時就開始加載，讓圖片在進入視線前就已準備就緒，達成「無縫」體驗。
- 加入預覽佔位符： 在圖片載入前，使用輕量的模糊圖片（Blur-up）或與背景色一致的方塊作為佔位符，減少視覺上的突兀感。
- 定期檢測： 每次更新網站內容後，務必使用 Google PageSpeed Insights 檢查 LCP 與 CLS 指標，確保新的延遲策略沒有產生負面影響。
總結：快，是為了留住用戶
延遲載入不只是一項技術指標的優化，更是一種尊重用戶頻寬與時間的表現。在毫秒必爭的網路環境下，透過精準的載入策略，你能讓網站在不犧牲視覺質量的同時，擁有飛快的載入速度。
