Load time with GIFs

[JustinRichard]

Hi,

I'm a newb to website building. I have several GIF files on my landing page. Is my store too slow?

https://e-motionshots.com

Thanks,

Justin

[victorbui]

Hi @JustinRichard 

I would love to provide some feedback for your gif and some recommend for your store's page speed. By the way, I love your products and your store is so professional. 

I've just examined the page speed of your store and I have some feedback

- Your store's total weight now is bigger than usual. Page weight is a key factor in load speed. You should try to keep your pages under 4MB max. Keeping under 2MB is a good goal to aim for. Images are usually the heaviest contributor to page weight. I can point out some of them that are too big

…files/Beats_GIF.gif?v=158… (cdn.shopify.com)	2,592 KB
…files/360_Produ….gif?v=158… (cdn.shopify.com)	1,722 KB
…files/Beats_GIF_300x300.gif?v=158… (cdn.shopify.com)	847 KB

- Your store's page speed is pretty good on desktop but on the mobile device, it needs to be improved.

You should remove unused CSS. Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity: https://cdn.shopify.com/s/files/1/0099/0661/8423/t/5/assets/theme.scss.css?1092

You should remove the impact of some third-party code: Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading. 

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fe-motionshots.com%2F&tab=m...

- Here's the article which explains all about page speed of the Shopify store that I want to share you and hope it can help you in some ways.

I hope my recommendations can help you! If you have any other questions, please let me know.

Cheers!

[JustinRichard]

Hi Victor,

Thanks very much for taking the time to evaluate my site. One of the Shopify techs told me that the Google load test is not recommended for Shopify stores as it gives inaccurate results. Have you heard of this?

Thanks,

Justin

[victorbui · Accepted solution]

Hi @JustinRichard 

I agree with you that Google Page Speed Insight is not all but basically, you need to base on that to test your page. 

- In my previous answer, I based on both Google PSI and another tool to test your page, specifically this part

"Your store's total weight now is bigger than usual. Page weight is a key factor in load speed. You should try to keep your pages under 4MB max. Keeping under 2MB is a good goal to aim for. Images are usually the heaviest contributor to page weight". 

-> So my previous answer gave to you based on Google PSI and Shopify Analyzer. You can check your page again.

- And with some Shopify themes – especially the Turbo theme – many speed-boosting techniques (smart image loading, infinite scrolling feature, etc) are not detected by Google’s PSI. For example, PSI cannot detect Turbo’s preloading feature because this depends on user behaviour.

- I attached this post so you can read more on how to make your page speed load faster.

I hope my recommendations can help you clarify more! If you have any other questions, please let me know.

Cheers!

[JustinRichard]

Hi Victor,

Thanks so much for this information. It's very helpful. 

Cheers!

Justin

[rsdimitrov]

Hi Justin,

You can keep using animations, but don't use as old format as GIF for that

Use mp4 or webm images instead.

With some settings you can emulate the GIF behavior in 1/10 of the file size.

The quickest fix would be to upload the images to imgur and then download the mp4 files the site generates.

Then replace the gifs with the following code:

<video autoplay loop muted playsinline src="video.mp4"></video>

This will shave megabytes from your page weight.

[JustinRichard]

Hi Rumen,

Thanks so much for this information. I'm excited to try it, but shopify won't let me upload mp4 files and I'm not sure where to add the code you provided.

Thanks,

Justin

[rsdimitrov]

Hi Justin!

I think this thread with help with the mp4 upload issue: https://community.shopify.com/c/Technical-Q-A/HELP-Video-mp4-won-t-upload/td-p/518151

As to the code, seeing that you want the videos on your homepage, it may require changing:
* your theme's code—to use filenames in the theme customization panel instead of Image Upload controls

* the section template—to get the actual filename URL and put it in a video tag instead of image tag

If you need gifs on a page, you'll have to manually put the video code snippet in the "code view" of the page editor.

Yes, seems like a minor annoyance, but better be annoyed for a while than have a slow store page, don't you think?

P.S. If you need further implementation help, DM me.

[JustinRichard]

Hi Rumen,

Thanks again for the info. I was able to upload the files but I'm not sure how to change the following:

* your theme's code—to use filenames in the theme customization panel instead of Image Upload controls

* the section template—to get the actual filename URL and put it in a video tag instead of image tag

Do I need two hire a coder?

Thanks,

Justin

[rsdimitrov]

Hi Justin,

If you want to be able to change the video files on your homepage without fiddling with code every time, yes you will need someone to extend the functionality of your theme for you the way I described.

If you don't want that ease of use, you may be able to modify the theme section code yourself and hardcode the mp4 filenames. Then you'll have to change it every time you want to change the video. This is likely to take you time to get right and to may cause you problems down the road.

I bet now you are wondering "but what should my budget be?" Here is a guide on that: Shopify Store Customization — What Is A Reasonable Project Budget?