The loading attribute

If you find yourself adding a lot of images or iframe elements to your page, consider the loading attribute. Setting this attribute to lazy means the browser will only go and fetch the item if the user scrolls it into view. This is really useful for any media you know will certainly not be visible when the page first displays, meaning the cost of loading that item is saved until it is actually needed. It’s literally as simple as adding it like this:

<img src="home-image.png" alt="A rendering of the home page" loading="lazy" />

Or, if you were adding something like a YouTube video embed, you could make the same economy like this:

<iframe
    loading="lazy"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/NkfMBI1tVwY"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write...