Lazy Loading 是什麼？延遲載入能讓網站跑更快，幫 SEO 加分！

Lazy Loading（延遲載入）是一種網頁優化技術，僅把使用者當下視窗看得到的內容載入，其他圖片、影片或非關鍵內容內容則在使用者滾動頁面時，才會動態載入。

Lazy Loading 把載入順序重新排好，讓重要內容先出現，網站體感速度自然就上來。你會看到 Core Web Vitals 分數比較漂亮，連 SEO 也常常會跟著受益。

接下來讓我們一起了解 Lazy Loading 到底該用在哪裡、怎麼做，以及哪些雷千萬不要踩。

• 延遲載入（Lazy Loading）是什麼？
• 為什麼一定要用 Lazy Loading？3 個實際好處
• 哪些東西可以延遲載入？什麼情況適用？
• Lazy Loading 怎麼做？從原生 Loading 屬性開始
• Lazy Loading 與 SEO 的關聯
• Lazy Loading 最佳作法，速度跟體驗一起顧好
• 延遲載入只是開始，網站效能需長期優化
• 常見問題
• 聯絡犬哥網站

---

延遲載入（Lazy Loading）是什麼？

延遲載入（Lazy Loading）聽起來很技術，但概念其實很直觀：不是所有內容都必須在一開始就載入。

對使用者來說，第一眼看到的內容最重要，其它還沒看到的圖片、影片或外部資源，其實可以晚一點再載。

延遲載入的目的，就是重新安排「 載入順序 」，讓瀏覽器把資源用在真正重要的地方，而不是一進頁面就把所有東西一次塞進來，拖慢整個網站。

只載「 看得到 」的內容、重要的，其他等一下

傳統網站常見的做法是，使用者一進頁面，HTML、CSS、JavaScript、圖片、影片、iframe 全部同時請求，結果就是頁面載入速度慢。

Lazy Loading 舉例來說：

• 首屏的主標題、主要圖片、導覽列 → 立刻載入
• 頁面下方的圖片、推薦內容、影片、地圖 → 使用者快滑到再載

這樣做的好處是首頁內容更快顯示，不浪費頻寬下載使用者根本沒看到的內容，對手機與慢速網路環境特別有感。

Lazy Loading vs Eager Loading，各司其職

在談 Lazy Loading 時，常會一起提到另一個概念「 Eager Loading（預先載入）」，指的是不管使用者會不會馬上看到，只要頁面一載入，就全部先載好。

這兩者適用在不同情境：

• Eager Loading：適合用在「 一開始就一定要看到 」的內容，例如：首屏主視覺、LOGO、導覽列、主要標題、第一個 CTA。
• Lazy Loading：適合用在「 不是馬上需要 」的內容，例如：文章中段、下方圖片、影片、地圖、廣告 iframe、非關鍵的 JavaScript 或外部服務。

通常效能好的網站幾乎一定是混合使用這兩種方式，不過重點不在於「 有沒有用 Lazy Loading 」，而是「 該延遲載入的地方有沒有延遲 」。

---

為什麼一定要用 Lazy Loading？3 個實際好處

Lazy Loading 不用會怎樣？現在的網站資源越來越多、外部服務越來越複雜的環境下，不做延遲載入，網站在素速度通常都很慢。

而 Lazy Loading 帶來的好處，也不只是「 感覺比較快 」而已。

一、網站體驗核心指標更好看

Lazy Loading 最直接的影響，就是縮短一開始的載入時間。因為瀏覽器不用同時處理大量圖片與資源，首屏內容能更快出現，這會直接影響像是 Core Web Vitals 的重點，像是：

• LCP（Largest Contentful Paint）：最大內容繪製，看到最大、最重要內容的瞬間。
• FCP（First Contentful Paint）：首次內容繪製，第一次看到任何內容的瞬間。

Google 官方在效能相關說明中也多次提到：避免一次載入過多非必要資源，是改善使用者體驗的重要手段。當首屏內容更快顯示，使用者也會「 感覺網站很順 」。

二、對手機用戶和伺服器友善

行動裝置的網路環境相對較不穩定，運用 Lazy Loading 能避免手機一進頁面就下載大量圖片，或是使用者還沒滑到就先耗掉行動數據，以及伺服器同時承受大量不必要請求。

尤其是內容型網站、電商、圖片很多的頁面，延遲載入可以大幅減少「 實際沒被使用的流量 」，對使用者與主機端都是雙贏。

三、對 SEO 與排名間接加分

Lazy Loading 本身不是「 排名因素 」，它影響的東西雖然很幾本，但都是 Google 非常重視的項目。

當網站因為 Lazy Loading 而 載入速度變快、Core Web Vitals 改善、行動裝置體驗更順、跳出率下降，這些都會成為 SEO 的間接加分項目。

反過來說，如果網站因為圖片太多、外部資源太雜，導致首屏載入很慢，就算內容寫得再好，也很難在競爭激烈的關鍵字中佔到優勢。

---

哪些東西可以延遲載入？什麼情況適用？

不是所有東西都適合 Lazy Loading。判斷原則很簡單：只要不是「 一進頁面就必須看到、必須用到 」的內容，就有機會成為延遲載入的對象。

