Does using a gif instead of a YouTube embed link speed up page load time?

[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!

[donaldhartfield]

Using techniques like render blocking, lazy loading, and fixing core web vitals can help improve the slow loading speed of your Shopify store. Here's how each of these techniques can be used:

1. Render Blocking - When a web page loads, the browser needs to load and render all the resources before it can display the page. This includes stylesheets, JavaScript files, and fonts. However, if any of these resources are "render blocking", they will prevent the browser from rendering the page until they have been fully loaded. To resolve this, you can try to optimize your website's critical rendering path by inlining critical styles and scripts, using async and defer attributes for non-critical scripts, and reducing the number of external resources.
   
   

2. Lazy Loading - Lazy loading is a technique that delays the loading of non-critical resources until they're needed, such as images or videos that are below the fold or off-screen. This can significantly improve the initial loading speed of your website. You can use lazy loading plugins or libraries to implement this technique.
   
   

3. Fix Core Web Vitals - Core Web Vitals are a set of metrics that Google uses to measure the user experience of a website. These metrics include page speed, interactivity, and visual stability. To fix core web vitals, you can optimize your website's images, reduce the number of third-party scripts, remove any unused CSS and JavaScript, and ensure that your website is mobile-friendly.
   
   

4. Use a performance testing tool: Use online tools like websitespeedy, Google PageSpeed Insights or GTmetrix to identify the issues that are slowing down your website's loading speed and get recommendations on how to fix them.

By using these techniques, you can improve the loading speed of your Shopify store, which can lead to better user experience and increased conversions. However, it's important to regularly monitor your website's performance and make any necessary updates to ensure that it's running smoothly.