Enable for native Lazy Loading Images for the Image element in Oxygen

Categories:
Tags:
, ,

The loading="lazy" attribute allows the browser to delay loading the content of <img> elements that are outside the visible area of the page until the user scrolls down the page and gets close enough to those elements. At the moment, the loading attribute is well supported by the latest versions of Firefox, Chrome, Edge and Opera browsers. Check out Can I use.

Starting with version 5.5, WordPress added native support for the loading attribute for images. This works great for blog images if you are using a block editor. However, when using the Image element in Oxygen, the loading="lazy" attribute is not added by itself.

There are two easy ways to do this: without a plugin and with a plugin.

1. Add attribute loading="lazy" without plugin

In the Advanced tab of the Image element, go to the Attributes settings and add the attribute you need:

Enable for native Lazy Loading Images for the Image element in Oxygen

That's all!

Loading Lazy attribute in HTML

The disadvantage of this method is that you will not be able to assign this attribute in bulk and you will need to do it manually for each image.

2. Add loading="lazy" attribute with the free plugin

Using the Flying Images by WP Speed Matters plugin you can easily add lazy loading to all images on your site. The plus is that you can use one of the ways: Native, JavaScript only or Native + Javascript. The third method allows for better browsers support because it will work in browsers that do not support native lazy loading.

Flying Images by WP Speed Matters - free lazy load plugin

Of course, we'd have less of a hassle if the loading attribute were in Oxygen by default. Please vote for this feature on GitHub.

You can also use any premium optimization plugin, each of which has such an option. However, this post is about how to do it simply and for free.

arrow-up