Why is Shopify Hosted Video so much slower than Youtube?

New Member
3 0 0

My product pages have slown to a crawl (20 second load times) once I hosted my videos to Shopify's own hosting. 

 

I had them on youtube before and my load time was 3-4 seconds.  The reason I changed is because I thought that having youtube videos on my product page looked tacky.  But this load time is unbearable.

 

Is there any way I can emulate Youtube's way of loading where the video doesn't load until the user clicks the play button of the video?  Or any other way to fix these ridiculous load times aside from going back to Youtube?

0 Likes
Shopify Expert
9837 61 1409

Hard to give you much feedback here since there's no live example. That said, if you're embedding videos from google you're getting a couple of things that come with it. The first is the data comes from specific video hosting infrastructure with buffer delivery methods, and the second is you get a nice player to save you having to make any of the interface or loading methods. As part of that player youtube also generates static images that are used as the placeholders when you see that click to play button.

 

If you've just popped the video in using a video tag (for example) then the page will do its best to start download right away. The page speed impact should suffer because of it. There's ways you can make the loading experience much better such as using a click to play button as you describe.

 

Google has some notes:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

And there'll be other resources or code out there. Got an example so we can see your page live?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
3 0 0

Here is an example:  https://turismoracing.com/collections/gaming-chairs/products/undisputed-led-gaming-chair

 

Loading time is 20.3 seconds according to gtmetrix, and that is after I switched the main video to cloudinary's cdn.... when hosted on shopify's cdn it was 21.4 seconds.

0 Likes
New Member
3 0 0

It doesn't appear that the slow loading time of the linked page is due to Shopify. Taking a quick look at your site in Chrome Dev Tools, your linked page is transferring 13MB of data over the network during page load. Of that, about 9.5MB is due to the 5 .gif images on the page (see below screenshot), and all images account for 10.7MB. 

 

There are three quick changes you can make that should significantly speed up the page load time:

 

1. Use .mp4 files instead of .gif

For the same quality, mp4 video files will be much smaller than gif. You can read more about this here: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-ani...

 

2. Lazy load images

Lazy loading refers to loading images only when the user scrolls, or once the first part of the page is already rendered. In your case, it looks like your theme is equipped with the lazySizes lazy load library, but is not making use of it.

 

The troublesome gifs have a class of "gf_image". In your theme code, try adding the "lazyload" class to these elements like so:

 

class="gf_image lazyload"

The lazySizes library/script should then lazy load those images, helping to speed up page load significantly. Note: lazy loading also works for the mp4 files you should use (from above).

 

3. Compress large images

You can use a tool like https://squoosh.app/ to significantly reduce image file sizes, with barely any reduction in image quality. At the default quality setting of 75, this tool reduces the main product image from 85.5kB to 63.4kB -- a 28% saving.

 

I recommend testing your site with Google's Lighthouse-based tool: https://web.dev/measure It provides actionable suggestions and provides links to extra resources for further reading. There are a number of other optimisations that can be implemented, but these 3 should be easy to implemented and provide the biggest wins.

 

I hope that helps :)

 

Troublesome gifs:

images.jpg

0 Likes
New Member
3 0 0

In which Liquid file would I paste this line in?  And does it matter where in the code I do it?


@isAdrisal wrote:

 

2. Lazy load images

Lazy loading refers to loading images only when the user scrolls, or once the first part of the page is already rendered. In your case, it looks like your theme is equipped with the lazySizes lazy load library, but is not making use of it.

 

The troublesome gifs have a class of "gf_image". In your theme code, try adding the "lazyload" class to these elements like so:

 

class="gf_image lazyload"

The lazySizes library/script should then lazy load those images, helping to speed up page load significantly. Note: lazy loading also works for the mp4 files you should use (from above).

 

0 Likes