Solved

Does using a GIF instead of YouTube embed link improve Shopify product page speed?

chong
Excursionist
33 1 3

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!

🙂

Accepted Solution (1)

JohnCodes
Shopify Partner
134 10 74

This is an 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! 

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)

View solution in original post

Replies 4 (4)

JohnCodes
Shopify Partner
134 10 74

This is an 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! 

Developer at SpeedBoostr (Shopify optimization and dev agency).
Try out our Shopify Analyzer (free performance analysis tool).
Check out Order Automator (app that auto tags + fulfills orders, and more automation)
More Apps: Theme Scientist (A/B testing tool), Tip Jar (add a tip button to your store), File Optimizer (optimize CSS, JS, Liquid)
Zulfeqar
Tourist
5 0 1

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
Excursionist
16 2 3

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
New Member
9 0 0

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.