如何在 WordPress 中延遲加載（圖片和視頻）

已發表: 2023-05-25

如果您是網站所有者，您過去可能至少考慮過一次網站速度。 畢竟，谷歌在確定將網站放置在搜索結果中的位置時會考慮速度。 因此，如果您的網站加載速度緩慢，那麼您在排名方面就會處於劣勢。 我們都知道，更高的排名會帶來更多的流量。

那麼，您如何確保您的 WordPress 網站加載速度盡可能快？ 一種方法是延遲加載圖像。

延遲加載是一種延遲圖像和視頻渲染直到需要它們的技術。 實現這一點可以大大加快您的網站速度，好消息是您無需成為開發人員即可將其投入使用。

今天，我們將向您展示如何使用兩種方法在 WordPress 中延遲加載圖像和視頻：使用插件和不使用插件。

什麼是延遲加載？

延遲加載是一種用於提高頁面速度的常用技術。 這個想法很簡單：不是在訪問者第一次到達時加載頁面上的所有圖像，而是只渲染可見的圖像。 然後，當訪問者向下滾動頁面時，會根據需要加載更多圖像。

這意味著如果訪問者從不向下滾動到頁面底部，則永遠不會加載查看頁面區域下方的圖像。 因此，延遲加載可以節省寶貴的幾毫秒（甚至幾秒）頁面加載時間。

此外，延遲加載還可以幫助您節省帶寬。 如果有人在移動設備上訪問您的網站，這一點尤其重要。 通過延遲加載不可見的圖像和視頻，您可以減少使用的數據量。

延遲加載是如何工作的？

通常，延遲加載以兩種方式之一工作。 WordPress 從 5.5 版開始，添加了一個名為“loading”的 HTML5 屬性。 在這種情況下，瀏覽器會處理延遲加載過程的所有部分，而不需要任何額外的 JavaScript。

另一種在 HTML5 屬性之前開發的方法是通過一些有創意的 JavaScript。 在這種情況下，頁面加載時會提供一個空佔位符，然後在圖像進入視口時使用 JavaScript 加載圖像。

無論哪種方式，都只會加載瀏覽器需要的圖像。 一旦訪問者向下滾動頁面，就會加載其他圖像。

有幾種不同的方法可以做到這一點，我們將在下面詳細討論。 但這就是延遲加載工作原理的要點。

延遲加載有什麼好處？

延遲加載圖像有三個主要好處：

  • 提高網站速度
  • 減少帶寬使用
  • 更好的用戶體驗

提高站點速度通常是實施延遲加載的主要動機。 通過等待呈現不必要的圖像，您可以減少頁面加載時間。 如果頁面上有很多圖像，或者圖像很大，則尤其如此。

接下來，延遲加載可以幫助您節省帶寬。 如果訪問者從不冒險向下瀏覽頁面，就不會浪費帶寬來加載他們永遠看不到的圖像。

最後，延遲加載可以改善您的用戶體驗。 這是因為訪問者不必等待頁面上的所有圖像加載完畢就可以開始與您的網站互動。

默認情況下 WordPress 會延遲加載嗎？

是的，從 WordPress 5.5 開始，延遲加載在安裝時默認自動啟用。 但是，有一些方法可以非常簡單直觀地自定義體驗。 我們將在下面更詳細地討論這些方法。

我應該延遲加載我的圖像嗎？ 有缺點嗎？

在大多數情況下，如果您想提高頁面速度或節省帶寬，延遲加載圖像是一個好主意。 但是，也有一些潛在的缺點需要考慮。

佈局轉移

如果您延遲加載圖像，您的頁面佈局可能會發生變化。 例如，如果您的頁面右側有一個側邊欄，並且您延遲加載位於其中的圖像，則側邊欄可能會向下移動以騰出空間。 這可能會讓您的訪客迷失方向。

作為一般規則，建議使用佔位符來避免此問題。

對 SEO 的潛在打擊

