0

I am working on a Next js website with a 12mb banner/nav bar video which I am prefetching from an S3 bucket URL using get static props. In a normal browser window the website loads in less than 5 seconds, but in an incognito window the website loads in 16 to 25 seconds which is not ideal.

I would like some recommendations on how to reduce impact of the large video on site load time. I have tried resizing it using handbrake and that shaved 2mb from the original 12mb video size. Removing the banner video is not an option at this point. Thank you.

VC.One
  • 14,790
  • 4
  • 25
  • 57
Loreen
  • 115
  • 1
  • 1
  • 7
  • Is the video visible on the viewport on initial page load? Do you have to prefetch the video? Could you not to the opposite and lazy load it instead? – juliomalves Jul 24 '22 at 17:28
  • @juliomalves yes the video is the first thing you see when you land on the site so we cant lazy load it unfortunately – Loreen Jul 25 '22 at 07:49

1 Answers1

0

It sounds like your website is not loading until the video has fully downloaded.

One approach you can use is to start playing the video before it is fully downloaded.

You can either stream the video, using a streaming technology like the ABR protocols HLS or DASH, or you can use a simpler progressive download approach. For your case the end effect will be quite similar, and given the video is short and relatively small, progressive download may be easiest.

Most browsers and servers will support progressive download, or progressive playback / pseudo streaming, as standard but you do need to check the server accepts range requests and that your mp4 video has the metadata at the start rather than at the end (although I think some browsers may now also look for it at the end if they can't see it at the start). See here for ffmpeg example of moving this metadata to the start: https://stackoverflow.com/a/40943383/334402

Mick
  • 24,231
  • 1
  • 54
  • 120