Optimizing TikTok Embeds to Reduce CLS Penalties

Adam Taylor
Mon, 28 Mar 2022 13:54:45 +0000
Twitter, Core web vitals, Cls score

TikTok has become one of, if not the most popular social media platform. They're fun, they're fast, and anyone can have fun with them, and we have worked very hard to make it super easy for writers and editors to embed them by simply dropping a link into our Add Media Bar.

But not all TikTok embeds have the same size, and they can dynamically change their height as their elements come through. These size changes cause penalties for cumulative layout shift (CLS), one of Google's Core Web Vitals.

We are always introducing new updates to our platform, and we've recently rolled out a platform-wide update that optimizes TikTok embeds to dynamically set the height of the embed. To solve this, we do a server-side call when a user embeds the TikTok to find the exact height and set it in the embed code. This new behavior will work for all TikTok embeds that get added to a post using the URL upload technique described in this post. This update will affect any new TikTok embeds, but not backwards to everything that you've embedded previously.