Looking at the lighthouse report it shows that there is a lot of unused JavaScript on the homepage. A large proportion of this is coming from YouTube because I have a video embedded and then it also looks like I am only using 1/3 of the JavaScript in my application source code.

YouTube JavaScript

I am going to focus this morning on the unused YouTube JavaScript sitting in the page. This is being loaded even when someone isn't interacting with the video.

Let's start by looking at how I am embedding the video. Here is an example of my YoutubeSingle component which is embedding the player using the react-player library.

import ReactPlayer from 'react-player'

export const YoutubeSingle = ({
  url,
}: {
  url: string
}) => {
  return (
    <div
      className="relative"
      style={{ padding: '62.5% 0 0 0' }}
    >
      <ReactPlayer
        className="absolute top-0 left-0"
        url={url}
        width="100%"
        height="100%"
      />
    </div>
  )
}

Ideally I want to only load this embed once someone has pressed play. We can load some placeholder image upfront instead to give a good experience.

The other consideration is that this player supports more than just YouTube and yet I am importing the whole library here.

Looking at the documentation, there are a couple of props that are worth a try.

light: Set to true to show just the video thumbnail, which loads the full player on click. Pass in an image URL to override the preview image

I've just pushed this change, let's do another lighthouse test to see if it has improved things.

That gave the page a performance boost from 54 to 67 which isn't bad for a such a small change. I can also see that there is no longer any YouTube third-party JavaScript being loaded into the page.

Tomorrow I will continue with this and try to reduce the amount of unused JavaScript inside my _app file.