前言介紹
- 這款 WordPress 外掛「Lazy Load Fix for Divi」是 2025-01-10 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2025-01-14，距離現在已有 110 天。
- 外掛最低要求 WordPress 5.7.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
divi | lazy | image | lazy load | above-the-fold |
內容簡介
**總結：**
- 該外掛提供細緻的控制，手動設置 Divi 頁面上需要進行懶加載的圖片的閾值。
- 包含一個修復 Divi 錯誤的功能，該錯誤導致懶加載閾值的計算不正確。
**問題與答案：**
1. 這個外掛的目的是什麼？
- 該外掛的目的是提供開發人員手動設置頁面上需要進行懶加載的圖片的閾值，以改進頁面加載性能。
2. 以下折疊 (btf) 媒體應該如何進行懶加載？
- 為了實現最佳頁面加載性能，只有 Below The Fold (btf) 媒體應該進行懶加載。這表示在第一次頁面加載之前不可見的部分應該延遲加載。
3. 如何使用 Lazy-Load-Fix-for-Divi 外掛來確定頁面上的第一個 btf 模塊？
- 您需要在設計頁面後，使用特定解析度的瀏覽器檢視您的頁面，識別第一個被認為是 btf 的 Divi 模塊。然後，手動設置閾值，並添加自定義類到第一個 btf 模塊中。
4. 這個外掛如何處理 Divi 的錯誤和 bug？
- 除了提供手動設置閾值外，這個外掛還修復了 Divi 相關懶加載圖片的錯誤。該錯誤是由於 Divi 的實際計算錯誤造成的，這個外掛安靜地修復了這個問題。
原文外掛簡介
Offers Fine-grained control for manually setting the threshold which images on a Divi page are lazy-loaded.
Includes a fix for a Divi bug that causes incorrect calculation of the lazy-load threshold.
Background
To improve page load performance, modern browsers allow for images and other media to be lazy loaded. Lazy loading defers media loading until after the first page render.
For best page load performance, only Below The Fold (btf) media should be lazy loaded. Below The Fold means the part of the page that is not visible on first page load, prior to any scrolling.
Google Page Speed Insights (PSI) will rightly complain if media atf are lazy loaded, and also if media btf are not lazy loaded.
In version 5.7.0, WordPress added a feature that automatically adds the loading=”lazy” attribute to media it considers to be btf. What it considers btf basically means everything after the 3rd media component irrespective of page design.
Divi’s Critical CSS feature attempts to do a better job of determining the fold by analysing the raw page modules’ shortcodes.
Divi offers different threshold settings of where it considers The Fold to be. eg. ‘Low’, ‘Medium’ or ‘High’. (This setting is found in Divi Settings|Performance|Critical CSS Threshold.)
The exact position of The Fold however, depends on a few factors, perhaps the most obvious is the screen width. Divi’s analysis is approximate and is easily confused by the use of additional custom css.
How the Lazy-Load-Fix-for-Divi plugin works
This plugin allows the developer to determine the exact position of The Fold by manually setting it’s location for each page. You can do this after making a simple observation in a browser at the screen widths you want to optimise for.
For example, suppose you decide that you want to optimise for the following screen resolutions:
1200 x 834 - desktop
320 x 820 - mobile
(these are the approximate resolutions that Google PSI uses)
Then, after completing your page design, inspect your page in a browser that is set to these dimensions(note 1) and identify the first Divi module that is btf.
To manually set the threshold, add one or more of the custom classes to the first Divi module btf.(note 2).
Allowed values are:
ww-btf-desktop
ww-btf-mobile
ww-btf-tablet (see note 3)
All media items btf will be lazy-loaded, those atf won’t be.
Repeat in the same way to set up thresholds for each page you want to optimise for.
Note that ww-btf-tablet is not implemented in this version and will be treated as ww-btf-mobile
Notes
Note 1 — Set a browser to a specific resolution I suggest using Chrome with Developer Tools enabled (right click, select Inspect). Resizing the window with a mouse shows the window size next to the cursor.
Note 2 — Add a custom class to a Divi module Edit the module and select the Advanced tab and use CSS ID & Classes
Note 3 — Tablet devices are not implemented in this plugin version and will be treated as if they were ww-btf-mobile
Divi BUG
In addition, this plugin fixes a code bug in Divi relating to the lazy loading of images. (introduced in 4.5.2 and still present in 4.27.0)
The problem occurs in
Divi\includes\builder\core.php @ line #63
– the remove_filter() call quietly fails because the priority is not specified, resulting in the WordPress media counting logic to be run twice. This stuffs up the lazy-load threshold within WordPress.
This plugin quietly fixes the problem. If ET ever fixes this bug this section of the plugin will have no effect.
This bugfix is distinct from and will work independently from the custom setting of the custom classes described above.
Note: I contacted Elegant Themes about the bug and was advised to use the plugin: “Disable Lazy Loading”
which does an excellent job of disabling ALL lazy loading.
In this case though, this is not the behaviour I want.
My motivation for writing this plugin is to improve the Google PSI score on Mobile and Desktop devices.
I welcome helpful comments and suggestions 🙂
This plugin will have no effect if used on Divi
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Lazy Load Fix for Divi」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
EWWW Image Optimizer 》你是否對緩慢的網站感到沮喪？超大的圖片讓你感到 "噁心"？讓 EWWW Image Optimizer 儘可能幫助你的網站加速，提高跳出率並增強 SEO。最重要的是，讓訪客感到...。
Image Optimization by Optimole – Lazy Load, CDN, Convert WebP & AVIF, Optimize Images 》, Optimole的獨特之處在哪裡？, , 更小的圖片，同樣的品質, 完全自動化；設定一次就忘記它, 支援所有圖片格式, 支援Retina和WebP圖片, 以機器學習為基礎的自...。
LazyLoad Plugin – Lazy Load Images, Videos, and Iframes 》LazyLoad 是最好的 WordPress 免費 Image Lazy Load 外掛程式，可以在 WordPress 上延遲載入圖片、影片和 iframes。簡單來說，LazyLoad 會在圖片、影片和 ifr...。
NitroPack – Caching & Speed Optimization for Core Web Vitals, Defer CSS & JS, Lazy load Images and CDN 》NitroPack 是一個全方位的網站效能優化服務外掛，它包含了所有使網站加速所需的功能，包括圖片優化、代碼壓縮、快取、CDN (內容交付網路)、延遲載入等等。, ,...。
WordPress Infinite Scroll – Ajax Load More 》Ajax Load More是一款終極的WordPress無限滾動外掛，使用Ajax動力查詢載入文章、單篇文章、頁面、評論等等。, 使用Ajax Load More的短碼生成器建立複雜的自訂...。
Image Prioritizer 》### 總結:, 這個外掛通過優化圖片的加載，特別是 LCP（最大內容繪製時間）元素，包括 img 元素和帶有 CSS 背景圖像的元素。它還通過捕獲每個斷點的 LCP 元素...。
WP YouTube Lyte 》WP YouTube Lyte 可以讓您透過插入響應式「輕量級 YouTube 嵌入」方式進行「懶加載」視頻。這些看起來和感覺像是正常的 YouTube 嵌入，但只有在被點擊時才呼...。
Load More Products for WooCommerce 》透過 AJAX 以無限滾動方式或載入更多產品按鈕，從下一頁載入產品, 功能：, ✅ WooCommerce 產品的無限滾動, ✅ 載入更多產品按鈕或 AJAX 分頁, ...。
Lazy Load 》使用延遲載入圖片來提升網頁載入速度。使用 jQuery.sonar 只有當圖片在 viewport 內才載入。, 這個外掛是由 WordPress.com VIP 團隊、TechCrunch 2011 重製團...。
ShortPixel Adaptive Images – WebP, AVIF, CDN, Image Optimization 》ShortPixel Adaptive Images 是一款易於使用的外掛程式，讓您能夠在一分鐘內解決任何圖像相關問題，並提高您的網站核心網頁要素。通常，圖像是網頁上最消耗資...。
Lazy Load for Videos 》這個外掛改善了頁面加載時間，提高了你的 Google PageSpeed 指數。它與 oEmbed 配合使用，可以將嵌入的 YouTube 和 Vimeo 視頻替換為可點擊的預覽圖片。, 通...。
Disable Lazy Load 》, 這個外掛只有一個功能：關閉 WP 懶加載的功能。, , 啟用此外掛以關閉新的 WP 懶加載功能（添加在 WP 版本 5.5 中）。隨時可以停用此外掛以重新啟用懶加載功...。
True Lazy Analytics 》這個外掛可以啟用 Google Analytics、Facebook Pixel、Hotjar、Yandex Metrica（Yandex Metrika）和 Liveinternet 時間差載入（lazy loading）。不會降低 Pag...。
WP2Speed Faster – Optimize PageSpeed Insights Score 90-100 》自 2010 年以來，Google 就一直將頁面速度作為排名因素之一。2018 年，Google 通過 Pagespeed 更新進一步提高了標準。網站速度會影響用戶體驗和轉換率。, 為...。
Ajaxify Comments – Ajax and Lazy Loading Comments 》尋找新的外掛程式維護者 👀, 請注意，此外掛程式已不再維護或支援，我們正在尋找新的外掛程式維護者（請參閱我們的公告 這裡）。 , 介紹, 預設情況下，當使用...。