Slow Loading Speed

[chong]

Hi, I currently have a store that is using an embed link from youtube to show the product in action. However, after adding the embed link in the product description, the product page loading speed increased by about 3.5 seconds.

I've added some html attribute code to lazyload the video and it helps slightly.

However, I was wondering whether using a gif as a product image instead of an embed link from youtube in the product description will be comparably faster?

I would really appreciate your help guys. Thank you in advance

p.s. I know Html, Css and some Javascript. Any advice be it code related or non code related will greatly help. Thanks!

🙂

[JohnCodes · Accepted solution]

Hi @chong 

Nice attempt on trying to lazy load the YouTube video to improve performance. That's something I was going to recommend.

It's going to be kind of hard to tell whether or not a GIF will perform better than the YouTube video. That'll be dependent on the file size of the GIF. In some cases, the GIF may even make performance worse. I would just create the GIF and test it out.

Unfortunately, GIFs and videos will just about always add a noticeable negative impact to performance, which is why we recommend trying to stick with static images if possible.

However, it may be worth doing some A/B testing to see if showing your product in action increases sales. If so, it may be worth the performance trade-off.

Another route you could potentially take is to include your video and then try to optimize other areas of your site to make up for that increase in loading speed. You can run your website through the Shopify Analyzer (a free tool we built for the Shopify community) to see if there are any optimization opportunities.

I hope this helps! 

[Zulfeqar]

Please can you suggest some good app for our shopify website to increase product page speed to fulfil google core web vital requirments on mobile device.

[Bdelucca]

Hello Chong,

Gifs are usually bigger than videos from YouTube. What I would recommend for is to use a placeholder image and replace it later for the video. This will reduce the initial size of your page and later the video can be loaded by an event from the client or you can set a timer. Whatever works better for you.

Regards!