如何實現WordPress圖片和視訊懶載入（圖文教程）

如果您的WordPress網站嚴重依賴視覺內容，您可能需要為其新增懶載入功能。此WordPress功能有助於提高網站的頁面速度和效能，使其對您的SEO工作至關重要。

根據HTTP Archive，網頁平均體積為3719 kB，其中影象和視訊佔總體積的近78％。 這對於網站訪問者的瀏覽器下載和渲染來說是很多位元組，並且未來的趨勢網頁越來越大及使用更多的影象或者視訊內容。 在共享媒體和將媒體檔案整合到網站設計中時，WordPress正在引領潮流。 使用WordPress，可以輕鬆地將影象和視訊整合到文章，頁面甚至主題的背景中。

但是，過多的媒體資源使得網頁載入變得非常緩慢，因為使用者在檢視網頁之前必須等待下載大檔案（包括最初未顯示的檔案）。 這是為什麼我們要對WordPress做圖片或者視訊懶載入（延遲載入）的原因。

• 什麼是懶載入以及它如何工作？
• WordPress懶載入的優缺點
• 為什麼要做影象懶載入？
• 如何為您的WordPress新增懶載入
• 懶載入對SEO的影響
• WordPress延遲載入技巧

什麼是懶載入以及它如何工作？

延遲載入（又稱懶載入）是一種載入可見內容的優化技術，即延遲下載和呈現在首屏下方需要顯示的內容。延遲載入不是一次載入所有影象，而是僅下載使用者螢幕上可見的影象。它用佔位符影象或空白區域替換所有其他影象。當使用者向下滾動時，您的網站會載入在瀏覽器檢視區域中可見的影象。

這也是谷歌極力推廣的網頁優化策略“縮減首屏內容的大小”，如果您的WordPress文章和頁面包含大量嵌入式視訊和高解析度影象，這是一種應該考慮的技術。

延遲載入的工作方式如下：

• 瀏覽器在不下載影象和預載入視訊下構建網頁DOM而。
• JavaScript用於確定要下載哪些影象以及根據頁面載入時最初可見的內容預載入哪些視訊。這些影象和視訊會根據需要下載和預載入。
• 下載和呈現其他視訊會延遲，直到網站訪問者向下滾動頁面並且其他內容進入檢視。

最終結果是，在實際需要之前，不會下載影象和載入視訊。這可以為包含大量高解析度影象和嵌入視訊的網站實現顯著的效能提升。

延遲載入對您的WordPress網站非常有利。

• 它減少了初始網頁載入時間，因此使用者會更快地看到您的網站
• 它通過僅提供可檢視的影象來節省頻寬，並可節省託管成本

WordPress 5.5的釋出新增了延遲載入作為預設功能。

但是，如果您想自定義影象延遲載入和背景影象延遲載入的方式，則需要使用WordPress外掛。

注意：雖然延遲載入有助於提高網站載入速度，但在上傳到WordPress之前，您應該始終針對網路優化影象以獲得最佳效能。

WordPress懶載入的優缺點

如果您仍然想知道是否應該在WordPress中實現影象延遲載入，以下是該功能的優缺點：

優點：

• 減少頻寬使用，降低託管成本。
• 提高網站速度，使訪問者的瀏覽體驗更好。
• 提升移動體驗。
• 優化最大內容繪製分數
• 改進SEO工作，提高您網站的搜尋排名。

缺點：

• 導致內容緩衝，影響載入速度。
• 減慢快速滾動。

為什麼要做影象懶載入？

延遲載入您的WordPress圖片可以加快您的網站速度並提供更好的使用者體驗。

沒有人喜歡慢速網站。事實上，一項效能研究發現，頁面載入時間延遲一秒會導致轉化次數減少7%，頁面瀏覽量減少11%，客戶滿意度降低16%。

任何搜尋引擎也不喜歡載入緩慢的網站。這就是速度越快的網站在搜尋結果中排名越高的原因。

與其他網路元素相比，影象在您的網站上載入所需的時間最長。如果您在文章中新增大量圖片，那麼每張圖片都會增加您的頁面載入時間。

處理這種情況的一種方法是使用CDN服務，例如又拍雲CDN。CDN將讓使用者從離他們最近的Web伺服器下載影象並降低網站載入速度。

但是，您的影象仍將被載入並影響整體頁面載入時間。為了解決這個問題，您可以通過在您的網站上實現延遲載入來延遲影象載入。

