{"id":197385,"date":"2025-01-11T05:05:56","date_gmt":"2025-01-11T05:05:56","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/lazy-load-fix-for-divi\/"},"modified":"2025-12-20T21:03:39","modified_gmt":"2025-12-20T21:03:39","slug":"lazy-load-fix-for-divi","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/lazy-load-fix-for-divi\/","author":16091062,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.1","stable_tag":"1.1.1","tested":"6.9.4","requires":"5.7.0","requires_php":"7.0","requires_plugins":null,"header_name":"Lazy Load Fix For Divi","header_author":"Jerry Stewart","header_description":"Offers precise control of the ATF\/BTF threshold to control the lazy loading of images","assets_banners_color":"","last_updated":"2025-12-20 21:03:39","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/webworkz.nz","rating":0,"author_block_rating":0,"active_installs":30,"downloads":671,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.1.0":{"tag":"1.1.0","author":"jerrystewart99","date":"2025-01-14 02:48:46"},"1.1.1":{"tag":"1.1.1","author":"jerrystewart99","date":"2025-12-20 21:03:39"}},"upgrade_notice":{"1.1":"

Added ability to set The Fold<\/em> per page, per device<\/p>"},"ratings":[],"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.1.0","1.1.1"],"block_files":[],"assets_screenshots":{"Screenshot-1.png":{"filename":"Screenshot-1.png","revision":3220566,"resolution":"1","location":"assets","locale":""},"Screenshot-2.png":{"filename":"Screenshot-2.png","revision":3220566,"resolution":"2","location":"assets","locale":""}},"screenshots":{"1":"Above The Fold<\/em> image loading without plugin - Atf image being lazy loaded => BAD<\/strong>","2":"Above The Fold<\/em> image loading with plugin enabled - aft image not<\/strong> lazy loaded"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1516,10731,133,20766,4884],"plugin_category":[],"plugin_contributors":[184797],"plugin_business_model":[],"class_list":["post-197385","plugin","type-plugin","status-publish","hentry","plugin_tags-above-the-fold","plugin_tags-divi","plugin_tags-image","plugin_tags-lazy","plugin_tags-lazy-load","plugin_contributors-jerrystewart99","plugin_committers-jerrystewart99"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/lazy-load-fix-for-divi.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/lazy-load-fix-for-divi\/assets\/Screenshot-1.png?rev=3220566","caption":"Above The Fold<\/em> image loading without plugin - Atf image being lazy loaded => BAD<\/strong>"},{"src":"https:\/\/ps.w.org\/lazy-load-fix-for-divi\/assets\/Screenshot-2.png?rev=3220566","caption":"Above The Fold<\/em> image loading with plugin enabled - aft image not<\/strong> lazy loaded"}],"raw_content":"\n

Offers Fine-grained control for manually setting the threshold which images on a Divi page are lazy-loaded.<\/p>\n\n

Includes a fix for a Divi bug that causes incorrect calculation of the lazy-load threshold.<\/p>\n\n

Background<\/h4>\n\n

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.<\/p>\n\n

For best page load performance, only Below The Fold (btf)<\/em> media should be lazy loaded. Below The Fold<\/em> means the part of the page that is not visible on first page load, prior to any scrolling.<\/p>\n\n

Google Page Speed Insights (PSI) will rightly complain if media atf<\/em> are lazy loaded, and also if media btf<\/em> are not lazy loaded.<\/p>\n\n

In version 5.7.0, Wordpress added a feature that automatically adds the loading=\"lazy\" attribute to media it considers to be btf<\/em>. What it considers btf<\/em> basically means everything after the 3rd media component irrespective of page design.<\/p>\n\n

Divi's Critical CSS feature attempts to do a better job of determining the fold by analysing the raw page modules' shortcodes. \nDivi offers different threshold settings of where it considers The Fold<\/em> to be. eg. 'Low', 'Medium' or 'High'. (This setting is found in Divi Settings|Performance|Critical CSS Threshold.)<\/p>\n\n

The exact position of The Fold<\/em> 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.<\/p>\n\n

How the Lazy-Load-Fix-for-Divi plugin works<\/h4>\n\n

This plugin allows the developer to determine the exact position of The Fold<\/em> 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.<\/p>\n\n

For example, suppose you decide that you want to optimise for the following screen resolutions:<\/p>\n\n

1200 x 834 - desktop\n320 x 820 - mobile\n<\/code><\/pre>\n\n
(these are the approximate resolutions that Google PSI uses)<\/p>\n\n
Then, after completing your page design, inspect your page in a browser that is set to these dimensions(note 1)<\/code> and identify the first Divi module that is btf<\/em>.<\/p>\n\n
To manually set the threshold, add one or more of the custom classes to the first Divi module btf<\/em>.(note 2)<\/code>.<\/p>\n\n
Allowed values are:<\/p>\n\n
ww-btf-desktop\nww-btf-mobile\nww-btf-tablet (see note 3)\n<\/code><\/pre>\n\n
All media items btf<\/em> will be lazy-loaded, those atf<\/em> won't be.<\/p>\n\n
Repeat in the same way to set up thresholds for each page you want to optimise for.<\/p>\n\n