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.
Given Chrome’s seemingly unshakeable, staggering market dominance, it will not be long before the loading attribute is supported for the vast majority of the web’s users. Firefox has an open ticket for implementing lazy loading using this syntax and the feature is also supported in Chromium 76-based browsers. It even works when the user has disabled JavaScript. In the meantime, Chrome recommends developers continue to use a third-party library along with loading=”lazy” is to provide a polyfill for browsers that do not yet support the attribute.
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.
Peter Shaw created a plugin called LH Native Lazy Loading that adds the “loading” attribute to IMG and IFRAME tags detected when filtering the_content(), post thumbnails, and oembed. It does not add any extra CSS or JavaScript and is compatible with JavaScript-based image lazy loaders, in case you want to use one as a fallback for browsers that don’t support the attribute.
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 native 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.
Original: wptavern.com