如何為您的WordPress新增懶載入

與許多其他網站效能問題一樣，WordPress延遲載入也是可以通過外掛來解決。 實際上，WordPress外掛庫有許多外掛可用於懶載入影象和視訊。 這樣的外掛林林總總，我們從中挑了五個可以顯著提高網站效能的外掛。 如果您已準備好實施懶載入，可以考慮這五個外掛。

影象和視訊真的會讓網站變慢嗎？

首先，在將任何影象上傳到WordPress之前，請確保已經執行了優化（關於圖片體積優化，可以參考文章《如何做到Google PageSpeed Insights測試滿分/100分》裡面的圖片優化章節）。

我們需要一個基線分數，以便可以看到新增影象和視訊的對網站載入速度的影響。 如果開始就沒有問題，就沒有解決問題的必要。 為了測試我在測試主機上安裝標準的WordPress，並啟用了預設主題TwentySixteen，且沒有啟用優化外掛或快取等技術。

以下截圖是在新增任何圖片或視訊之前，使用Pingdom（查閱更多網站測速工具）對網站進行速度測試的結果。

不新增任何圖片或視訊網站測速

正如您所看到的，頁面非常小，只有不到155 kb，並且在不到半秒的時間內載入。 如果網站載入包含大型圖片檔案和嵌入式YouTube視訊，測速結果將會如何？

不使用懶載入外掛執行網站測速

在測試網站新增圖片和視訊後，我們可以看到頁面體積到了1.7 MB，頁面載入時間增加到1.3秒。 我們可以看到新增影象和視訊後使頁面體積變大，並大大降低了頁面載入速度。

1. 升級到WordPress 5.4或更高版本

WordPress 5.4及更高版本預設包含延遲載入影象。將您的WordPress更新到最新版本將自動啟用延遲載入。

儘管是最簡單的方法，但它不允許您配置要延遲載入的影象。因此，您的網站可能會過度使用該功能，從而表現出上述缺點。

另一個需要考慮的因素是每個 WordPress 版本中延遲載入功能的不同性質。最近，WordPress釋出了WordPress 5.9進行了改進，以解決舊版本的大型內容繪製分數不佳的問題。

這意味著在舊WordPress版本上執行的網站不會獲得與使用WordPress 5.9相同的好處。

2.通過瀏覽器啟用本機懶載入

Chrome、Firefox和Opera等流行瀏覽器支援原生影象懶載入。您只需將<img loading= “lazy”>載入屬性新增到目標影象和視訊即可自動啟用它。

在原生WordPress延遲載入中，loading屬性支援這三個值：

• Auto ‒ 觸發預設的延遲載入，這與不包括載入屬性相同。
• Lazy ‒ 分配資源的載入，直到每個資源都達到與視口的指定距離。
• Eager ‒ 頁面載入後立即載入所有資產，無論其位置如何。

以下是如何使用它的示例：

<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>

此方法非常適合延遲載入某些影象，為每個影象提供一個載入屬性，指示它們在視口中出現的時間。但是，延遲載入單個影象可能需要一些時間，尤其是在您的網站有大量媒體檔案的情況下。

3. 使用懶載入外掛提高頁面載入速度

這次我們將對五個WordPress延時載入外掛BJ Lazy Load，Lazy Load XT，a3 Lazy Load和Lazy Load（Lazy Load for Videos）進行測試。 讓我們來看看每個外掛變現如何。  當你嘗試使用WordPress延遲載入外掛時，一定要做一個前後測試，以確保能夠達到你預期的結果。

• BJ Lazy Load
• Lazy Load XT
• a3 Lazy Load
• Lazy Load
• Lazy Load for Videos
• WP Rocket
• Optimole

1. BJ Lazy Load

BJ Lazy Load是一個非常受歡迎的懶載入外掛。目前它在超過9w+個啟用安裝，獲得4星評分。

WordPress延時載入外掛-BJ Lazy Load

該外掛安裝和設定都非常簡單。只需通過“外掛-安裝外掛”搜尋該外掛，並安裝啟用。啟用後，通過“設定 ”>“BJ Lazy Load”即可進入外掛設定介面。預設情況下會選擇所有延遲載入選項，除非您在啟用外掛後，網站前端遇到問題，否則您無需對外掛執行過多的設定。

此外掛提供了一個選項，其他兩個選項都無法為影象新增URL，以用作延遲載入的影象和視訊的佔位符，直到下載實際的影象和視訊資源。當然，如果您使用此選項，您將需要使用非常小的檔案而不是高解析度影象。

