圖片延遲載入怎麼設：讓重要內容先顯示

一篇木作收納盒教學有二十張步驟圖，讀者剛打開頁面，通常不需要立刻下載最後幾個步驟。延遲載入可以讓暫時看不到的圖片稍後才載入，將資源留給眼前的內容，但前提是圖片仍能在需要時順利出現。

這項設定的重點是分配時機，不是把所有圖片都往後拖。先辨認首屏、正文與隱藏區塊，再處理圖片空間與工具分工，最後以實際閱讀順序驗收，才能知道延後下載是否真的有幫助。

先區分首次可見與稍後才需要的圖片

首次進入頁面就會看到的主圖、商品照或必要示意圖，通常應正常載入。Google 特別提醒，不要延遲可能位於首屏的內容，尤其是影響 LCP 的大型圖片。讀者需要先看見作品成品，才能判斷這份收納盒教學是否適合自己。

下方步驟圖、文章後段的補充相片或其他離可視範圍較遠的圖片，才是延遲載入的主要候選。分類時要看實際版面：桌機並排的第三張圖，可能在手機上排到很下面；反過來，手機專用主圖也可能在桌機被隱藏。

不要只用圖片在 HTML 裡的先後順序決定。先檢視主要版型與常用螢幕寬度，把進頁面立即可見的素材圈出來，再設定排除或正常載入。若版面會依活動橫幅改變，也把這種狀態加入檢查，避免版型更新後設定失準。

原生 loading 屬性控制延後，不等於優先權

標準 img 可使用 loading=lazy，讓瀏覽器在圖片接近可視範圍時再下載。loading=eager 表示依正常方式載入，也是未指定時的一般行為。接近到什麼距離由瀏覽器判斷，不能把某份舊教學的像素數當成所有裝置永久通用的門檻。

eager 不表示一定比其他正常圖片更早完成；fetchpriority 則是另一種載入優先順序提示。重要的 LCP 圖片可由工程師評估是否使用 high，但它不會把 lazy 的延後條件取消。把兩個選項都打開，不能保證主圖就會立即出現。

如果網站已能產生正確的原生標記，通常不需要只為一般圖片再加入一套延遲載入程式庫。特殊效果、舊環境或需要更細控制的情況，可以另外評估，但要把新增依賴和維護方式記錄下來，避免簡單圖片背後疊上多套互相改寫的機制。

先保留空間，避免圖片出現時推動正文

圖片尚未下載時，瀏覽器仍需要知道應保留多少位置。img 的 width 和 height 可協助推算比例，讓版面先安排空間；顯示時再由響應式樣式配合容器縮放。這些尺寸應符合素材比例，不能為了消除警告而任意填兩個數字。

收納盒教學若在讀者看到尺寸說明時突然插入一張高圖，正文可能被推走，甚至讓人按到別的按鈕。圖檔小並不能避免這種位移；問題在於空間沒有預留。檢查時要觀察圖片出現前後的文字位置，而不是只看全部載入完畢的截圖。

缺少尺寸也可能使瀏覽器錯判圖片位置，造成不如預期的下載行為。相簿或長列表尤其需要查看實際配置。若圖片會裁成固定比例，可由版型保留適當容器，但仍要確認手機上沒有拉伸變形或裁掉必要細節。

WordPress 與編輯器要決定由誰處理

檢查佈景、圖片外掛、加速外掛與 CDN 是否各自提供延遲載入。不能因為某套外掛關閉了選項，就假設公開頁面已經沒有 lazy 標記；其他功能仍可能在輸出階段加入。先查看實際 img，再回頭找負責設定的工具。

以使用 NitroPack 又保留 Smush 壓縮圖片的網站為例，NitroPack 官方相容文件要求停用 Smush 的延遲載入功能。這是特定工具組合的分工，不能延伸成所有圖片壓縮都應停用。調整時保留仍有需要的壓縮與素材管理功能。

若編輯器把主視覺做成 CSS 背景，不能直接對它套用 img 的 loading 屬性。圖片背景、輪播與隱藏區塊需要依實際實作處理。一般管理者可先整理哪些圖過晚或完全不出現，再交由工程師判斷，避免在後台到處加同名選項卻沒有作用。

1. 選取代表文章，列出首屏、正文後段與隱藏區塊的圖片。
2. 核對實際輸出的載入標記，確認只有預定工具負責處理。
3. 讓首屏重要圖片正常載入，後段圖片延後並預留比例空間。
4. 清楚記錄變更後，從頁首讀到頁尾，檢查圖片出現與版面穩定。

搜尋可讀性不能依賴讀者先點一下

Google 搜尋不會像人一樣點按或捲動操作來觸發內容，因此延遲載入不能只靠這些使用者動作才把重要資料加入頁面。官方建議採可視範圍判斷等方式，並確認需要呈現的圖片在相應狀態能真正載入。

使用 Search Console 網址檢查時，可查看轉譯後的 HTML，核對圖片是否以真正網址出現在 img 的 src。若只留自訂資料欄位或占位圖片，真正檔案要等點按才替換，就應請工程師檢查。這項確認是可讀性的證據，不是保證圖片一定被索引。

無限捲動則還涉及更多內容的發現方式，不能只當成圖片設定。若網站會持續載入下一批文章，應另設可直接抵達且穩定的分頁網址與連結。圖片延後下載和下一批內容是否有獨立入口，是需要分開驗收的兩個問題。

用慢速與快速閱讀情境檢查結果

先在可控制的測試環境查看初次載入：重要主圖是否及時出現、下方圖片是否確實延後，以及主圖的 LCP 是否惡化。再沿著文章慢慢捲動，確認每張步驟圖在閱讀到它時可用。不要只看瀏覽器停止轉圈就認定所有圖片都已完成。

接著快速跳到文章後段、展開收合區塊或切換輪播，觀察是否長時間空白、載入錯誤或內容突然位移。不同瀏覽器對隱藏圖片的行為可能不同，重要版型需在實際支援的環境抽查。限制網路速度時，也要記下設定，方便後續重現。

保存首屏畫面、後段圖片出現情況、下載紀錄與變更前後指標。若沒有明顯效益，或圖片因此更晚可讀，就回頭調整範圍與時機。好的延遲載入應讓讀者自然完成閱讀，而不是為了少幾個初始請求，讓操作教學缺掉關鍵圖片。

建立圖片檔案與替代文字流程

逐項驗證 WordPress 加速設定

辨認 LCP 與版面位移瓶頸

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端