Search engines, like Google, consider page speed as one of the important ranking factors, so using techniques for faster initial page loading, could be a crucial factor for SEO.
One of these techniques is the deferred images loading allowing the browser to prioritize the loading of essential content like texts etc. and delay the slower images loading.
From technical point of view, this is as easy as using the defer attribute for an image element, which allows to postpone its loading until after other elements -
<img src="some-image.jpg" alt="Some Image" defer/>
In the example above, I've added the defer attribute to the img tag for the image you want to load last. While the defer attribute is not standard for the img tag, using it in this context is a common practice to achieve a similar effect.
An alternative way for achieving that could using a loading="lazy" property for the image -
<img src="some-image.jpg" alt="Some Image" loading="lazy"/>
Or if more precise control over the loading order is critical, it's possible also to consider using JavaScript to dynamically load images in the desired order after the initial page load. This approach provides more fine-grained control but requires additional scripting.
So to resume again by deferring the loading of non-essential images until later, you can reduce the initial page size. Smaller page sizes are generally favored by search engines and can contribute to better rankings. Mobile users, in particular, appreciate faster loading times. Deferred image loading helps optimize websites for mobile users, and since mobile-friendliness is a key SEO factor, this can positively impact search engine rankings.
