jerrystewart99

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.
<h4>Background</h4>
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.
<h4>How the Lazy-Load-Fix-for-Divi plugin works</h4>
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:
<pre><code>1200 x 834 - desktop
320 x 820 - mobile
</code></pre>
(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<code>(note 1)</code> 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.<code>(note 2)</code>.
Allowed values are:
<pre><code>ww-btf-desktop
ww-btf-mobile
ww-btf-tablet (see note 3)
</code></pre>
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.
<ul>
<li>Note that <code>ww-btf-tablet</code> is not implemented in this version and will be treated as <code>ww-btf-mobile</code></li>
</ul>
<h4>Notes</h4>
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 <code>ww-btf-mobile</code>
<h3>Divi BUG</h3>
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.6)
The problem occurs in
<pre><code>Divi\includes\builder\core.php @ line #63
</code></pre>
– the remove_filter() call quietly fails because the priority is not specified. This bug results in the WordPress media counting logic to be run twice which defeats the lazy-load threshold when using Divi. 
The WordPress function remove_filter() specifies parameter 3 as <code>int $priority = 10</code>. If the priority is not 10 (in this case it is actually 12), the remove_filter call fails.
I guess Elegant Themes’s priority are now with version 5 so this bug may not ever get fixed. If the bug ever gets fixed, this bugfix part of this 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: <a href="https://wordpress.org/plugins/disable-lazy-loading/" rel="ugc">“Disable Lazy Loading”</a> 
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 < 4.5 or on WordPress < 5.7.0

Lazy Load Fix for Divi

Provides precise control of which media (images) are lazy-loaded for optimum page load performance.

ShortPixel

With ShortPixel Critical CSS plugin, your website can automatically generate above-the-fold CSS for your web pages. 
This means your website will load faster and get better scores with online testing tools like PageSpeed Insights or GTmetrix.
IMPORTANT NOTICE: Plugin closure! 
We would like to inform you that the ShortPixel Critical CSS plugin and criticalcss.co service will be closed starting December 1st, 2024, and will no longer be available.
The Critical CSS functionality has now been integrated into the <a href="https://wordpress.org/plugins/fastpixel-website-accelerator/" rel="ugc">FastPixel Caching plugin</a>, and we highly recommend transitioning to this new plugin as soon as possible to ensure continued functionality and support.
If you have any questions, please feel free to contact us at <a href="mailto:help@shortpixel.com" rel="nofollow ugc">help@shortpixel.com</a>.
How it works?
<ul>
<li>ShortPixel’s Critical CSS (CCSS) plugin uses our brand new service to generate the critical CSS for your website’s pages.</li>
<li>The generated CCSS is inserted into the web pages while the original .css files are deferred. This makes the pages load faster.</li>
<li>The plugin starts generating the CCSS for each visited page and retrieves it from the ShortPixel Critical CSS Service. This is done using WP CRON jobs that run in the background without user intervention and without slowing down the website.</li>
<li>The edited pages will have the CCSS automatically generated.</li>
</ul>
Features
<ul>
<li>The CCSS plugin can be configured to keep Critical CSS rules based on the page URL or for each page template. This can help optimize the number of CCSS files needed.</li>
<li>Additional flexibility: the website administrator can manually configure additional Critical CSS rules to be included in the generated Critical CSS.</li>
<li>Our plugin integrates with WP Rocket and Elementor, if they are present, in order to leverage the cache support and deliver Critical CSS more effectively.</li>
</ul>
The plugin was forked from the <a href="https://wordpress.org/plugins/wp-criticalcss/" rel="ugc"> WP Critical CSS</a> plugin, modified to use ShortPixel’s Critical CSS service and enhanced with new features.
Currently, the plugin while in its BETA version, is 100% free to use. Just install it on your website, configure it and test the results with a tool like <a href="https://pagespeed.web.dev/" rel="nofollow ugc">Google PageSpeed Insights</a> or <a href="https://gtmetrix.com/" rel="nofollow ugc">GTMetrix</a>
For questions or support, please contact us directly <a href="https://shortpixel.com/contact" rel="nofollow ugc">here</a>
Other plugins by ShortPixel
<ul>
<li><a href="https://wordpress.org/plugins/fastpixel-website-accelerator/" rel="ugc">FastPixel Caching</a> – WP Optimization made easy</li>
<li><a href="https://wordpress.org/plugins/shortpixel-image-optimiser/" rel="ugc">ShortPixel Image Optimizer</a> – Image optimization & compression for all the images on your website, including WebP & AVIF delivery</li>
<li><a href="https://wordpress.org/plugins/shortpixel-adaptive-images/" rel="ugc">ShortPixel Adaptive Images</a> – On-the-fly image optimization & CDN delivery</li>
<li><a href="https://wordpress.org/plugins/enable-media-replace/" rel="ugc">Enable Media Replace</a> – Easily replace images or files in Media Library</li>
<li><a href="https://wordpress.org/plugins/regenerate-thumbnails-advanced/" rel="ugc">reGenerate Thumbnails Advanced</a> – Easily regenerate thumbnails</li>
<li><a href="https://wordpress.org/plugins/resize-image-after-upload/" rel="ugc">Resize Image After Upload</a> – Automatically resize each uploaded image</li>
<li><a href="https://wordpress.org/plugins/wp-svg-images/" rel="ugc">WP SVG Images</a> – Secure upload of SVG files to Media Library</li>
</ul>

ShortPixel Critical CSS

Easy to use and simple. Does what it says.

Working great!

Critical CSS plugin by ShortPixel to speed up your website. Easy to use, works on any website.

Lazy Load Fix for Divi vs ShortPixel Critical CSS