為了頁面美觀不破壞頁面整體，建議您建立一個與您的網站背景顏色相同的純色影象，並將其儲存為png格式。

您還可以指定排除延遲載入的HTML類。然後，您可以將該類應用於您希望從延遲載入中排除的任何影象或視訊。最後，您可以設定懶載入圖片和視訊下載的時機（即觸發圖片和視訊離下載渲染的目標離當前可視視窗位置值）

在使用了懶載入外掛BJ Lazy Load後，頁面載入速度變化如下：

使用延時載入外掛BJ Lazy Load後的測速

再經過多次測試統計後，結論是使用BJ Lazy Load外掛可以讓頁面載入時間保持在300到400毫秒之間。

雖然安裝此外掛後頁面載入速度驚人，但頁面的大小實際上還是增加。 怎麼回事？ 理論上，啟用延遲載入後，頁面大小也應該會減少，因為並非所有影象都是在初始頁面載入時下載的。

在對這種情況進行一些調查後，發現：

WordPress預設的圖片讀取規則

WordPress嵌入影象時會img元素新增srcset屬性，向瀏覽器顯示各種尺寸的影象。 瀏覽器根據不同的裝置解析度載入最合適的尺寸的圖片。

這意味著如果您上傳一個非常大的影象檔案，WordPress將自動為您的網站訪問者提供該影象的多個尺寸版本，瀏覽器再根據裝置解析度選擇其中一個最合適的圖片Size。

BJ Lazy Load改變WordPress圖片讀取規則

BJ Lazy Load會覆蓋WordPress預設的圖片讀取。 srcset屬性已替換為與外掛指令碼一起使用的data-lazy-srcset屬性。 然而，最終結果是，不是下載最佳尺寸版本的影象，而是下載和渲染全解析度影象。

這也就解釋了前面的頁面速度測試，為什麼頁面體積大小變化不大的現象問題。所以建議你使用此外掛執行懶載入時，確保在上傳圖片之前對圖片進行最優化，即上傳較為合適解析度的圖片。

2. Lazy Load XT

Lazy Load XT在我們的測試中表現良好，是另一個值得考慮的WordPress延遲載入外掛。 但需要注意的是這個外掛不像BJ Lazy Load那麼受歡迎，且已經有三年未更新了（鑑於技術支援保障及安全性考慮，不建議優先考慮此外掛）。

WordPress懶載入外掛-Lazy Load XT

啟用外掛後，通過WordPress儀表盤“設定> Lazy Load XT”配置外掛。 你會注意到這個外掛不僅僅提供延遲載入圖片和視訊支援，還提供壓縮JS和CSS檔案，使用Cloudflare CDN載入JavaScript和CSS庫，並將指令碼移動到站點頁尾等功能。

您可以使用其他選項來微調網站效能。 但由於我們本次只是測試延遲載入，此次僅採用了預設設定，並沒有縮小或移動CSS和JavaScript，清除伺服器快取。最終通過Pingdom網站執行速度測試結果如下：

WordPress延時載入外掛Lazy Load XT後測速

啟用Lazy Load XT外掛後頁面體積大小還是2 MB，頁面載入時間不如BJ Lazy Load快，但相對於未啟用懶載入，頁面載入時間減少50％。

快速瀏覽一下測試結果中的檔案樹，啟用Lazy Load XT外掛與我們在BJ Lazy Load中看到的那樣。 啟用這兩個外掛均不是載入影象的優化版本，而是下載並呈現影象的全解析度版本。

雖然外掛沒有產生與BJ Lazy Load相同的速度提升，但是Lazy Load XT支援眼球測試。 與BJ Lazy Load不同，Lazy Load XT使用的佔位符是透明的。 因此，在載入影象和視訊時，沒有難看的空白框，您不必擔心建立和上傳佔位符影象。

3. a3 Lazy Load

a3 Lazy Load是WordPress外掛市場其中一個非常流行的WordPress延遲載入外掛。 此外掛目前已有超過10w+個有效啟用安裝，並且得到了4.5星評分。

WordPress懶載入外掛-A3 Lazy Load

啟用外掛後，在WordPress儀表盤新增了“設定>a3 Lazy Load”選單。 出於測試目的，使用了外掛的預設設定，但有一個例外，“Loading Background Colour ”選項將佔位符顏色與網頁背景的顏色相匹配。

