有很多方法可以 提高您的 WordPress 網站的性能. 圖片及其他 媒體文件 是載入時間過長的罪魁禍首之一。 這意味著實施任何圖像優化方法都會顯著影響網站性能，延遲載入也不例外。
在本文中，我們將討論延遲載入的工作原理以及它如何使您的網站受益。 然後，我們將向您展示一些在 WordPress 中為多種類型的元素添加延遲載入的最流行方法。 最後，我們將討論此設置可能導致的一些最常見的技術問題。
讓我們開始吧！
什麼是延遲載入？
通常，當您訪問一個網站時，它的所有組件都會嘗試一次載入。 您的瀏覽器將顯示頁面上的每個媒體資產、文本、鏈接和其他元素。 如果頁面有許多媒體資產（例如圖像），它們會顯著減慢載入時間。
有很多方法可以減少圖像對頁面載入時間的影響。 您可以優化圖像， 啟用瀏覽器緩存, 使用內容交付網路 (CDN)，並選擇 較小的文件類型. 理想情況下，您會加倍努力並儘可能多地實施這些優化，因為沒有網站速度過快這樣的事情。
延遲載入不會減少圖像文件的大小，也不會改變為每個用戶載入所需的時間。 相比之下，此設置可以推遲載入每張圖片，直到您的瀏覽器視口到達包含該文件的頁面部分：
實際上，如果您已經擁有響應式站點，則延遲載入對用戶與您的網站的交互方式的影響應該很小。 大多數訪問者在滾動瀏覽您的頁面時不應該注意到出現的圖像。 同時，您可以受益於更快的初始載入時間，因為用戶不必同時請求和載入每個圖像。
WordPress 延遲載入的好處是什麼？
延遲載入有助於縮短初始載入時間。 當您考慮到這一點時，這是必不可少的 40% 的用戶 如果載入時間超過三秒鐘，則會離開網頁。 因此，此設置可以吸引訪問者留在您的網站上並瀏覽您的內容。
此外，延遲載入可以減少內存和存儲的壓力。 因此，使用它可能會讓您選擇更實惠的 網站託管計劃.
需要注意的是，從 WordPress 5.5 開始，內容管理系統 (CMS) 默認情況下延遲載入圖像. 但是，關於默認方法是否可以 損害 Core Web Vitals 分數.
默認情況下，延遲載入可縮短紙張的載入時間。 然而，它也可以傷害 最大的內容繪製 (LCP) 分數。
LCP 測量載入任何頁面上最大圖像或文本塊所需的時間：
WordPress 使用 HTML 載入 = 延遲屬性 用於您網站上的圖片。 一般來說，這是實現延遲載入的最簡單方法。 但是，並非所有瀏覽器都支持該屬性。
如果要禁用特定圖像的延遲載入，則需要使用 HTML 手動修改該屬性。 另一種方法是使用 WordPress 插件，該插件通過不同的方法實現延遲載入（這讓您有更多的控制權）。
其他元素可以延遲載入嗎？
從技術上講，您可以延遲網站上幾乎所有元素的載入。 延遲載入對圖像非常有效，它也是視頻資產的殺手級功能。
除了媒體資源，您還可以延遲載入 JavaScript 和 CSS 等代碼。 事實上，我們建議延遲可能會阻止您網站呈現的腳本，以改善您的網站 首次內容繪製 (FCP) 分數。
繼續，您還可以選擇延遲載入文本資產。 但是，從可用性的角度來看，這不是一個好的做法。 此外，即使您在頁面上顯示整本書的文本，也不會對載入時間產生顯著影響。
延遲載入最適合顯著影響載入時間的重媒體資產。 但是，WordPress 核心僅支持圖像的延遲載入。 如果您想將該實踐擴展到其他元素，則需要尋找替代實現。 這就是插件的用武之地。
如何在 WordPress 中為圖像和視頻添加延遲載入
正如我們之前提到的，WordPress 默認為所有圖像添加延遲載入。 但是，您幾乎無法控制延遲載入哪些圖片。 如果您想選擇不同的方法，我們建議您使用 a3 延遲載入 插入。
步驟 1：安裝並激活 a3 延遲載入插件
a3 插件使您能夠從延遲載入中排除特定的圖像和頁面。 此外，它還支持延遲載入您網站上的視頻：
該插件還增加了對延遲載入外部圖像和視頻的支持。 這是 WordPress 核心實現不做的事情。
從您的 WordPress 儀錶板安裝並激活插件。 您現在可以自定義工具的設置。
第二步：調整插件圖片設置
接下來，前往設置> a3 延遲載入。 在 Lazy Load Activation 下查看，您會注意到插件在安裝後默認處於打開狀態。
打開延遲載入圖像選項卡。 您可以 (1) 選擇在您的網站中延遲哪些圖像，以及 (2) 為阻止 JavaScript 的瀏覽器啟用回退。 您還可以 (3) 為不想延遲載入的圖像設置 CSS 類：
默認設置已打開每個選項，我們建議保持。 繼續並設置一個 CSS 類，使您能夠跳過特定圖像的延遲載入。
第 3 步：調整插件視頻設置
接下來，轉到延遲載入視頻和 iframe 選項卡。 與圖像一樣，a3 Lazy Load 使您可以為特定剪輯選擇延遲載入。
該插件支持 (1) 內容和小部件中的視頻，並為阻止 JavaScript 的瀏覽器提供 (2) 後備功能：
視頻設置 (3) 使您能夠指定一個 CSS 類，從延遲載入中排除特定視頻。 為了更容易配置，您可以使用您在圖像部分中選擇的相同類。
步驟 4：禁用延遲載入（可選）
最後，如果您想為特定類型的頁面禁用延遲載入，您可以在「按 URL 和頁面類型排除」選項卡中執行此操作。 您可以在此處輸入不應使用延遲載入的特定頁面或內容類型：
保存對插件設置的更改，您就可以開始了。 如果要禁用特定元素的延遲載入，請打開編輯器並選擇要配置的圖像或視頻塊。
打開塊設置菜單並導航到高級選項卡以找到附加 CSS 類欄位：
您可以使用該欄位添加在配置插件時設置的延遲載入排除類。 如果您這樣做，當用戶訪問您的網站時，該圖像將立即載入。
解決延遲載入問題
儘管延遲載入很方便並且是 WordPress 的核心功能，但它也可能導致您的網站出現多種類型的錯誤。 本節將討論這些問題是什麼以及如何解決它們。
摺疊上方的圖像問題
一般來說，我們建議您不要在首屏延遲載入圖片。 當我們說「首屏」時，我們指的是訪問者從您的網站載入頁面時看到的第一個視口。
將圖像推遲到首屏會影響您的 FCP 分數。 它還可以影響用戶訪問您網站時的第一印象。
簡單的解決方案是禁用頁面標題和其他頂部元素中圖像的延遲載入。 例如，如果我們以此頁面為例，我們建議為 (1) 徽標和 (2) 標題背景禁用延遲載入：
WordPress 要求您 將代碼添加到您的網站 禁用其本地延遲載入實現。 關閉特定媒體資源的延遲載入的最簡單方法是使用插件，例如 a3 Lazy Load，正如我們在上一節中探討的那樣。
由於延遲載入而導致布局偏移
當您載入頁面並且元素在變得可見時四處移動時，就會發生布局轉換。 這 累積布局偏移 (CLS) 是一個 核心網路至關重要 衡量布局轉變。 在某些情況下，延遲載入實施不當會影響您網站的 CLS 分數。
頁面上的元素不會一次全部載入。 相反，它們一個接一個地完成，即使這個過程在瀏覽器上看起來幾乎是即時的。 當您有在其他元素之後載入的圖像文件時，它們可以四處移動這些資產。
該問題的解決方案是避免在 WordPress 中使用全尺寸圖像。 當您將圖片上傳到 WordPress 時，CMS 會自動將它們調整為標準解析度：
即使使用延遲載入，使用標準解析度也可以降低布局發生劇烈變化的可能性。 您還可以為每個文件手動指定圖像尺寸。 然而，這是一個耗時的過程。 簡而言之，我們只建議對您想要以獨特尺寸顯示的圖像執行此操作。
延遲載入和緩存插件的問題
這很常見 緩存插件 與延遲載入工具衝突。 一些緩存插件，例如 WP火箭，包括內置的延遲載入功能。 將該功能與延遲載入插件（例如 a3 Lazy Load）一起使用通常會導致衝突。
我們建議堅持使用一個插件系列，以避免由於工具衝突而導致圖像不顯示的問題。 如果您同時啟用了延遲載入和緩存插件並且開始遇到錯誤，我們建議您先停用前一個選項：
禁用延遲載入插件後，檢查您的圖像是否正確載入。 如果是這種情況，您的緩存工具可能帶有內置的延遲載入功能。 這意味著您無需為該功能設置任何其他軟體。
結論
雖然延遲載入是 WordPress的核心功能，有一些方法可以改進其實施。 您可以使用插件，例如 a3 延遲載入 更好地控制您網站上的延遲載入。 使用正確的插件，您還可以配置和排除外部資產的延遲載入。
根據您實現延遲載入的方式，這種做法應該會大大減少頁面載入時間。 您的網站媒體越多，您看到的結果就越好——所有這些都不會對用戶體驗產生任何負面影響。
您對在 WordPress 中使用延遲載入有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！
精選圖片來自 vectorplus/shutterstock.com