圖片

圖片是最常、也最適合做 Lazy Loading 的項目，像是：文章內文中的配圖、商品列表頁的大量縮圖等。

這些圖片在使用者滑到之前，其實沒有立即載入的必要。透過延遲載入，可以大幅減少一開始的下載量，讓首屏更快出現。

不過這裡要提醒一下，Lazy Loading 只是延遲載入圖片，不等於圖片不重要。如果圖片是重要內容的一部分，還是要做好 圖片 SEO，例如：使用 <img> 標籤、正確設定 ALT 等。

影片、地圖、廣告等第三方 iframe

第三方 iframe 幾乎都是 Lazy Loading 的標準對象，常見像是：YouTube、Vimeo 影片、Google Maps 地圖、廣告、嵌入式表單、外部工具等等。

這類資源檔案大、請求多，且通常不是首屏必須出現。如果頁面一開始就載入這些 iframe，很容易拖慢整個網站，尤其在手機上特別明顯。

非關鍵 JavaScript / CSS / 字型與外部服務

也不是所有 JavaScript 都是「 一開始就非載不可 」，像聊天工具、推薦內容、評論系統等非首屏才會用到的互動功能，這些都屬於「 非關鍵資源 」，適合延後載入。

同樣的概念也適用在次要 CSS、非必要字型等，延遲載入這些資源，能讓瀏覽器專心先把畫面描繪出來，避免其他內容跟主內容搶資源。

先把網站架構打好，Lazy Loading 才有用

這是很多人忽略、卻最關鍵的一點。Lazy Loading 並不是貼一行程式碼就會生效，它非常依賴網站本身的結構與設計。

犬哥曾幫 Bosmos 客製化設計網頁，依照他們的需求量身規劃，並把「 效能 」一起納入考量，讓網站不僅美觀，也能成為推動業務的核心工具。

如果網站 HTML 結構混亂、圖片與內容位置規劃不清，或是首屏元素太多、關鍵內容和非關鍵內容混在一起，就算有 Lazy Loading，也很難真的加速。

與其花時間摸索架站技術，不如將重心放在品牌經營與業務發展，「 網頁設計 」就交給犬哥網站，我們的特色包含：

• 多元網站類型
  • 形象網站：展現品牌風格，強化專業形象。
  • 部落格／內容型網站：方便長期經營內容行銷。
  • 型錄網站：適合需要展示大量產品或服務的企業。
  • 電商網站：整合購物車與金流系統，創造銷售機會。
• 專屬客製化設計
  • 依品牌調性設計頁面風格，避免落入制式化模版。
  • 強調視覺與內容並重，確保網站能吸引並留住訪客。
• 技術與效能優化
  • RWD 響應式設計：在手機、平板、桌機上皆有良好瀏覽體驗。
  • SEO 架構優化：打好基礎，提升網站被搜尋引擎收錄的效率。
  • 網站速度優化：縮短載入時間，降低訪客流失率。
• 完整配套服務
  • 專業主機配置，確保網站穩定與安全。
  • 維運監控，避免突發狀況影響營運。
  • 教育訓練，讓客戶能輕鬆上手，後續自行管理網站。

Lazy Loading 發揮得好不好，往往在網站架構階段就已經決定了一半。讓犬哥協助處理從設計、技術到後續維護的每一個環節，幫助網站推動流量與轉換：）

---

Lazy Loading 怎麼做？從原生 Loading 屬性開始

現在要實作 Lazy Loading，已經不像以前那麼麻煩，不一定要自己寫一大堆 JavaScript。

一、用 loading=”lazy” 屬性

目前主流瀏覽器都已支援「 loading=”lazy” 」屬性。只要在圖片或 iframe 上加上，瀏覽器就會自動判斷什麼時候該載、什麼時候可以先等等，這是最簡單、也是最推薦的方式。

優點很明確：

• 不需要額外 JavaScript
• 相容性好
• 行為可預期
• 對 SEO 也相對安全

不過仍要注意，首屏的重要圖片通常不建議延遲載入，否則反而會拖慢 LCP。

二、Intersection Observer API

在需要更精細控制的情況下，可以使用「 IntersectionObserver（交叉觀察器） 」。它能在不卡住網頁的情況下，監控目標元素有沒有進入或離開視窗或容器，並在狀態改變時通知你。

比起傳統滾動畫面時，才出現內容的延遲載入，IntersectionObserver 效能更好、行為更穩定，且不容易漏掉，因此現在大多數 Lazy Loading 都是以它為基礎。

三、第三方工具或外掛

如果你使用的是 CMS（例如：WordPress），其實也不一定要自己處理所有細節。

許多效能外掛或前端工具已經幫你整合好，像是圖片、iframe 的 Lazy Loading 會搭配快取、壓縮、CDN 等，這類工具都可以幫你省時、省力。

---

Lazy Loading 與 SEO 的關聯

Lazy Loading 會影響搜尋引擎怎麼看你的內容，關鍵在於搜尋引擎能不能正常「 看到該看的內容 」。

Google 如何處理 Lazy Loading 內容

