Web components for embed optimization?

[cagrimmett]

The embed block can use some performance improvements when it comes to TikTok. The social scripts don't lazy load, and what TikTok loads is very resource intensive, so if more than a couple TikTok videos are embedded with the core embed block the page will run into performance issues. I'm writing this because a post with 18 TikTok embeds (reasonable for a blog focused on social media) consistently crashed mobile browsers.

Yes, their iFrame is terrible, but there is not a lot we can do about that. But we can load image posters instead of the full embed, then swap them out with the embed when a user taps.

We found a package that does this and chose to extended the core embed block with it, which uses a web component that fetches the poster and lazy loads the TikTok embeds: https://github.com/justinribeiro/lite-tiktok

Here is a mu-plugin we're using with this approach, extending the core embed block.

embed-block-optimizer.zip

This has some overlap with the work the Performance team is doing with the Embed Optimizer, but a different approach. Twitter and TikTok seem to be the two worst offenders, so I wanted to share this approach in case it is useful.

[westonruter]

Thanks for sharing. We've discussed facades before in #113. The big problem is that when you tap an embed on mobile, when there is a facade then you have to tap a second time to actually play the video, which is a bad user experience.