安裝啟用A3 Lazy Load外掛後的測速狀況

啟用外掛後再次測速，頁面載入時間不到半秒。 考慮到此網頁上包含的影象和視訊數量，這樣的效率還是非常不錯的。

測速結果對比

毫無疑問，您會注意到頁面大小和請求數量已大大減少。 是什麼造成不同外掛之間的這種戲劇性的差異？ 我們通過Pingdom提供內容大小的快照，快速比較後發現了其中的答案。 首先，這是啟用a3 Lazy Load時內容大小快照如下圖所示：

啟用A3 Lazy Load外掛的頁面內容大小

啟用A3 Lazy Load外掛後頁面影象佔用空間很小，超出150 kb一點點。 BJ Lazy Load和Lazy Load XT都生成了2.0 MB的頁面大小。 以下是啟用Lazy Load XT外掛頁面內容的組成分析截圖。

啟用Lazy Load XT外掛的頁面內容大小

啟用A3 Lazy Load和Lazy Load XT延時載入外掛後頁面的指令碼，HTML，CSS和其他內容大小几乎相同。但是後者的頁面影象大小為1.86 MB – 而不是前者的僅僅150 kb。發生什麼了？正如我之前提到的，WordPress自動提供各種尺寸的影象，瀏覽器根據裝置螢幕解析度呈現不同尺寸的影象版本。

BJ Lazy Load和Lazy Load XT都會覆蓋WordPress預設的讀圖規則並最終提供全解析度影象。但是，a3 Lazy Load保留了預設的WordPress讀圖規則，傳送的影象檔案要小得多。

奇怪的是，儘管頁面大小不同，但啟用BJ Lazy Load時網站載入速度比啟用a3 Lazy Load時載入速度快。安裝了每個外掛後，對該站點進行了多次測試，以確保測速結果不是例外情況。最終將差異歸結為載入頁面所需的HTTP請求數。乍一看，看起來BJ Lazy Load需要更多請求。但是，如果我們看一下檔案樹，我們才能看到實際所發生的事情。

啟用Lazy Load外掛的Data URIs

啟用了BJ Lazy Load的站點檔案包含大約20個以 data:image/gif 開頭的請求。 這些是資料URIs而不是HTTP請求。 實際上，它們告訴瀏覽器在本地建立一個gif，而不是從伺服器請求那個gif。 因此，BJ Lazy Load實際上只需要17個HTTP請求來構建頁面而不是a3 Lazy Load所需的27個。 這就解釋了為什麼頁面載入速度為什麼可以做到那麼快。

Lazy Load XT採用了類似的策略，但仍需要比BJ Lazy Load外掛更多的請求，這就解釋了為什麼它不能產生完全相同的結果。

4. Lazy Load

推薦的第四個外掛是Lazy Load，這是知名的WP Rocket團隊開發的免費外掛。 該外掛目前已經有4w+的啟用安裝，並且獲得了4星評分。 如果您正在尋找一個速度很快且簡單WordPress延遲載入方案，這個外掛是一個很好的選擇。

由WP Rocket開發的WordPress懶載入外掛-Lazy Load

此外掛適用於縮圖，文章內容或小部件文字中的所有影象，頭像和表情符號。 這個外掛的最大優點是沒有使用JavaScript庫，例如jQuery，指令碼大小不到10 KB。 沒有配置選項，只需安裝外掛，延遲載入即可實現。

5. Lazy Load for Videos

如果您只需要延遲載入視訊，Lazy Load for Videos 外掛即可。 雖然上面的一些外掛也支援視訊延遲載入，但對於視訊內容來說Lazy Load for Videos是一個很好的解決方案。

Lazy Load for Videos plugin

6. WP Rocket

我們建議使用WP Rocket外掛在 WordPress 中延遲載入影象。它是市場上最好的WordPress快取外掛，可讓您輕鬆開啟影象延遲載入。

除此之外，它還是一個非常強大的外掛，可以幫助您優化網站速度，而無需瞭解複雜的技術術語。

開箱即用，他們所有的預設推薦快取設定將大大加快您的WordPress網站。

要啟用影象延遲載入，您只需選中幾個框即可。您甚至可以為視訊啟用延遲載入，這將進一步提高您的網站速度。

有關更多詳細資訊，請參閱有關如何在WordPress中正確安裝和設定WP Rocket的指南。

7. Optimole

此方法使用免費的Optimole外掛。它是最好的WordPress影象壓縮外掛之一，可讓您輕鬆啟用影象延遲載入。

