Lazy-Loading for Twitter and YouTube Embed-Cards

Hi together,

On my website https://bitcoin-2go.de I am frequently embeding videos from our youtube-channel or using the embed function for twitter cards.

However, I’ve realized that all iframes are not shipped with a lazy-loading attribute. Therefore, the page speed and performance of those single posts suffers significantly.

What I would like to do now, is adopting the source-code which is responsible for rendering the bookmark cards.

Thus far, I’ve checked the github-repository and I think that

embed.js

is the file that needs to be manipulated in order to add loading="lazy" to the iframes.

It would be great to get some response and feedback on how I could manipulate the payload and iframe-element such that it automatically enables lazy loading.

Thanks in advance!

1 Like

following this discussion

trashed my initial reply because upon further inspection, Twitter’s embed actually creates its own iframe with another (the “Twitter Settings” iframe). It’s adding the content iframe after.

So I’m not sure just checking/setting the loading attribute will do it, as checking on DOMContentReady still only grabs that initial iframe. :slightly_frowning_face: