![]() ![]() ![]() Unlike YouTube, the placeholder image has to be fetched via their oembed endpoint and cannot be determined by video id alone. We get around this by again using an Intersection Observer, but it's not awesome in my opinion given the weight. This makes the component not a great experience from an on interaction perspective you'll always end up with two taps to play the video. As such, there is not autoplay or postMessage event that you can send to tell it "play this video". TikTok basically doesn't have an API for their embed, unlike most other video players. This however leads to problem number two. ![]() ![]() This component does not make the underlying bad behavior of their iframe any less worse other than preventing it from burning up and blocking your main thread on load by forcing an interaction to load it. Don't believe me? Try it and pop DevTools open or eyeball the screenshot below. It will then load 3-5Mb of images, on top of loading the entire video clip. In my rough pass tracing and testing, a single embed will load 500kB of JavaScript on the wire. Full stop, do not pass go, cry under your desk. TikTok's video embed is truly a nightmare for your web performance. See my basic explainer video as to why, and keep in mind, I didn't even scratch the surface (ohhhh the performance trace is terrrribbblle). Tiktok's video embed web perf is terrible. Currently experimental and a work in progress. A web component that lazy loads TikTok embeds. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |