Adding Wistia Video Embed spikes up Time-to-Interactive metric in Lighthouse (Mobile) in a Next.js Project

582 Views Asked by At

I have a next.js project that uses MUI, NextAuth.js, I need to load the video without affecting the time-to-interactive metric in lighthouse (Mobile).

Simply adding the following scripts (using next.js Script component) in a component will spike the time-to-interactive:

<div>
  <Script src={`https://fast.wistia.com/embed/medias/${wistiaId}.jsonp`} strategy="beforeInteractive"/>
  <Script src={"https://fast.wistia.com/assets/external/E-v1.js"} defer />
  <Box
     className={`wistia_embed wistia_async_${wistiaId}`}
     sx={{ position: "absolute", top: 0, left: 0, right: 0 }}
  />
</div>

The sample project can be seen here: https://sample-project-b1jytiehi-jmarioste.vercel.app/video

Lighthouse adds around 3.2 seconds by just adding wistia video. enter image description here

I'm wondering if there's a possible way to load the video without affecting the TTI metric.

My current solution is to wait for user input events (like scroll or touch) before adding the scripts above, but it's not enough, the interface for the video has to be loaded and not show 'Loading...'. And it can be seen here:

https://sample-project-six-delta.vercel.app/video

enter image description here

So Essentially, I have two questions:

  1. Is it possible to embed a wistia video without waiting for user input and not affect Time-to-interactive?
  2. Is it possible to know when the page is interactive (in next.js), so that we don't need to wait for user input?
0

There are 0 best solutions below