WordPress 延遲加載:如何將其添加到您的網站

已發表: 2023-03-09

擁有良好的頁面加載速度對於提供良好的用戶體驗很重要,它還可以幫助您提高搜索引擎排名。 在創建在線網站或商業網站時,沒有其他 CMS 比 WordPress 更好。

延遲加載是擁有大量媒體資源同時為您的網站保持良好加載時間的最佳策略。 這是一種關鍵策略,可以識別非關鍵資源並僅在需要時加載它們。 使用此策略可減少頁面加載時間、降低跳出率並改善客戶體驗。

WordPress 是領先的 CMS,允許您將視頻、圖像和其他媒體集成到您的網站中。 不過,新版本還附帶了 WordPress 延遲加載功能。

激活 WordPress 延遲加載功能後,您網站上所有精彩的圖片或視頻都將進行延遲加載。

WordPress 延遲加載

現在訪問者將能夠快速加載您的站點並訪問內容。 如果您的業務收入取決於您的 WordPress 網站,強烈建議您使用此策略。

什麼是延遲加載,它是如何工作的?

延遲加載是一種優化技術,它使加載內容對用戶可見,並延遲下載和渲染非首屏內容。

如果您的網站有很多高分辨率的圖像和視頻,那麼您的網站不必加載緩慢。 它可以優先處理這些關鍵的圖像和視頻,從而大大減少了加載時間。

它是這樣工作的:

  • 瀏覽器在不下載圖像和預加載視頻的情況下構建網頁 DOM。
  • 將要下載的圖像和要預加載的視頻基於由 JavaScript 確定的最初可見內容。
  • 延遲加載僅在訪問者在屏幕上查看圖像或視頻時才加載。

圖像和視頻只有在實際需要時才會提前加載。 如果你不去網站的多個部分,那麼其中一些圖像將永遠不會被加載。

延遲加載基本上是基於優先級的 WordPress 圖像和視頻加載。 這是獲得兩全其美的極其有效的方法。 您可以擁有一個具有出色圖形和速度的驚人網站。

如何將 WordPress 延遲加載添加到您的網站

有兩種方法可以將延遲加載添加到您的站點。 您可以使用 WordPress 插件手動完成。 為確保此任務的成功,了解這兩種方法很重要。

1.使用插件實現懶加載

您可以通過安裝插件來消除所有 WordPress 延遲加載問題。 WordPress 上有許多可用的插件,但使用速度優化插件會帶來其他好處。

你可以使用像 w3speedster 這樣的插件來優化網站的整體速度,同時實現延遲加載。 您可以完全控制可以延遲加載的圖像,所有這些都可以在沒有任何編碼的情況下完成。

如果您的團隊沒有太多的技術專長,那麼使用插件將是最佳選擇。 使用完插件後,通過 PageSpeed Insights 檢查您的速度。 如果您看到顯著的改進,那麼您就正確地完成了工作!

您可以放心,您的訪客將受到良好的用戶體驗。

按照以下步驟成功將 w3speedster 插件添加到您的網站。

第一步:安裝並激活插件

轉到 WordPress 儀表板,單擊插件部分,然後單擊添加新的。 找到 w3speedster 插件並點擊上傳。 選擇 zip 文件,然後單擊安裝。

在安裝過程開始之前,WordPress 會要求您確認是否要將插件添加到您的站點。 選擇是,安裝過程將開始。

一旦插件被激活,您就可以開始享受它的好處了。 但是,在此之前,您應該前往設置部分。

第 2 步:使用設置面板配置插件

轉到 w3speedster 插件,以便您可以配置延遲加載的設置。 您可以在此處選擇您希望站點延遲加載的媒體文件。

此插件允許您延遲加載圖像、視頻、音頻和 iframe。 單擊要延遲加載的媒體文件的複選框。 做出選擇後,保存更改,然後退出。

2.手動添加懶加載

如果您不想向您的 WordPress 站點添加另一個插件,那麼您會很高興知道您也可以手動執行此操作。 Chrome、Firefox 和 Opera 等多種瀏覽器都支持本機延遲加載。

你只需要添加屬性到選定的圖像和視頻。 添加該屬性後,您將自動在您的網站上啟用延遲加載。

延遲加載現在默認在您的 WordPress 網站上實現。 如果你只想為幾張圖片激活延遲加載,那麼你可以手動執行此操作。

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

儘管這是向您的 WordPress 網站添加延遲加載的絕佳方式。 您應該知道並非所有瀏覽器都支持此方法。 但是,一些最受歡迎的人會這樣做。 所以它仍然是一個安全的賭注。

延遲加載的優點和缺點

如果您不確定是否要對您的 WordPress 網站實施延遲加載。 然後你可以綜合考慮利弊再做決定。

優點

  • 它減少了帶寬使用,從而降低了託管成本。
  • 它提高了網站的速度,使訪問者的體驗更好。
  • 提高移動可用性。
  • 提高網站的排名。
  • 增加用戶保留的機會

缺點

  • 它減慢了滾動速度。

延遲加載如何影響 SEO?

搜索引擎會抓取您的網站和網站上的其他元素,例如圖像,以向用戶提供結果。 雖然延遲加載可以提高站點速度並提高性能。

在某些情況下,它可以阻止搜索引擎為圖像編制索引。 您網站的圖片還可以幫助您在搜索引擎上排名。 有時,用戶可能完全通過圖像找到您的網站。 因此,它們對於獲得有機結果至關重要。

這裡有幾件事要檢查

  • 您必須確保 Google 和其他搜索引擎仍然能夠抓取您的延遲加載圖像。 這可以通過使用 Google Search Console 中抓取部分下的工具“Fetch as Google”來檢查。 如果您可以在源代碼中看到圖像,那麼您就可以開始了。
  • 您應該為您網站的圖片使用 alt 標籤。 這將幫助搜索引擎了解圖像的上下文以及它與您網站的其餘內容的關係。

結論

雖然延遲加載是改善用戶體驗的好方法,但有策略地做同樣的事情也很重要。 例如,您不應該延遲加載出現在網站標題上的圖像。 因為快速加載這些圖像很重要。

除此之外,您可以延遲加載站點的其餘媒體。 延遲加載有不止一個好處。 它提高了站點速度,減少了帶寬使用,提供了出色的用戶體驗,並改善了 SEO。