如果您的 WordPress 網站對於視覺嚴重依賴，擔心loading 跑完之後 就不會看到圖片慢慢載入的過程或是破圖，這時您就必須添加延遲載入功能。此功能有助於提高 WordPress 網站的頁面速度和性能，使其對您的 SEO 工作至關重要，例如我們 TAKI Cloud 就有使用延遲載入技術。
本文將探討延遲載入的工作原理以及優缺點。您可以學習如何在您的網站上設定優化以獲得更好的 SEO 方法。
延遲載入是什麼？
是一種設計模式，被運用在軟體設計和網頁設計當中，對於網頁介面，其特徵為使用者透過滑鼠或觸控，捲動瀏覽頁面，直到頁面下方時，才會依照 Javascript 等程式碼，發出連線請求，自動下載載入更多內容於同一網頁，以減少網路頻寬與裝置負擔；有多數網站採用這項網頁設計，例如 Google 圖片搜尋、Google+、Facebook、Twitter、Pinterest、Youtube、部分論壇和維基百科的 Flow討論系統。部分新聞網站會接續載入其他與原內容不相關的其他內容於同一網頁，也有結合無限捲動和多頁，兩著特性的網頁設計，以便快速定位尋找內容。
此種設計的缺點是如果是比較後面的資料內容，就需要逐一等候載入，無法和傳統多頁式設計那樣，可以快速定位內容。
而對於資料結構而言，惰性載入是指從一個資料物件通過方法獲得裡面的一個屬性物件時，這個對應物件實際並沒有隨其父資料物件建立時一起儲存在執行空間中，而是在其讀取方法第一次被呼叫時才從其他資料來源中載入到執行空間中，這樣可以避免過早地匯入過大的資料物件但並沒有使用的空間占用浪費。
WordPress 延遲載入如何工作？
當用戶瀏覽 WordPress 網站時，他們的瀏覽器會立即下載網頁中的所有圖像。對於具有許多高分辨率圖像的頁面，此過程可以顯著減少加載時間，從而損害您的網站性能。
向您的網站添加延遲載入功能會提示它僅下載用戶螢幕上可見的圖像。其餘的媒體文件由佔位符圖像替換，並且僅在用戶進一步向下滾動網頁時加載。
WordPress 延遲載入的優缺點
以下我們說明一下在 WordPress 中實現圖像延遲載入功能的優缺點：
優點：
- 減少頻寬使用，降低代管成本。
- 提高網站速度，使訪問者的瀏覽體驗更好。
- 提升移動裝置體驗。
- 優化最大內容繪製分數。
- 改進SEO工作，提高您網站的搜索排名。
缺點：
- 導致內容緩衝，影響加載速度。
- 減慢快速滾動。
如何將 WordPress 延遲載入添加到您的網站 3 種方法
小編在這裡說明三種方法可以在您的 WordPress 網站上設定延遲載入。我們建議選擇最適合您情況來做您 WordPress 網站設定。
1. 延遲載入需升級到 WordPress 5.4 或更高版本
WordPress 5.4 版本及更高版本有預設的延遲載入圖像，所以將您的 WordPress 更新到最新版本可以自動啟用延遲載入。
如果不允許您配置要延遲載入的圖像而您的網站卻又過度使用該功能，此時網站就會出現上述缺點。
另一個需要考慮的因素是每個 WordPress 版本中延遲加載功能性質不同。WordPress 自從發布了 WordPress 5.9 版本後進行了改進，以解決舊版本的大型內容繪製分數不佳的問題。
這也是不斷的提醒需要將 WordPress 版本更新到最新，因為舊 WordPress 版本上運行的網站不會獲得與使用 WordPress 5.9 相同的好處。
2. 通過瀏覽器啟用延遲載入
Chrome、Firefox 和 Opera 等流行瀏覽器支援原生圖像延遲載入。您只需將 <img loading= “lazy”> 載入屬性添加到目標圖像和視頻即可自動啟用它。
在 WordPress 延遲載入 loading 屬性支援這三個參數：
- Auto ‒ 觸發默認的延遲載入，這與不包括載入屬性相同。
- Lazy ‒ 分配資源的載入，直到每個資源都達到與螢幕視窗指定距離。
- Eager ‒ 頁面加載後立即加載所有圖片，不管位置如何。
以下是如何使用延遲載入參數的範例：
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" loading="lazy" decoding="async" data-src="圖片檔名.jpg" loading="lazy" alt="延遲載入圖片" width="500" height="500">
此方法非常適合延遲載入特定圖片，您可以為每張圖片提供一個載入屬性參數，指示它們在視窗中出現的時間。然而延遲載入單張圖片可能需要一些時間特別是在您的網站有大量媒體檔案的情況下。
3. 安裝外掛使用延遲載入
由於並非所有瀏覽器都支持圖片和影片的延遲載入，因此第二種方法可能不會一直都有效。您也可以透過安裝 WordPress 延遲載入外掛來解決此問題。此方法使您可以更好地控制哪些圖像要延遲載入而無需編輯程式碼。
以下是可供選擇的延遲載入最佳 WordPress 外掛，您可以透過 WordPress 外掛目錄搜尋並使用這些外掛。
Optimole 是滿足您所有圖像優化需求的一體化解決方案。憑藉完全自動化和一系列進化功能，Optimole 可以輕鬆清理肥大的圖像和臃腫的頁面。
Optimole 使用基於雲系統實時優化您的圖像，以加速您的網站並提供適合每台設備的完美尺寸的高質量圖像。通過一鍵設置和最小的佔用空間，您可以在幾分鐘內開始改進您的網站。
您可以通過 Optimole 的設置不必擔心圖像優化。它還可以通過 CDN 和完美尺寸的圖像提供延遲載入，所以 Optimole 非常適合您。
Smush 是一個流行圖像優化外掛，此外掛由WPMU DEV超級團隊為您帶來功能強大且100％免費的WordPress圖片優化大師！支援優化圖片、延遲載入，調整圖片大小，壓縮和放大 & 改善您的 Google Page Speed！
無論您將其拼寫為“優化(optimise)”還是“優化(optimize)”，Smush都會壓縮圖片而不會出現品質下降的情況。
a3 Lazy Load 是一個對於移動設備支援度相當高且非常簡單易用的外掛，也是加快網站頁面加載速度好用的外掛。它與 WordPress 5.9 和許多流行工具完全兼容，除了提供圖像延遲加載的基本功能外，a3 延遲載入還提供您延遲載入影片，包括頁面中的嵌入影片、文章、自定義文章類型和小部件。延遲載入效果和從 Head 到 Footer 加載腳本的選項也可用。您的網站內容越多，外掛的性能就越好，您將看到更多性能躍昇。
WordPress 延遲載入技巧
當您使用延遲載入來讓您網站SEO分數提高關鍵是在於如何正確使用此功能。以下是在您的 WordPress 網站上執行延遲載入的一些技巧：
- 不要延遲載入任何頁首輪播的大圖片：由於輪播一般放置在頁面頂部的圖片，通常開啟網站加載時就馬上可見，因此延遲載入它們是沒有任何好處。
- 選擇適當的佔位符 placeholders：我們建議使用純色、主色或低質量圖片作為圖像的佔位符。
- 添加圖片加載的緩衝時間：這樣，您的圖片就可以在進入訪問者的視窗之前準備就緒，進而消除任何等待時間。
- 設定圖片容器的尺寸：這樣做將有助於避免突然的佈局變化，使您的網頁在加載時看起來整潔。
- 僅在頁面過長情況下延遲載入：那些需要超過兩個捲軸才能到達末尾並且一開啟時有超過五個圖片需要 loading 進的頁面。
結論
在 WordPress 中延遲載入圖片可讓您為訪問者提供更好的瀏覽體驗。除了提高網站速度外，此功能還可以減少您的頻寬使用。總體而言，它有助於您的 SEO 提高搜尋排名。
我們希望本文章能幫助您了解如何充分利用 WordPress 網站上的延遲載入功能並確保使用高質量的 WordPress 主機來進一步提高您網站的性能。祝你好運！
學習其他 WordPress 技術
- 什麼是 WordPress 資料庫
- WordPress GDPR：了解如何遵守資料保護法
- WordPress 自定義字段
- 如何設定 WordPress 分頁
- 如何在 WordPress 中建立簡碼
- 如何加速 WordPress 網站
