為什麼您可能需要 WordPress 延遲加載來加速網頁？

為什麼加載的數據比我們可以顯示的多？

一個快速的網站更具可持續性，並且通常更有效地吸引更多可以快速輕鬆地找到所需內容的用戶。 但是，如果圖像未正確優化，它們也可能導致大量負載，從而降低頁面加載、響應速度等。

據 Akamai 稱，47% 的訪問者希望在兩秒或更短的時間內加載網頁。 如果頁面加載時間超過 3 秒，則 40% 的訪問者將離開該網站。 此外，延遲 1 秒可能會導致銷售額下降 7%。 因為：

沒有人願意“等待”網頁加載。

不僅如此，搜索引擎巨頭谷歌也更喜歡加載時間少於 2-3 秒的網站。

通常，一個網站或一個 WordPress 帖子/頁面由多個頁面內容組成，包括 HTML、CSS、JavaScript、圖像、視頻、評論等。通常，有多種方法可以加快 WordPress 網站的速度，但大多數技術範圍從最小化代碼到 WordPress 上的延遲加載技術。

在本指南中，我們將解釋延遲加載、它的優缺點、用例，然後向您展示如何延遲加載 WordPress圖像、視頻、評論和使用無限滾動。

什麼是延遲加載？

當訪問者打開網頁時，無論內容有多大，整個頁面的內容都會開始下載和呈現。 訪問者可能會在僅查看第一次折疊後關閉網頁。

訪問頁面會消耗帶寬並使用內存來保存緩存數據。 非常快速地退出頁面可能會導致浪費內存和帶寬。 這是延遲加載的地方：

延遲加載是一種在需要時加載 Web 內容而不是一次性加載的技術。

通過使用延遲加載技術，頁面內容僅在它們在視口（屏幕）中可見時才加載。

延遲加載如何工作？

基本上，延遲加載是對延遲加載的網頁資源（圖片、視頻等）添加一個引用src屬性，並為原始內容添加另一個屬性，然後使用 JavaScript 來檢測訪問者的頁面滾動位置。 當滾動位置最接近引用對象時，它將引用src屬性替換為實際的src並加載內容。

例如，如果訪問者打開一個網頁並立即離開，則不會加載網頁頂部以外的任何內容。

在運行時加載資產減少了頁面在初始加載時必鬚髮送到服務器的請求數量，從而使 WordPress 託管服務器和訪問者之間的通信速度更快、最少。

延遲加載會影響 SEO 嗎？

延遲加載不是 SEO 友好的（至少在撰寫本指南時）。 由於內容（圖像、視頻、評論等）最初不是為訪問者加載的，因此相同的流程適用於搜索引擎蜘蛛。 一些延遲加載的內容（圖像、視頻）可能無法在 Google 圖像/視頻部分編入索引，這從 SEO 的角度來看並不好。

解決方法確實存在，例如添加指向延遲加載內容的鏈接。 這樣，Google 會將其作為標準網頁並相應地索引內容。 但是，訪問者仍然會看到一個網頁為延遲加載。

搜索引擎巨頭 Google 正在努力並準備幫助文檔，以了解如何利用延遲加載並讓 GoogleBot 發現延遲加載的內容。

媒體會減慢網站速度嗎？

圖像和視頻是網頁的網頁內容元素的一部分。 因此，是的，對加載時間的影響。

網頁尺寸越大，加載所需的時間就越多。

因此，始終建議在將圖像上傳到 WordPress 網站之前對其進行優化。 您可以使用 WP Compress、ShortPixel、WP Smush It 等來縮小圖像尺寸。

此外，指定圖像尺寸，例如，如果您有一張 1000×1000 像素的圖像，但將其縮放到 100×100 像素，瀏覽器將加載十倍於必要的內容。 此外，避免使用複雜的文件格式，如 TIFF、BMP 等，因為瀏覽器可以快速加載 JPG、PNG 和 GIF 圖像。

你應該使用延遲加載嗎？

這是速度的時代！

每個訪問者都希望在眨眼之間加載一個網頁。 您需要不斷尋找改善頁面加載時間的方法，而延遲加載是其中一種方法。

隨著移動用戶的大量增長，全球超過 52%的流量是通過智能手機提供的。 在優化 WordPress 網站時，絕對應該考慮移動用戶。

3 延遲加載用例

大多數情況下，延遲加載用於圖像，但這不僅限於圖像。 它可用於與視頻、評論、腳本等集成。互聯網巨頭已經在以一種或另一種方式使用延遲加載。 這裡有幾個：

1. 中等的

如果您曾經訪問過 Medium，您一定注意到它為延遲加載圖像顯示了一個模糊的佔位符，直到實際的高分辨率圖像完全加載，因此訪問者期望圖像正在加載。 這通過顯示一些最初加載的內容來保持訪問者的注意力來改善用戶體驗。

2. YouTube

