I recently released version 1.4 of lite-youtube, the little performant web component that just keeps on going. The reason for the version bump was that I added some experimental interaction support for YouTube Shorts, which I think is kinda of nifty and that quite a few people seemed interested in.
This however inevitably lead to yet more questions from people. “Justin, why not a lite-tiktok web component?” Fair question and I had a spare hour the other day so I set out to build a one. The end result was version 0.1.0 of lite-tiktok which produces a more web performance friendly version.
Well, sort of.
You see it turns out the Tiktok embed is terrible on so many levels that my web component is little more than a “stop and hope for the best”. How terrible is the Tiktok embed for your web performance? Let me recount the ways:
- Then it loads the video. No, not a stream, it downloads the video before interaction or clicking play.
For my little 13 second duck video which I used to grab those numbers, that accounts for nearly 10MB for a control I have not interacted with. That’s right, that’s just the embed tossed into a page. No user click, no user hover, nothing. 10MB burned on your wire on top of the parse time and all the usual jank that comes along with such behavior.
On top of this terrible performance is the sad fact that unlike YouTube, Tiktok has no API for their embed. There is no means to control the player through a postMessage or other means, which means for the regular old placeholder-interaction-and-play trick I use for lite-youtube, you simply cannot do this. This means you end up with a double-tap to play for the default web component or you have to rely on the Intersection Observer autoload behavior to smooth out the experience.
Which is to say, my lite-tiktok web component is at best a slight improvement but cannot do much to deal with all that cruft.
Oddly enough, TikTok uses a service worker as well on their main site but the embed doesn’t utilize it in my testing. While the embed does use disk cache with somewhat reasonable headers, the problem ultimately becomes one of the weight of the media sources that it crushes the wire. Even the same video embedded twice won’t hit the disk cache for all media assets, resulting in quite the wire hit: my 13 second duck video, loaded twice on the same page via intersection observer at different times pulls 16MB on the wire.
Frankly, I’m just not a fan of the Tiktok’s embed even with my intersection web component. The media weight is simply too high given what may not be a user interaction. If they had any resemblance of an API to control playback, this could easily be worked around. In the mean time lite-tiktok is around albeit not ideal by any means. If you want, I talk about it more in this video;
And hey, TikTok’s source code says is hiring, so maybe they’ll get some web performance expertise and make the web a little nicer for their embeds.