讓您的 WordPress 網站更快的最佳延遲加載插件

已發表: 2019-04-01

擁有大量圖片的網站可能需要很長時間才能加載。 對於每張圖片,這都是另一個 HTTP 請求,當頁面加載緩慢時,您的用戶不得不在沮喪中等待更多時間。

那麼解決方案是什麼? 延遲加載。

繼續閱讀,或使用以下鏈接跳轉:

  • WordPress 5.5 帶來原生延遲加載
  • 是否需要插件?
    • 訪問接口
    • 瀏覽器兼容性
    • 額外優化
  • 原生延遲加載有什麼好處嗎?
  • 最佳延遲加載插件
  • 更多關於延遲加載

延遲加載可以顯著加快圖像密集型網站的速度,並且無需任何時間即可在您的網站上啟用。

簡而言之,它強製圖像僅在“首屏”時加載——換句話說,只有在用戶瀏覽器中顯示的圖像才會加載。

因此,如果您的頁麵包含 10 個新鮮且免費的全屏 WordPress 主題,則只有帖子中的前幾張圖片會加載,而其他圖片將在用戶向下滾動頁面時加載。

WordPress 5.5 帶來原生延遲加載

延遲加載對於 WordPress 來說仍然是一個相對較新的功能。

它通過在圖像上添加“lazy”屬性並將值設置為“loading”來工作,然後瀏覽器在輸出時對其進行處理。

如果您有一個忠誠的延遲加載插件,或者經歷了根本不想啟用延遲加載的階段,您會很高興聽到您可以禁用它。

一些插件會自動執行此操作,但是,如果您需要手動執行此操作,只需轉到您的 functions.php 文件並添加以下內容:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

這將禁用 WordPress 的延遲加載功能,這意味著您將能夠使用您選擇的插件而不會有衝突的風險。

這只是一行代碼,但如果您不喜歡添加它,您可以下載這個簡單的插件,它會為您完成。

是否需要插件?

既然 WordPress 提供了本機延遲加載,您可能想知道是否要使用插件。

請繼續閱讀,因為實際上有幾個原因您可能想要堅持使用插件:

訪問接口

一個好的延遲加載插件(例如 Smush)提供了一個界面,其中包含調整特定設置的選項,以及通過觸摸按鈕打開和關閉延遲加載的能力。

這些選項的範圍可以從將延遲加載的圖像類型到延遲加載適用的頁面。 如果您想在沒有插件的情況下更改此類設置,則必須深入研究代碼並手動添加這些異常。

瀏覽器兼容性

另一個很大的好處是大多數插件可以在所有瀏覽器上運行。 Safari 是不支持加載屬性的主要瀏覽器之一,因此如果您有一個包含大量圖像的網站,您可能會看到來自不受支持的瀏覽器的用戶彈跳。 這是您在使用插件時無需擔心的事情。

額外優化

大多數插件提供的不僅僅是延遲加載。 將圖像優化插件引入您的網站可能是您做出的最佳決定之一。

諸如 Smush 之類的插件可以幫助您獲得 Google 與圖片相關的 PageSpeed 建議,並提高您的網站速度 - 延遲加載只是開始!

原生延遲加載有什麼好處嗎?

從表面上看,插件似乎可以完成本機延遲加載可以做的所有事情,甚至更多。

雖然這在技術上是正確的,但主要區別在於大多數插件將涉及引入一個 JavaScript 庫,您的站點將依賴該庫。

原生延遲加載更簡單直接,不需要太多額外的代碼。

我們的圖像優化插件 Smush 實際上提供了自己的原生延遲加載版本。

它的工作原理與 WordPress' 相同,但支持與 Smush 相同的所有圖像格式。

原生延遲加載也許可以作為未來其他開發的基礎,但至少就目前而言,插件適合大多數網站。

如果您確實更喜歡使用插件來解決延遲加載需求的想法,我們已經收集了一系列免費的延遲加載插件。

  • Smush 圖像優化

    Smush 是最受歡迎的多合一圖像優化插件是有原因的。 我們提供了使圖像加載更快所需的一切。

    延遲加載在 Smush 的免費版本和 Smush Pro CDN 隨附的渦輪增壓 Smush Pro 上都可用,並且與本機延遲加載不同,它與所有瀏覽器兼容。

    為了使用 Smush 激活延遲加載,我們讓這個過程變得超級簡單。 您需要做的就是轉到 Smush 中的延遲加載部分並按下激活按鈕。 就是這樣。

    激活延遲加載後,您可以進一步調整設置,但這不是必需的。 Smush 和 Smush Pro 的默認設置是您看到重大性能改進所需要的一切。

    對 Smush 圖像優化感興趣?

    詳情下載
  • a3 延遲加載

    A3 Lazy load 是一個流行的插件,用於延遲加載您網站上的圖像、iframe、視頻和其他元素。

    它有很多設置,因此您可以自定義您希望如何加載網站上的資產。

    它還經過測試與 WooCommerce、高級自定義字段和各種 CDN 等流行插件 100% 兼容。

    對 a3 延遲加載感興趣?

    詳情下載
  • 瘋狂的懶惰

    這是另一個可以正常工作的超精益延遲加載插件。 無需複雜的配置。

    根據主題或 jQuery 的使用,Crazy Lazy 可以選擇使用 jQuery 插件 Unveil.js 的修改版本或原生 JavaScript 庫lazyload.js。

    對瘋狂的懶惰感興趣?

    詳情下載
  • 視頻延遲加載

    並非所有延遲加載插件都適用於視頻,這是一種恥辱,因為視頻可以比圖像增加更多的網頁文件大小。

    視頻延遲加載可以幫助您延遲加載 Vimeo 或 YouTube 上託管的視頻。 它加載佔位符圖像,並且僅在訪問者單擊它時才加載完整的視頻和視頻播放器。

    如果您的網站有很多視頻,並且您選擇了一個不包含延遲加載視頻的輕量級插件,這將是必不可少的。

    對視頻的延遲加載感興趣?

    詳情下載

更多關於延遲加載

使用插件是向您的網站添加延遲加載的最簡單方法,但它不是唯一的方法。 如果您想要更精簡的解決方案,您也可以在您的網站上使用 JavaScript。

如果您想了解更多信息,請查看如何使用延遲加載在 WordPress 中延遲屏幕外圖像,以全面了解延遲加載的工作原理以及如何在您的網站上重新創建該技術。

如果您想了解有關 WordPress 自己的延遲加載功能的更多信息,請查看公告。

開始延遲加載的最簡單方法是使用 Smush free 或 Smush Pro。

Smush Pro 添加了其他功能,可以幫助您獲得其他 Google PageSpeed Insights 機會。 它可以通過將圖像轉換為 WebP 文件來幫助您以下一代格式提供圖像,並通過使用 Smush Pro CDN 縮放圖像來適當地調整圖像大小。 Smush Pro 甚至與流行的 WP Retina 2x 插件兼容,因此您可以在不減慢 WordPress 速度的情況下延遲加載那些巨大的 Retina 圖像。

免費試用 Smush Pro,看看它能給您的網站帶來多大的改變。

您是否在您的網站上使用延遲加載? 它是否有助於使您的網站更快? 在下面的評論中告訴我們。
標籤: