loading=lazy is great for images, but it’s not enough for video embeds – here is why

The loading attribute brought to browsers what was previously done with bloated JavaScript solutions. It’s great! Just one attribute on the image and you are done. The browser decides when to load the image and loads images when they are below the visible area about to get scrolled into view.

<img loading="lazy" src="..." ... />

When it comes to iframe embeds, they work the exact same way:

<iframe loading="lazy" src="..." ... />

The issue with this is that iframes and not just images, they are websites! YouTube loads 1.2 MB in its iframe. It helps, if your video is initially way outside the view, that is often just not the case.

loading=lazy forces every single iframe to load when they come into view. What is perfectly fine for images becomes an issue for iframes.

1. The size is atrociously big.
2. Users may not actually want to watch the video at all, or not right away.
3. Even if users want to watch a video, they will appreciate it more if the website itself loads faster not starts potentially stuttering (e.g. on less powerful mobile devices) when scrolling a website with videos.

This is why a lot of mayor websites use a more advanced type of lazy loading that requires user interaction to actually load iframes. I encourage you to do this as well. This can be done in many ways, like putting the iframe HTML inside a noscript or template tag and injecting it into the HTML when the user clicks an image.

If you use WordPress, you are in luck and can use ARVE Pro that does this all for you and much more. You can benefit from the many years I have been working on how to best embed videos.

1. ARVE Pro will get the right thumbnail images for you, it lets you use your own, the post’s featured image.
2. You can style your lazyload elements to your liking.
3. It offers Lightbox.
4. And much more.