Even though there are opposing views, the majority will agree that; ‘good user experience starts with fast service’.
Web browsers (Chrome, Firefox, Opera…) load visual and text content simultaneously. This gives a nice view when opening the page. Such as:
<h2>A Nice Header</h2>
<img src="a-large-image" alt="Image info" />
<p>Texts that present the information the user wants to receive.</p>Unfortunately, not every user has the same high speed, so the experience users will have while viewing this page will also be different. In other words, the user will have to wait for this image to load in order to see the paragraph with the main information.
In an age where even 1 second counts, page loading will be slow when loading pages with elaborate – large numbers of images. So the faster you can give as designers, the more profit.
Solution: Asynchronous Loading of Images (decoding async)
With the decoding="async" attribute we will add to our <img> tag, we instruct the browser to continue displaying the content even if the images are not fully loaded. Thus, we tell the browser “The image can be loaded after the text” and ensure that the textual content is served without any delay.
<img src="a-large-image" alt="Image info" decoding="async" />There are 3 accepted values for the decoding attribute in modern browsers:
sync : The rendering of the page only continues after the image is ready, for a “complete experience”.
async : For best “performance” keep page loading and the image(s) will be loaded as soon as the decoding is complete.
auto : Let the browser settings decide how to install.
ATTENTION: Doesn’t work in Internet Explorer if anyone is still using it. 😄
Shall We Gain Some More Speed? (lazy loading)
We do not have to load the images outside the visible part of the web pages at the time the page is opened. If these images are only loaded when they enter the visible area, we will both serve the user faster and not use unnecessary bandwidth.
According to a study; 65% of users who “browse” a news or article leave before scrolling down.
By adding the loading="lazy" attribute to our <img> tag, we instruct the browser not to load images outside the pages visible area unless necessary.
<img src="a-large-image" alt="Image info" decoding="async" loading="lazy" />Remember: A fast and smooth presentation; brings good user experience. Good user experience will also bring happy, loyal users, thus trust and profit (in our business).