<lite-tiktok>

A web component that lazy loads TikTok embeds. Currently experimental and a work in progress.

TLDR;

Tiktok's video embed web perf is terrible. 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).

The Problem

TikTok's video embed is truly a nightmare for your web performance. Full stop, do not pass go, cry under your desk.

In my rough pass tracing and testing, a single embed will load 500kB of JavaScript on the wire. It will then load 3-5Mb of images, on top of loading the entire video clip. In sum total, expect 8-12MB on the wire. Don't believe me? Try it and pop DevTools open or eyeball the screenshot below.

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. This however leads to problem number two.

The Second Problem

TikTok basically doesn't have an API for their embed, unlike most other video players. As such, there is not autoplay or postMessage event that you can send to tell it "play this video". 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.

We get around this by again using an Intersection Observer, but it's not awesome in my opinion given the weight.

The Third Problem

Unlike YouTube, the placeholder image has to be fetched via their oembed endpoint and cannot be determined by video id alone. This results in a fetch call to the end point to fill in the base data. Note however, that action is still a factor of 100 (not a typo) faster than waiting for their terrible JavaScript to load fill in the same placeholder on mobile devices.

Seriously, that embed is truly that terrible.

Install via package manager

This web component is built with ES modules in mind and is available on NPM:

To install, use your package manager of choice:

npm i @justinribeiro/lite-tiktok
# or
yarn add @justinribeiro/lite-tiktok

After install, import into your project:

import '@justinribeiro/lite-tiktok';

Install with CDN

If you want the paste-and-go version, you can simply load it via CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-tiktok.js"></script>

Basic Usage

Note: as I say above, because there is no play event available, this will require a double tap to play. You likely want the IntersectionObserver example below is you want lazy load and single interaction play.

<lite-tiktok videoid="7117052937028980014"></lite-tiktok>

AutoLoad with IntersectionObserver

Uses Intersection Observer if available to automatically load the TikTok iframe when scrolled into view.

<lite-tiktok videoid="7117052937028980014" autoload></lite-tiktok>

Attributes

The web component allows certain attributes to be give a little additional flexibility.

| Name | Description | Default | | -------------- | ---------------------------------------------------------------- | ------- | | videoid | The TikTok video id | `` | | autoload | Use Intersection Observer to load iframe when scrolled into view | false |