如果操作不當，延遲加載圖像可能會導致搜索引擎（例如 Google）無法將它們編入索引。 在排名方面，內容為王，在這種情況下，您可能會失去有價值的部分。

您的圖片可能不再出現在搜索結果中，並且根據圖片相對於頁面其餘內容的重要性（例如電子商務列表的產品圖片），它也可能會降低您的常規搜索排名。

也就是說，如果您正確設置延遲加載，這將不是問題。 這就是為什麼，除非您是一個自信的開發人員，否則最好的做法是使用延遲加載插件或堅持使用 WordPress 附帶的默認延遲加載。

插件衝突

此外，延遲加載可能會導致某些 WordPress 插件出現問題——例如使用圖像生成社交媒體預覽的插件。

每當您對站點進行更改時，都應該對其進行徹底測試，以確保一切正常。

而且，萬一出現問題，請準備好您的 WordPress 網站的備份以便快速恢復。

如何在 WordPress 中啟用延遲加載

WordPress 現在默認啟用延遲加載。 如果您沒有使用現代 WordPress 迭代（儘管我們建議您這樣做），或者如果您想要對延遲加載過程進行更精細的控制，您可以使用兩種不同的方法之一：使用插件或向您的網站添加代碼地點。

1.使用插件延遲加載

如果您不是經驗豐富的開發人員，我們建議您使用插件，因為任何時候您編輯網站代碼時，都可能會遇到問題。 即使你手頭有備份以防萬一你破壞了某些東西，最好還是簡單地使用一個有信譽的插件。

Jetpack Boost 主頁

Jetpack Boost 是一款免費插件，專門用於幫助您衡量和改進站點性能。 它提供如下功能：

  • 推遲非必要的 JavaScript
  • 優化 CSS 加載
  • 延遲圖像加載
  • 網站性能測試

要開始使用 Jetpack Boost，請從 WordPress 插件目錄免費下載。

或者，在您的 WordPress 儀表板中，轉到插件 → 添加新插件，然後搜索“Jetpack Boost”並單擊立即安裝。 安裝後，單擊激活。

插件存儲庫中的 Jetpack Boost

接下來，轉到名為Boost的新儀表板菜單選項。 然後，單擊免費開始。

在下一頁上，向下滾動到顯示延遲圖像加載的大開關並將其打開。 現在，查看您的網站並確保一切都正確呈現並且看起來不錯。 就是這樣！ 只需單擊幾下即可進行延遲加載。

如果您想更進一步並自定義您網站的延遲加載，您可以使用代碼片段來實現，您可以將其添加到您的functions.php文件中。 或者，您可以使用功能插件插入它們。

以下是您可以完成的幾項任務：

  1. 在某些頁面上禁用延遲加載
  2. 設置一個佔位符，該佔位符在加載圖像之前顯示
  3. 關閉特定圖像的延遲加載
  4. 關閉特定 CSS 類的延遲加載

例如，如果你想從延遲加載過程中排除一個 CSS 類，你可以使用以下代碼：

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

有關更多詳細信息，請查看完整的延遲加載文檔。

2. 如何在沒有插件的情況下在 WordPress 中延遲加載圖像

正如我們之前提到的，默認情況下，WordPress 會為所有已設置尺寸的圖像啟用延遲加載。 您不需要打開任何東西或添加任何代碼來執行此操作。 但是，有時您可能想要自定義此功能的工作方式。

例如，假設您不想包含模板圖像。 您可以將此代碼添加到您的functions.php文件中：

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

或者，也許您想獲得超細粒度並關閉特定圖像的延遲加載。 您可以通過在添加到頁面或帖子時為每個圖像分配一個額外的圖像類，然後將該類添加到您的functions.php文件中的以下代碼來實現：

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

