The latest version of Chrome (76) shipped with a new “loading” attribute that allows developers to specify resources, such as images and iframes, to defer loading until the user scrolls nearer to them. In the past, developers have used third-party libraries to achieve lazy loading but soon this will no longer be necessary, as more browsers adopt the loading attribute. Chrome developers published a compelling, in-depth explanation of how browser-level native lazy-loading can improve performance.
Morten Rand-Hendriksen filed a trac ticket 14 months ago, recommending WordPress introduce a lazy-loading API for media and other elements. Millions of WordPress users already have have some form of lazy loading on their sites using popular plugins like Jetpack, Autoptimize, Smush, WP-Optimize, and others.
Rand-Hendriksen contends that lazy-loading should be added to core because it is a performance best practice that WordPress should not require site owners to implement on their own. Without a core standard for lazy-loading, themes and plugins are all taking different approaches to solve this problem, which can cause conflicts and unexpected behavior. Contributors working on the ticket are still discussing the specifics of how WordPress core can best support lazy loading.
Meanwhile, WordPress developers who are excited about taking advantage of native lazy-loading are sharing their their own functions and custom plugins on GitHub, WordPress.org, and in the Advanced WordPress Facebook group.
Chris Franchetti shared a gist for a function that adds lazy loading to it to anything with a src. Chris Zähller published a set of functions on GitHub called WP Lazy that work in a different way. It adds the
loading=“lazy” attribute when inserting new media or displaying a gallery via the WordPress gallery shortcode.
If there is a long delay on the core trac ticket, there will inevitably be a proliferation of lazy-loading solutions that allow WordPress users to implement what several major browsers are already supporting. Existing lazy load plugins may also change to add support for the “loading” attribute, with their previous solutions as a backup for browsers that don’t yet support it.
I just released the Native Lazyload + Polyfill that enables this everywhere not just in Chrome.