Lazy loading is a delayed loading of resources outside the visual range of the screen loading approach, that is, when the user opens the web page, the first not to load the resources outside the visual range of the screen, and so these resources appear in the visual range, and then start loading. This approach can reduce the number of HTTP requests for the first screen of the web page, improve the loading speed of the first screen, for the image resources more websites, the effect is particularly significant.

What is Browser Native Lazy Loading

Previously, we implemented lazy loading of web images through JavaScript, but the latest Chrome browser has started to provide us with native lazy loading functionality, which has been supported on an experimental basis since Chrome version 74, and has been enabled by default since version 75.

After the browser supported the feature, we previouslyLazy loading of images using JavaScriptNow you can add a tag directly inside the HTML to realize lazy loading of images. Native lazy loading doesn't use JavaScript, so there's no extra overhead, and performance is naturally much better.

If supported by the browser, developers can add an extra loading attributeto enable and control the browser's lazy loading behavior. This property supports the following 3 values:

• lazy: enable lazy loading behavior for this element.
• eager: disables lazy loading behavior for this element, i.e. loads the page as soon as it is rendered.
• auto: Lets the browser decide whether to use delayed loading. When the loading attribute is set to auto, it is equivalent to not setting this attribute.

Native Lazyload Native Lazyload plugin

As we know, many WordPress images are output through template tags, and it's not so easy to modify the HTML output from the template tags to add attributes to support the native lazy loading functionality.Google has taken this into consideration and developed for us the Native Lazyload This plugin.

This plugin automatically adds the loading attribute to images to enable browser-native lazy loading. If the browser does not support theloadingattribute, the plugin falls back to the IntersectionObserver-based JavaScript solution. If JavaScript is disabled, but the browser supports theloading attribute, the plugin will add a noscript variant, the image will still include the load attribute without further changes.

Currently only Chrome supports the loading attribute, as it provides a more convenient and high-performance solution for a wide range of lazy image loading needs, and I'm sure other browsers will soon support it. We also provide theWordPress Performance Optimization ServicesPlease contact us for more information.