Product Video - Best options for speed and delivery?

Technical Q&A
1

Hi, we’re wanting to place good quality video on collections and on product pages and have a few questions:

  1. Is it better to use video embeds from Youtube or Vimeo (other suggestions welcome) OR upload video directly to Shopify?
  2. What are the speed / loading ramifications? - will these large files adversely affect page load times?
  3. Over all is there a preferred method / best practice for video on product pages?

Thanks in anticipation!

2
  1. It’s lose lose, if you go directly with a video, the entire weigh of the video will loaded on the page, most videos aren’t really small, so you might be increasing your page weight by 10mb or whatever. If you go with vimeo or youtube, your increasing your page weight by 500kb of javascript. However, vimeo and youtube cut the video into chunks so you don’t have to deal with the entire weight at once, and they’re smart about sending the correct video quality depending on user latency, so probably go with vimeo/youtube

2.See above, both won’t be great. Someday I’ll do a test of which effects pagespeed insight’s score the most.

3.The way that will effect pagespeed insight’s score the least(or not at all) is to have a thumbnail and not load the code for youtube/vimeo or the video file untill the user clicks on the thumbnail, essentially lazyloading the video. Of course, if you want to have the video autoplay, you can’t do this.

3

Thank you - super helpful !

re option 3. thumbnail. Is this an out of the box supported method or a custom solution that requires custom theme code?

4

I think I have found one or two themes that ship with the Facade feature, but I can’t remember the names of them, in most cases, it’ll require custom development.

You can read more about the Facade method here if you’re interested:

https://web.dev/third-party-facades/

1 Like