As times change, new tags and attributes emerge. The loading attribute is one such example and has gained popularity recently.
Recommended by Google, it’s widely used on many websites and is straightforward to implement. You can start using it immediately without any complex setup.
In this article, we’ll explore the loading attribute and its benefits.
A quick recap of the loading attribute
Simply put, the loading attribute is an attribute that delays the loading of images called by the img tag , and currently supports iframe.
Normally, when a page loads, all images on the page are loaded, so the more images you have, the slower the page will load.
By adding the loading attribute, images will not be loaded all at once, but will be loaded when they are displayed in the browser, which will improve the page display speed.
In the past, it was impossible to implement image delays without using a JavaScript library such as lazyload.js, but now that all major browsers have native support for Lazy-Load, it is possible to implement it without using JavaScript.
Furthermore, even if the browser is not compatible, there will be almost no negative impact if you simply ignore the loading attribute. Lazy loading of images has the advantage of speeding up page display speed and reducing the wait time before you can operate the page, and the greater the effect can be expected for sites and pages that make heavy use of images.
How to implement the loading attribute
The implementation is very easy: just add the tag :loading="lazy"
<img src="./img/sample.jpg" width="800" height="600" alt="Sample" loading="lazy">Just add loading=”lazy” to the img tag like this. By adding this, the image will be compatible with lazy loading.
Notes on loading=”lazy”
It is very easy to implement loading="lazy", but there are some points to be aware of.
If you do not keep these points in mind, it may cause unintended behavior, so be careful.
Don’t use above-board images
Generally, the first view is not supported. Since the first view is the area that is displayed from the beginning, there is no benefit to delaying the loading of this area, and it will only slow down the loading speed.
There is no problem if you are able to choose which images to add attributes to yourself, such as on a static site, but if you are handling this all at once using a system, you will need to include the following tag and perform exclusion processing.
Can be disabled with loading=”eager”
If the loading="lazy"image is included in the first view or at the top of the page due to a system or bulk processing , you can disable it by entering this loading="eager", so use it according to the situation.
Width and height are almost essential
I wrote that when introducing this, loading="lazy"all you need to do is add , but in fact there is a prerequisite for this, which is setting widthand .height
In reality, it will still work without it, but if you don’t set the image size, the height will be 0, so when the browser loads the image, the height of the image will be added separately, causing the content below the image to appear shifted.
The more you scroll down and the more the content loads, the more jerky it becomes, and the images load and the content shifts down, so when using it, it is important to make sure you also set it properly widthand height.
Links within a page may be out of sync.
Lazy loading of images means that when you are looking at the top of the page, images further down on the page are obviously not loading.
If the image height is not entered, the height will be recognized as 0 until it is loaded. In such a case, if you click on an anchor link such as an internal site link in the header and scroll down, the image height will be newly loaded the moment you move to the internal link, so the position of the link movement point may shift.
It is necessary to take such things into consideration when setting it up width andheight.
Lazy loading on WordPress sites
If you are using the latest version of WordPress, this is already automatically supported.
If you are using an older version, you will need to use the plugin “Native Lazyload”, but if you are using the latest version of WordPress, it will be automatically supported.
The points of caution mentioned below have already been addressed in the current version of WordPress, so if you are using WordPress to create your site, you don’t actually need to take any action yourself.
It will not be automatically reflected in tags written in your own theme.
The only thing that WordPress will automatically handle is pages that the WordPress system outputs.
When you post a post or static page using the WordPress editor, all images inside it are automatically added loading="lazy", but images are not added to pages you create within a theme, such as front-page.phpand home.php, so you will need to add them yourself.
Be careful because not everything is automatically added in WordPress. I had forgotten many things in my theme, so I would like to take this opportunity to fix them.
Is it recommended to also use decoding = “async”?
Recently, in addition to lazily loading images, it has also become common to include instructions for performing image decoding processing asynchronouslydecoding="async".
In fact, if you look at the images loaded in WordPress posts, you can see that loading="lazy"and decoding="async"are used together, and these two are used by default in WordPress.
Strictly speaking, the image at the top of the page, closest to the first view, does not have the notation loading="lazy", and decoding="async"is displayed even in the first view image.
You can actually see this by looking at eye-catching images on blogs, etc.
Summary
I’ve put together some information about lazy loading of images. Until a few years ago, this tag wasn’t really talked about, but now that Google and others seem to be pushing it, it’s being used a lot more.
WordPress now automatically supports it by default, and it’s easy to set up by just adding the following loading="lazy" to your HTML, so I think that more and more sites are now using it unless they have a special reason not to.
However, even though it is easy to implement, there are some things to keep in mind, so be sure to use it in a careful manner, such as not using it at the top of the page, such as above, and don’t forget to include the width and height marks when using it together.