如何在 WordPress 中正確停用 Lazy Load(逐步指南)

12/03/2022

如何在 WordPress 中正確停用 Lazy Load(逐步指南)

最後更新時間:2024 年 2 月 8 日,由編輯部撰寫 | Reviewed by: Syed Balkhi

你想在 WordPress 中停用 lazy load 嗎?

WordPress 預設啟用了 lazy load 功能,該功能延遲下載圖片和其它媒體以提高頁面加載速度。然而,這可能會影響某些網站的用戶體驗,因為圖片不會立即顯示。

什麼是 Lazy Loading?

WordPress 首次在 WordPress 5.5 中引入了對圖片的 lazy loading 功能。後來它將此功能擴展到 iframe 嵌入(如 YouTube 视频、Spotify 等)。

這種做法幫助改善網站性能和頁面加載速度,首先加載內容和可見區域。

一個較快的網站不僅對用戶有益,也可以提升網站排名,因為搜索引擎(如 Google)將速度作為重要的排名因素之一。

除了圖片和嵌入內容,還可以輕鬆地對評論和 Gravatar 用戶頭像進行 lazy loading,以進一步提高頁面加載速度。

你可以通過右擊圖片,選擇瀏覽器的 Inspect 工具來檢查 lazy loading 功能是否啟用。

這將分割瀏覽器屏幕並顯示 HTML 源代碼。在這裡,你將看到添加到圖片的“loading=lazy”屬性。

通常,我們不建議停用 lazy load,因為它對你的 WordPress 網站有整體好處。關閉它可能會導致網站速度變慢,轉換率降低以及 SEO 排名下降。

然而,有時 lazy loading 會影響某些網站的用戶體驗。例如,如果你運行攝影網站,圖片是內容的最重要部分,那麼 lazy 加載圖片可能會破壞用戶體驗。在其他情況下,你可能使用了不同的 lazy loading 解決方案,並只需關閉 WordPress 默認的 lazy load。

話雖如此,讓我們看看如何輕鬆在 WordPress 中停用 lazy loading。
我們將介紹一種使用代碼的方法和一種使用插件的方法,所以你可以使用以下鏈接跳轉到你選擇的方式:

方法 1:使用 WPCode 停用 Lazy Load(推薦)

你可以通過向主題的 functions.php 文件添加自定義代碼來簡單地停用 WordPress 中的 lazy 加載功能。然而,請記住,在添加代碼時,哪怕是最小的錯誤也可能破壞你的网站並使其無法訪問。

這就是為什麼我們推薦使用 WPCode 插件來添加自定義代碼。它是市場上最好的 WordPress 自定義代碼片段插件,使在網站上添加代碼變得超級簡單和安全。

首先,你需要安裝並激活 WPCode 插件。有關詳細說明,請參閱我們關於如何安裝 WordPress 插件的指南。

注意:WPCode 還提供免費版,你可以用於本教程。然而,升級到付費計劃將使你能夠訪問代碼片段庫、CSS 代碼類型、條件邏輯等功能。

啟動後,從 WordPress 儀錶板訪問 Code Snippets » + Add Snippet 頁面。
在這裡,點擊“Use Snippet”按鈕下的“Add Your Custom Code (New Snippet)”選項。

這將引導你到“Create Custom Snippet”頁面,你可以從輸入代碼片段的名稱開始。這可以是幫助你識別該代碼片段和其功能的任何名稱。
之後,從右上角的“Code Type”下拉菜單中選擇“PHP Snippet”。

現在,將以下 PHP 代碼複製並粘貼到“Code Preview”框中:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

這是代碼粘貼後的樣子。

然後,向下滾動到“Insertion”部分。只需選擇“Auto Insert”模式。
這將確保你的自定義代碼在你激活代碼片段後,會自動在整個 WordPress 網站上執行。

接下來,滾動回頁面頂部,只需將“Inactive”切換到“Active”。
然後,不要忘記點擊“Save Snippet”按鈕保存並執行代碼片段。

一旦啟用,此自定義代碼片段將會在你的 WordPress 部落格中停用 lazy loading 功能。
你可以通過右擊圖片並從瀏覽器菜單中選擇“Inspect”來測試。

在圖片的 HTML 代碼中,“loading=lazy”屬性將會消失。

方法 2:使用插件停用 Lazy Load

如果你不希望在站點上添加代碼,那麼你可以使用插件來停用圖片的 lazy loading。

你唯一需要做的是安裝並激活 Disable Lazy Load 插件。有關更多說明,請查看我們的逐步指南,了解如何安裝 WordPress 插件。

該插件開箱即用,無需任何配置。啟用後,它將自動在你的网站上停用 lazy load 功能。

附加:提升網站速度和性能

一旦你停用 lazy loading,它可能會負面影響你的網站速度和性能。

在這種情況下,你可以嘗試其他技巧來提升網站性能並減少頁面加載時間。例如,可以通過壓縮圖片、使用 JPEG 或 PNG 文件格式以及添加 alt 文本來優化網站上的圖片。

此外,你應該始終使用最新版本的 WordPress,在主頁上使用摘要,將評論拆分成多頁,並在網站上使用經 SEO 優化的主題。

除此之外,你還可以使用緩存插件,例如 WP Rocket 或 WP Super Cache 進一步提升網站速度。

有關更多提示,請參閱我們的新手指南,了解如何提升 WordPress 的速度和性能。

我們希望本文幫助你學習如何在 WordPress 中正確停用 lazy load。你可能還希望查看我們的新手指南,了解如何優化 WordPress 圖片以提高頁面加載時間,或查看我們挑選的最佳 WordPress 圖片壓縮插件。

如果你喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你還可以在 Twitter 和 Facebook 上找到我們。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>