延遲屏幕外圖像：如何修復此 Google Lighthouse 機會

衡量您網站的性能通常是一項成功或失敗的工作。 這是因為可用的工具無法讓我們正確了解與網站性能相關的用戶體驗。 然而，Google Lighthouse 修復了很多這些缺點，並使您可以將其融入您的開發工作流程。 Lighthouse 中的“機會”之一是延遲 WordPress 中的屏幕外圖像。 好消息是這很容易實現。

對於這篇文章，我們將看看 🔎 如何使用代碼和插件在 WordPress 中延遲屏幕外圖像。 不過，首先，我們必須弄清楚一些關於 Google Lighthouse 的術語，然後討論Defer offscreen images指標應該放在優先級列表中的什麼位置。

審計建議和機會之間的區別

在我們了解如何在 WordPress 中延遲屏幕外圖像之前，了解此指令如何插入 Google Lighthouse 非常重要。 這是一個績效“機會”，而不是審計建議。 這是區別：

• 審計建議。 這將對您在 Google Lighthouse 中的分數產生決定性影響，您應該優先關注這些指標。
• 機會。 雖然這些仍然有一定的重要性，但它們不會影響您的審核分數。 因此，您可以將它們視為次要問題。

Defer offscreen images指標是一個機會。 這意味著它仍然可以產生影響，但是一旦你的分數不能再提高了，你就可以看看它。

延遲屏幕外圖像——一個定義

您的網站可能會在頁面的所有部分使用圖片。 其中一些將顯示在“折疊上方”——即，無需滾動即可顯示在屏幕上。 因此，屏幕外圖像代表其他一切。

Defer offscreen images指標是指滿足以下四個標準中的任何一個的視覺元素：

• 圖像必須從可見頁面區域下方開始，並以該區域高度的三倍結束。
• 超小圖像（小於 0.02 MB 的圖像）不會計入Defer 離屏圖像指標。
• 加載時間超過 50 毫秒的頁面將觸發機會。
• 如果您的頁面定義了加載屬性，您將根本看不到Defer 屏幕外圖像。 劇透警報：現在就適應loading="lazy"吧！

此外，您可能會發現具有大量屏幕外圖像的站點的 Largest Contentful Paint (LCP) 分數很低。 這給 Google Lighthouse 10 帶來了一個令人困惑的變化，我們將在接下來介紹。

改善交互時間 (TTI) 是一個貶值的指標

在舊版本的 Google Lighthouse 中，延遲屏幕外圖像會影響 TTI。 然而，谷歌現在認為這是一個貶值的指標。 10% 的權重使整體性能審核分數轉移到累積佈局偏移 (CLS)，現在提供 25% 的權重[1][2] 。

這帶來了一個問題，無論您是否將圖像延遲到屏幕外，這都不會導致佈局偏移。 因此，這就是為什麼Defer offscreen images現在只是一個機會，而不是完整的審計建議。

為什麼 Google Lighthouse 會要求您推遲屏幕外圖像

儘管Defer offscreen images降級了，但它對加載速度和性能仍然有一定的重要性。 您可以在您選擇的任何工具中在幾秒鐘內看到完全加載的屏幕外圖像的影響：

雖然此指標不會影響 CLS 或 TTI，但它可能會對 LCP 產生影響——儘管在許多情況下影響很小。 這也是一個很好的提醒，您應該只在需要時加載圖像。 接下來，我們將討論原因。

為什麼不應該一次加載所有圖像

在談話中，我們都遵循“合作原則”。 這不是社會科學課，所以我們不會在這裡詳細介紹。 然而，這個概念的一個重要方面對Defer offscreen images指標很重要。 “Grice 的數量準則”指出，您應該只披露建立上下文所需的信息。

為什麼這很重要？ 因為如果你提供太多信息，這可能會導致聽眾過載（以及其他問題）。

因此，您也不應一次加載您網站的所有圖像！ 這是出於幾個充分的原因：

• 用戶將看不到屏幕外圖像，否則它們將佔用屏幕上元素所需的資源。
• 加載屏幕外圖像可能會導致糟糕的用戶體驗 (UX)，因為頁面加載時視口內不會發生任何值得注意的事情。
• 對於用戶來說，這也可能會在經濟上造成損失。 例如，假設有人在使用移動數據而不是 Wi-Fi 瀏覽到一個不延遲任何屏幕外圖像的網站。