默認情況下，YouTube 顯示的第一件事是您打算觀看的視頻，並且不會在初始加載時加載其他建議視頻的評論和縮略圖。 當您開始滾動時，它將開始加載延遲加載的項目，如縮略圖和評論。 這樣，訪問者不必等待加載整個頁面。 他可以立即開始觀看視頻。

3. 谷歌圖片

您可能已經觀察到，當您在 Google 上搜索圖像時，它會用縮略圖替換佔位符圖像，並且在顯示大量圖像後會加載更多圖像。 Google 使用不同的方法將無限滾動和延遲加載相結合，以改善其搜索結果。

將延遲加載添加到 WordPress 網站

您可以通過在 WordPress 網站中實施延遲加載技術來減少請求數量，該技術有助於減少服務器響應時間，從而獲得更快的頁面加載體驗。

感謝 WordPress 社區的貢獻，在 WordPress 內容中實現延遲加載並不是那麼技術性的。

1. WordPress 延遲加載插件

如果您在 WordPress 插件目錄中搜索“延遲加載”，您會遇到許多延遲加載插件。 但是對於本指南，我選擇了a3 Lazy Load ，它是在 WordPress 網站中實現延遲加載技術的最流行、功能最豐富且使用最廣泛的插件之一。

2. WordPress 延遲加載圖片

圖像是資源密集型的，消耗大量帶寬和存儲空間。 使用 a3 Lazy Load 插件，您可以在 ON/OFF 之間切換。 不僅如此，當圖像的延遲加載打開時，您可以控制它應該在哪里工作，包括：

• 帖子、頁面和自定義帖子類型（所有內容區域）
• 小部件（側邊欄、頁眉和頁腳）
• 申請發布縮略圖
• 適用於 Gravatars

3. WordPress 延遲加載視頻和 iFrame

a3 延遲加載不僅限於延遲加載圖像，它還允許您延遲加載視頻。 它支持所有使用 iFrames 在初始加載時加載視頻的 WordPress 視頻嵌入。 同樣，它包含 ON/OFF 切換。 如果打開，您可以控制以下提到的區域：

• 通過 URL 嵌入帖子和頁面中的視頻（所有內容區域）
• 小部件類型、文本小部件和 HTML 小部件中的視頻
• 與流行的 YouTube 嵌入插件完全兼容

4. WordPress 延遲加載評論

大多數 WordPress 用戶都使用了許多 WordPress 評論插件。 通過使用不同的 WordPress 延遲加載插件，可以將延遲加載應用於其中許多：

• 對於默認的 WordPress 評論，您可以使用 Lazy Load for Comments
• 對於 Disqus 評論，您可以使用 Disqus Conditional Load
• 對於 Facebook 評論，您可以使用 Lazy Facebook Comments

5. 5. 更多用於 WordPress 的延遲加載插件

除了 a3 Lazy Load，還有很多有用的插件可以考慮：

• a3 延遲加載
• BJ 懶加載
• WordPress Infinite Scroll – Ajax 加載更多
• WP Rocket 的延遲加載
• 為 WooCommerce 加載更多產品
• 延遲加載評論
• Disqus 條件加載
• 視頻的延遲加載

WordPress 無限滾動

顧名思義，無限滾動會自動添加下一頁，從而節省您從整頁加載時間的時間。 例如，您可能在 Facebook Newsfeed 中體驗過它。 您只需繼續向下滾動，Feed 就會自動更新，而不是加載整個頁面。

在 WordPress 中，您可以使用 Download WordPress Infinite Scroll – Ajax Load More 插件來實現這一點。 它用於通過 AJAX 驅動的查詢延遲加載帖子、單個帖子、頁面、評論等。

不僅如此，它還適用於使用流行的電子商務插件（如 WooCommerce 和 Easy Digital Downloads）進行無限滾動，這些插件可以在不加載整個網頁的情況下顯示數千種產品。

谷歌瀏覽器可能默認集成延遲加載

Google 正在努力使延遲加載的內容更易於訪問。 它還在嘗試在 Google Chrome 中添加對延遲加載的支持的可能性。 因此，它只會加載當前顯示在屏幕上的頁面部分，並且在您向下滾動時將加載“首屏下”的所有內容。

目前，它可以在 Google Chrome Canary 上進行測試，這是一個面向開發人員和早期採用者的早期發布版本。 要試一試，請下載 Canary，然後在地址欄中輸入以下內容：

• chrome://flags/#enable-lazy-image-loading
• chrome://flags/#enable-lazy-frame-loading

當這些標誌處於活動狀態時，Google Chrome 瀏覽器不會加載當前在屏幕上不可見的任何圖像或 iFrame。 它將有助於在谷歌瀏覽器中更快地加載網頁，並減少帶寬使用，使其成為移動瀏覽器特別有用的功能。 繼續以更好的方式為您的移動訪問者提供服務！