Google 能理解 Lazy Loading，但內容必須在不需要額外互動的情況下就能載入。

如果一定要點擊按鈕或滑到最底，或是一定要觸發特定事件內容才會出現，Google 可能根本不會去執行這些操作，結果就是內容沒被抓到、沒被索引。

因此，Lazy Loading 的觸發方式非常重要。使用瀏覽器原生屬性或 IntersectionObserver，通常是相對安全的做法。

延遲載入圖片與圖片 SEO 的關係

圖片可以延遲載入，但圖片 SEO 不能延遲執行。對搜尋引擎來說，能不能抓到 <img>、有沒有 alt、是否能正確理解圖片與內容的關係，這些都很重要。

如果因為想要有 Lazy Loading 效果而把重要圖片藏在背景圖，或用不利於解析的方式載入，那圖片在搜尋結果中曝光的機會，就會大幅下降。

正確做法是 Lazy Loading 與圖片 SEO 並行，而不是二選一。

JavaScript 的 Lazy Loading 與搜尋引擎渲染流程

JavaScript 用 Lazy Loading 最需要注意的是「 時機 」。

如果 JavaScript 延遲太久才執行，或只在使用者互動後才載入關鍵內容，那在搜尋引擎的渲染流程中，這些內容可能永遠不會出現。

這也是為什麼 SEO 相關的重要文字內容，不建議完全依賴 JavaScript，否則在搜尋引擎眼中，這些內容就等於不存在。

---

Lazy Loading 最佳作法，速度跟體驗一起顧好

Lazy Loading 本身不難，以下這幾個做法是在實際優化網站效能時，最常被忽略、卻最重要的地方，分享給大家～

做法 1：只延遲「 第一屏外 」的內容

網頁第一屏的內容，像是主視覺圖片、主要標題、首屏的關鍵 CTA，幾乎決定了使用者對網站的第一印象。

這些內容如果也被 Lazy Loading 延後載入，反而會讓畫面「 慢半拍出現 」，直接影響 LCP 與使用者體感速度。

Lazy Loading 的目的是「 不要讓不重要的東西，拖慢重要的內容 」。正確做法是：第一屏內容正常載入，使用者需要滑動後才會看到的內容再設定 Lazy Loading。

做法 2：預留元素空間，避免 CLS 跑版

這是 Lazy Loading 最常踩到的坑之一。

如果圖片、影片或 iframe 延遲載入，但沒有先預留高度或比例，內容載入時，整個版面就會被往下擠，造成畫面跳動，也就是 CLS（Cumulative Layout Shift，累積版面配置轉移）。

這種情況使用者會覺得畫面不穩定，且點擊時容易誤觸，Google 也會直接偵測到 CLS 過高。

無論是否使用 Lazy Loading，只要是圖片或嵌入內容，都應該在版型上先預留空間，讓版面結構在載入前後保持一致。

｜CLS（Cumulative Layout Shift，累積版面配置轉移）：Google 核心網頁指標之一，用來衡量網頁載入過程中，內容元素（如圖片、廣告、文字）發生非預期移動的程度，分數越低表示頁面越穩定，用戶體驗越好。

做法 3：Lazy Loading + CDN 效果加乘

Lazy Loading 解決的是「 什麼時候載入 」，CDN 解決的是「 從哪裡載比較快 」。這兩者搭配使用，效果會非常明顯。

即使內容被延遲載入，如果來源距離使用者很遠，或伺服器回應慢，實際載入時還是會卡。

透過 CDN，把內容資源放在離使用者更近的節點，再搭配 Lazy Loading，才能不浪費不必要的請求，又能在需要時快速載入。

這也是為什麼效能優化幾乎不會只做單一手段，而是多種策略一起搭配。

做法 4：測試載入時間，工具一起看

做完 Lazy Loading 之後，你需要實際確認首屏是否真的更快，LCP、CLS 分數是否改善，以及是否有 Lazy Loading 設定過頭，導致內容延遲顯示的狀況。

這時候就一定要搭配 網頁載入速度測試工具 來看數據，而不是只看肉眼感覺。Lazy Loading 是「 優化 」的一環，不是做完就結束，測試與調整才是關鍵。

---

延遲載入只是開始，網站效能需長期優化

Lazy Loading 可以幫網站減重、加速，但它永遠只是整體效能策略中的一小部分。

真正跑得快、又穩定的網站，通常會把「 延遲載入 」和「 圖片、快取、CDN、前端結構，以及內容與設計決策 」等一起納入考量，而不是單點優化。

同時也別忘了，效能不只來自技術。如果頁面本身塞滿不必要的內容、圖片過多、設計過度複雜，再多的 Lazy Loading 都只是補救。

把 Lazy Loading 當成一個起點，持續檢視並改善網站的內容與設計，才是讓網站長期維持速度與體驗的關鍵。

---

常見問題

---

聯絡犬哥網站

在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。

資源一：犬哥網站（專業 WordPress 網頁設計＆數位行銷公司）

如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆數位行銷公司），請專家協助你會更容易！

我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗，加上上百個實戰案例，絕對能滿足您的需求！

資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）

如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？

可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！