鑑於 Google Lighthouse 的重點是用戶體驗以及感知性能如何影響它，理解以上所有內容都至關重要。 好消息是有一種直接的方法可以延遲屏幕外圖像。

如何延遲您網站上的屏幕外圖像

答案是：延遲加載。 這是減少屏幕外圖像對網站感知性能影響的最直接、最有效的方法。 更好的是，大多數瀏覽器都支持延遲加載：

但是，Firefox 僅支持圖像的延遲加載，如果您選擇為內聯框架實現這一點，這將很重要。 儘管如此，您仍有許多方法可以實現這一點。 主要方法是在<img>或<iframe>元素中使用 HTML loading屬性。 您可以選擇使用三個不同的值：

• eager 。 這將告訴瀏覽器首先加載這些圖像。 這是默認選項，與完全不包含它一樣好，因為無論圖像在頁面上的什麼位置，它都會始終呈現。
• lazy 。 這將延遲加載圖像或 iframe，直到它到達與視口的硬編碼距離。 確切的距離可能因瀏覽器而異，而且您也希望始終指定圖像尺寸。
• auto 。 瀏覽器將為作業選擇最佳選項。

正如您所期望的，這實現起來很簡單：

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

當然，這裡在前端看不到任何東西，因為無論如何圖像都會在屏幕外並且不可見。

如果您選擇使用 Accelerated Mobile Pages (AMP)，則可以使用amp-img元素自動實現延遲加載。 對於其他平台，模塊或插件是實現延遲加載的最佳方式。

如果您希望在 WordPress 中延遲屏幕外圖像，您需要使用專用插件來執行此操作。 默認情況下，WordPress 為所有圖像實現延遲加載，但這種寬泛的畫筆可能不適合您的確切需求。

使用 WordPress 插件為您的網站添加延遲加載

每當您想向 WordPress 添加任何額外功能時，插件始終是您的最佳選擇。 說到懶加載，也可以這樣。

WordPress 有許多插件可以幫助您添加延遲加載，但並非所有插件都是一樣的。 例如，有些評分和評論很差，有些沒有得到很多更新，有些甚至無法提供適當級別的功能。 然而，Optimole 可以在圖像壓縮和延遲加載方面發揮作用。

這不會是 Optimole 總體上可以做什麼的概述——我們的姊妹網站 Themeisle 可以向您展示這一點。 相反，我們將重點介紹延遲加載圖像所需的快速且無痛的選項。 要找到正確的選項，請前往媒體 > Optimole > 設置屏幕，然後尋找縮放圖像和延遲加載切換開關。 您需要確保它已打開：

執行此操作後， “高級”>“延遲加載”部分將提供大量選項：

這為您提供了一組有價值的選項。 例如，您可以為圖像啟用佔位符、在瀏覽器原生加載或經典延遲加載之間切換、啟用圖像縮放等。

但是，您需要進一步研究兩個設置。 第一個讓您從加載中排除一定數量的圖像。 默認值為三張，但您可以將其設置為您在首屏上有多少張圖片。 這意味著您將對站點上的所有圖像實施延遲加載：

另一個很酷的功能是能夠指定 CSS 選擇器來幫助您延遲加載背景圖像：

這為您提供了一種方法，可以根據您的需求和 Lighthouse 分數自定義整個延遲加載體驗，同時保留一些靈活性。 更重要的是，免費版的 Optimole 可以實現上述所有功能！

結論🧐

如果圖像不在屏幕上，則無需加載它們。 如果沒有諸如延遲加載之類的解決方案，您將不得不延長網站加載所需的時間。 它還會影響一些與性能相關的最重要指標。 Google Lighthouse 的Defer offscreen images機會讓您推動實現某種延遲加載，並且有很多無代碼的方法可以做到這一點。

例如，Optimole 是幫助您在 WordPress 中延遲屏幕外圖像的最佳插件之一。 您可以設置比 WordPress 所採用的全局“始終在線”方法更具體的選項。 但是，還有其他插件也可以幫助您執行此操作，例如緩存插件。 甚至編碼路徑也很簡單，更好的是，您幾乎可以得到所有瀏覽器的支持。

Optimole 會成為您在 WordPress 中延遲屏幕外圖像的方法嗎？ 在下面的評論部分與我們分享您的想法！