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
a3 Lazy Load
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
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 that
a3 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 responsive images are facilitated in WordPress by adding srcset and sizes 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.