Available methods for lazy loading of images in Wordpress.
===
Please note that server Google Pagespeed module can simply do lazyload of images. This filter uses beacons to detect, after of couple of page renders, which images are above the fold. In case the images are above the fold, they are not loaded lazily. If beacons are disabled, all images are lazy loaded.
This is by far the best method. Also, we can disable lazyloading per-image, if needed.
These are directives I recommend:
pagespeed EnableFilters lazyload_images;
pagespeed LazyloadImagesAfterOnload off;
The Wordpress way
Every plugin mentioned here is based solely on Javascript scripts.
a3 Lazy Load is using ressio/lazy-load-xt script. It is the best one, also the only plugin with screenshots, and only one that is configurable.
Unveil Lazy Load This plugin needs not to load an external dummy image required for lazy-load because the image is embedded in HTML using data URI scheme technique.
Deserve a mention:
-
Lazy Load is the orginal one, but not maintained frequently. Uses quite old
jquery.sonar.jslibrary. -
BJ Lazy Load also uses
jquery.sonar.jsand it is much better than the original one. Also recommended by KeyCDN. -
Lazy Load XT is based on
lazy-load-xtscript, the same script thata3 Lazy Loadplugin is using. Only the latter is much better plugin.
We now have Native lazy-loading for the web
Lazy-loading images in 5.5 – Make WordPress Core WP Rocket is Fully Compatible with Native Image Lazy-Loading on WordPress 5.5
By default, WordPress will add loading=“lazy” to all img tags that have width and height attributes present. Technically this is handled on page output, similar to how images are delivered with responsive attributes. To improve server-side performance of the two features, a new wp_filter_content_tags() function has been introduced so that img tags only need to be parsed once while then deferring the modifications to more specific functions related to the feature.