0

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?
jmarioste
  • 768
  • 7
  • 8
  • Have you tried using the [`afterInteractive`](https://nextjs.org/docs/basic-features/script#afterinteractive) (or `lazyOnload`) strategy when loading the scripts with `next/script`? – juliomalves Jun 26 '22 at 22:52
  • Yes, I also tried `beforeInteractive` but it's the same. – jmarioste Jun 27 '22 at 12:14
  • In theory, using `afterInteractive` should inject the script after the page is interactive, thus not affecting TTI metric. Do you not see a drop in TTI when using `afterInteractive` compared to `beforeInteractive`? – juliomalves Jun 27 '22 at 12:40
  • Nope, There's no drop in TTI. The default is also `afterInteractive` , I feel like the after interactive in lighthouse has a different meaning compared to next.js `afterInteractive`. Perhaps because when next.js identifies that the page is interactive. Wisita consumes a lot of processing power in mobile, and lighthouse will see that as if the page is still loading resources. – jmarioste Jun 27 '22 at 13:41

0 Answers0