Hi,
I'm a newb to website building. I have several GIF files on my landing page. Is my store too slow?
Thanks,
Justin
Solved! Go to the solution
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.
- 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!
This is an accepted solution.
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!
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.
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.
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
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?
User | Count |
---|---|
59 | |
52 | |
37 | |
34 | |
19 |