將上例中的圖像類skip-lazy添加到圖像中：

  1. 將圖像添加到頁面或通過媒體庫發布。
  2. 添加圖像後，找到圖像設置。 這可能會有所不同，具體取決於您使用的是 Gutenberg Blocks 編輯器、經典編輯器還是網站構建器插件。 添加新 CSS 類的功能通常位於高級設置區域（古騰堡和經典編輯器）或圖像設置選項的底部（大多數其他網站構建器）。
  3. 將類skip-lazy添加到圖像並保存更新。

您可以在 WordPress 文檔中了解有關可能性的更多信息。

如何在 WordPress 中延遲加載視頻

如果您想延遲加載視頻，可以通過在帖子或頁面中向視頻本身添加代碼來實現。 此代碼應如下所示：

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

有關 WordPress 延遲加載的常見問題

想了解更多關於 WordPress 延遲加載的信息嗎？ 我們在下面回答了一些常見問題：

延遲加載和延遲屏幕外圖像是一回事嗎？

推遲屏幕外圖像意味著等待加載圖像，直到其他關鍵的首屏內容加載完畢。 有幾種方法可以做到這一點，但 WordPress 網站通常使用延遲加載。

本質上，延遲加載是一種延遲屏幕外圖像的方法。

我可以在 WordPress 中延遲加載背景圖片嗎？

是的，您可以根據需要延遲加載背景圖片。 Jetpack Boost 為背景圖像啟用延遲加載。 但是，根據您的圖像設置方式，它可能無法識別所有圖像。 例如，如果圖像是通過 background:url 屬性加載的，插件不會將其作為圖片讀取，因此不會為其啟用延遲加載。

在這種情況下，您可以使用像 Lazy Loader 這樣的工具，它允許您選擇要延遲加載的特定背景圖像。

我可以延遲加載 YouTube 視頻嗎？

是的你可以！ 為此，請將 WPOrbit 中的以下代碼片段插入主題的functions.php文件中。 如果您不確定如何操作，請查看我們的訪問和編輯functions.php文件的指南。

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

延遲加載會影響 SEO 嗎？

是的，延遲加載可以對您的搜索引擎排名產生積極影響。 谷歌在決定頁面在搜索結果中的排名時會考慮網站速度。 由於延遲加載可以提高性能，它還可以增加 Google 對您網站的看法。

如果您手動執行，而不是使用延遲加載插件，並且犯了一個錯誤，它會阻礙搜索引擎識別您的圖像的能力，從而對 SEO 產生負面影響。

延遲加載會影響用戶體驗嗎？

是的，延遲加載可以改善您的用戶體驗，因為它減少了您網站的加載時間，同時仍確保訪問者可以立即查看您的內容。 反過來，這可以提高他們對您品牌的認知。

我需要一個插件來延遲加載我的內容嗎？

不，您不需要插件來延遲加載您的內容。 WordPress 默認啟用延遲加載。 但是，如果你想更好地控制延遲加載過程，你可能需要使用插件。 這是 WordPress 最好的延遲加載插件的選擇。

延遲加載內容有缺點嗎？

延遲加載內容沒有太多缺點。 它可以提高您的速度、用戶體驗和搜索引擎排名。 但是，它偶爾會導致頁面佈局發生奇怪的變化。 因此，您應該始終在啟用延遲加載後測試您的網站。

我需要延遲加載所有內容嗎？

不，您不需要延遲加載所有內容。 您可以選擇僅延遲加載特定元素，例如圖像、視頻或 iFrame。

我還能做些什麼來提高加載速度？

除了延遲加載之外，還有許多其他方法可以提高 WordPress 網站的速度，包括：

  • 使用內容分發網絡 (CDN)
  • 專注於改進同樣可以改進 Core Web Vitals 的東西。
  • 優化圖像
  • 啟用瀏覽器緩存
  • 縮小資源

使用 WordPress 延遲加載加速您的網站

延遲加載圖像是優化網站性能和改善整體用戶體驗的好方法。 Jetpack Boost 提供了最方便、最強大的方式來啟用延遲加載，同時還提供了其他強大的速度工具。 準備好開始了嗎？ 獲取 Jetpack Boost！