如果您每月有超過5,000名訪客，那麼您將需要高階版。

首先，您需要安裝並啟用外掛。轉到媒體»Optimole，然後您需要註冊一個API金鑰。

只需單擊“Register & Email API key”，它就會通過電子郵件傳送給您。

然後，輸入您的API金鑰並單擊“Connect to Optimole Service”。

之後，單擊“Setting”選項卡。

在這裡，您可以確保啟用了“Scale images and & Lazy load”設定。這將根據訪問者的螢幕尺寸生成影象並提高載入速度。

接下來，單擊“Advanced”選單選項並選擇“Lazyload”。

在此螢幕上，有一些不同的設定可讓您自定義影象延遲載入的方式。

首先，您可以調整“Scale images and & Lazy load”設定。這將阻止延遲載入文章或頁面頂部的影象，因此摺疊上方的影象將始終顯示。

如果您希望每個影象都延遲載入，您可以將其設定為0。

接下來，您可以啟用“Scale Images”開關。

這會將影象縮放到訪問者的螢幕大小，並使您的頁面載入速度更快。

之後，您可以開啟“Enable lazyload for background images”設定。

這將延遲載入您的背景圖片，這可能是您網站上一些最大的圖片。

您可以啟用的另一個設定是延遲載入嵌入式視訊和 iframe。如果您有很多嵌入的視訊內容，那麼您需要啟用此設定。

這將載入佔位符影象代替視訊。當它被點選時，完整的視訊將載入。

您可以繼續自定義這些設定，並檢視最適合您的網站和影象的設定。

在退出外掛設定之前，請確保單擊“儲存更改”按鈕。

懶載入對SEO的影響

無論你最終使用哪個外掛進行WordPress延遲載入，都要考究到對SEO的影響。需要確保以下兩件事：

1. 確保搜尋引擎仍然可以抓取延遲載入的圖片。 您可以使用Google Search Console中抓取選單下的“Fetch as Google” 工具進行檢查。其實如果可以在原始碼中看到影象內容，那麼很可能就沒問題。
2. 確保懶載入圖片上使用alt，因為這對搜尋引擎圖片搜尋排名很重要

WordPress延遲載入技巧

充分利用延遲載入的關鍵是正確使用它。以下是在您的WordPress網站上執行延遲載入的一些技巧：

• 不要延遲載入摺疊上方的影象。由於放置在頁面頂部的影象在載入時可見，因此延遲載入它們沒有任何好處。
• 選擇適當的佔位符。我們建議使用純色、主色或低質量影象作為影象的佔位符。
• 新增影象載入的緩衝時間。這樣，您的影象就可以在進入訪問者的視口之前準備就緒，從而消除任何等待時間。
• 定義影象容器的尺寸。這樣做將有助於避免突然的佈局變化，使您的網頁在載入時看起來整潔。
• 僅在長頁面上實現延遲載入。長頁面包括那些需要超過兩個卷軸才能到達末尾並且首屏下方有超過五個影象的頁面。

小結

那會給我們留下什麼？所有這四個選項都通過延遲載入影象和視訊來提高頁面載入速度。選擇哪個最好取決於個人偏好以及如何在將影象上傳到WordPress網站之前準備影象。

• 如果在上傳前沒有對影象進行任何優化 – 建議使用a3 Lazy Load，因為該外掛內建影象優化功能。
• 如果在上傳前優化影象且是個懶人，那麼BJ Lazy Load和Lazy Load比較適合。
• 如果在上傳前優化影象，並希望有額外的選項給到你配置CSS和JS資源傳送處理，那麼建議你選擇Lazy Load XT。

延遲載入只是一種可用於優化WordPress網站的技術。但是，如果您使用大量影象和視訊，它可能會對網站速度產生深遠影響。儘管如此，一旦您實施了延遲載入，您可以考慮並實施幾種其他技術來提升網站效能。關於WordPress延遲載入解決方案？或者你有更好的建議，歡迎留言交流。

除此之外，WordPress要獲得更好的效能，我們其實還有很多事情可以做，比如CDN加速，WP快取，CSS和JS等檔案極簡化，必要的Gzip壓縮等等。要知道您的WordPress網站的效能如何，你可以通過一些專業的網站測速工具進行全面的檢測，然後有針對性地進行優化。如果你能夠做到Google PageSpeed Insights測試滿分（其實90分以上），網站就很OK了。