topic Load time with GIFs in Feedback On My Storehttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675624#M72532
<P>Hi,</P><P>I'm a newb to website building. I have several GIF files on my landing page. Is my store too slow?</P><P><A href="https://e-motionshots.com" target="_blank">https://e-motionshots.com</A></P><P>&nbsp;</P><P>Thanks,</P><P>&nbsp;</P><P>Justin</P>Mon, 09 Mar 2020 01:13:01 GMTJustinRichard2020-03-09T01:13:01ZLoad time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675624#M72532
<P>Hi,</P><P>I'm a newb to website building. I have several GIF files on my landing page. Is my store too slow?</P><P><A href="https://e-motionshots.com" target="_blank">https://e-motionshots.com</A></P><P>&nbsp;</P><P>Thanks,</P><P>&nbsp;</P><P>Justin</P>Mon, 09 Mar 2020 01:13:01 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675624#M72532JustinRichard2020-03-09T01:13:01ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675631#M72534
<P>Hi&nbsp;<LI-USER uid="639250"></LI-USER>&nbsp;</P><P>&nbsp;</P><P>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.&nbsp;</P><P>&nbsp;</P><P>I've just examined the page speed of your store and I have some feedback</P><P>&nbsp;</P><P>- Your store's total weight now is bigger than usual.&nbsp;<SPAN>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</SPAN></P><P>&nbsp;</P><TABLE width="361px"><TBODY><TR><TD width="286px"><DIV class="lh-text__url"><A href="https://cdn.shopify.com/s/files/1/0099/0661/8423/files/Beats_GIF.gif?v=1580251992" target="_blank" rel="noopener">…files/Beats_GIF.gif?v=158…</A><DIV class="lh-text lh-text__url-host">(cdn.shopify.com)</DIV></DIV></TD><TD width="74px"><DIV class="lh-text">2,592&nbsp;KB</DIV></TD></TR><TR><TD width="286px"><DIV class="lh-text__url"><A href="https://cdn.shopify.com/s/files/1/0099/0661/8423/files/360_Product_Shot_Nike.gif?v=1583168286" target="_blank" rel="noopener">…files/360_Produ….gif?v=158…</A><DIV class="lh-text lh-text__url-host">(cdn.shopify.com)</DIV></DIV></TD><TD width="74px"><DIV class="lh-text">1,722&nbsp;KB</DIV></TD></TR><TR><TD width="286px"><DIV class="lh-text__url"><A href="https://cdn.shopify.com/s/files/1/0099/0661/8423/files/Beats_GIF_300x300.gif?v=1580251992" target="_blank" rel="noopener">…files/Beats_GIF_300x300.gif?v=158…</A><DIV class="lh-text lh-text__url-host">(cdn.shopify.com)</DIV></DIV></TD><TD width="74px"><DIV class="lh-text">847&nbsp;KB</DIV></TD></TR></TBODY></TABLE><P>&nbsp;</P><P>- Your store's page speed is pretty good on desktop but on the mobile device, it needs to be improved.</P><P>You should remove unused CSS.&nbsp;<SPAN>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:&nbsp;<A href="https://cdn.shopify.com/s/files/1/0099/0661/8423/t/5/assets/theme.scss.css?1092" target="_blank" rel="noopener">https://cdn.shopify.com/s/files/1/0099/0661/8423/t/5/assets/theme.scss.css?1092</A></SPAN></P><P><SPAN>You should remove the impact of some third-party code:&nbsp;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.&nbsp;</SPAN></P><P><SPAN><A href="https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fe-motionshots.com%2F&amp;tab=mobile" target="_blank" rel="noopener">https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fe-motionshots.com%2F&amp;tab=mobile</A></SPAN></P><P>&nbsp;</P><P><SPAN>- Here's the <A href="https://help.pagefly.io/manual/pagespeed-optimization?utm_source=profile&amp;utm_medium=message&amp;utm_campaign=manual&amp;utm_content=%7Bseeder_LinhNH%7D" target="_blank" rel="noopener">article</A> 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.</SPAN></P><P>&nbsp;</P><P><SPAN>I hope my recommendations can help you! If you have any other questions, please let me know.</SPAN></P><P><SPAN>Cheers!</SPAN></P><P>&nbsp;</P>Mon, 09 Mar 2020 02:14:40 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675631#M72534victorbui2020-03-09T02:14:40ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675651#M72540
<P>Hi Victor,</P><P>&nbsp;</P><P>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?</P><P>&nbsp;</P><P>Thanks,</P><P>&nbsp;</P><P>Justin</P>Mon, 09 Mar 2020 03:06:30 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/675651#M72540JustinRichard2020-03-09T03:06:30ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/677287#M72639
<P>Hi&nbsp;<LI-USER uid="639250"></LI-USER>&nbsp;</P><P>&nbsp;</P><P>I agree with you that Google Page Speed Insight is not all but basically, you need to base on that to test your page.&nbsp;</P><P>&nbsp;</P><P>- In my previous answer, I based on both Google PSI and another tool to test your page, specifically this part</P><P>"<SPAN>Your store's total weight now is bigger than usual.&nbsp;</SPAN><SPAN>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".&nbsp;</SPAN></P><P>&nbsp;</P><P><SPAN>-&gt; So my previous answer gave to you based on Google PSI and <A href="https://analyze.speedboostr.com/" target="_blank" rel="noopener">Shopify Analyzer</A>. You can check your page again.</SPAN></P><P>&nbsp;</P><P><SPAN>- And&nbsp;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.</SPAN></P><P>- I attached this <A href="https://help.pagefly.io/manual/pagespeed-optimization?utm_source=profile&amp;utm_medium=message&amp;utm_campaign=manual&amp;utm_content=%7Bseeder_LinhNH%7D#how-to-optimize-your-site-to-make-it-load-faster" target="_blank" rel="noopener">post</A> so you can read more on how to make your page speed load faster.</P><P>&nbsp;</P><P><SPAN>I hope my recommendations can help you clarify more! If you have any other questions, please let me know.</SPAN></P><P><SPAN>Cheers!</SPAN></P><P>&nbsp;</P>Wed, 11 Mar 2020 02:43:27 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/677287#M72639victorbui2020-03-11T02:43:27ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/677675#M72683
<P>Hi Victor,</P><P>&nbsp;</P><P>Thanks so much for this information. It's very helpful.&nbsp;</P><P>&nbsp;</P><P>Cheers!</P><P>&nbsp;</P><P>Justin</P>Wed, 11 Mar 2020 14:34:45 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/677675#M72683JustinRichard2020-03-11T14:34:45ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/681616#M73009
<P>Hi Justin,</P><P>&nbsp;</P><P>You can keep using animations, but <A href="https://www.rumendimitrov.com/shopify-cro-quicktip-5.html" target="_blank" rel="noopener">don't use as old format as GIF for that</A></P><P>Use mp4 or webm images instead.</P><P>With some settings you can emulate the GIF behavior in 1/10 of the file size.</P><P>&nbsp;</P><P>The quickest fix would be to upload the images to imgur and then download the mp4 files the site generates.</P><P>&nbsp;</P><P>Then replace the gifs with the following code:</P><PRE>&lt;video autoplay loop muted playsinline src="video.mp4"&gt;&lt;/video&gt;</PRE><P>This will shave megabytes from your page weight.</P>Tue, 17 Mar 2020 11:29:54 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/681616#M73009rsdimitrov2020-03-17T11:29:54ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/685372#M73335
<P>Hi Rumen,</P><P>&nbsp;</P><P>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.</P><P>&nbsp;</P><P>Thanks,</P><P>&nbsp;</P><P>Justin</P><P>&nbsp;</P><P>&nbsp;</P>Sun, 22 Mar 2020 00:00:32 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/685372#M73335JustinRichard2020-03-22T00:00:32ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/686335#M73458
<P>Hi Justin!</P><P>I think this thread with help with the mp4 upload issue:&nbsp;<A href="https://community.shopify.com/c/Technical-Q-A/HELP-Video-mp4-won-t-upload/td-p/518151" target="_blank">https://community.shopify.com/c/Technical-Q-A/HELP-Video-mp4-won-t-upload/td-p/518151</A></P><P>&nbsp;</P><P>As to the code, seeing that you want the videos on your homepage, it may require changing:<BR />* your theme's code—to use filenames in the theme customization panel instead of Image Upload controls</P><P>* the section template—to get the actual filename URL and put it in a video tag instead of image tag<BR /><BR />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.</P><P>&nbsp;</P><P>Yes, seems like a minor annoyance, but better be annoyed for a while than have a slow store page, don't you think?</P><P>&nbsp;</P><P><EM>P.S. If you need further implementation help, DM me.</EM></P>Mon, 23 Mar 2020 15:11:19 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/686335#M73458rsdimitrov2020-03-23T15:11:19ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/687607#M73567
<P>Hi Rumen,</P><P>&nbsp;</P><P>Thanks again for the info. I was able to upload the files but I'm not sure how to change the following:</P><P>&nbsp;</P><P>* your theme's code—to use filenames in the theme customization panel instead of Image Upload controls</P><P>* the section template—to get the actual filename URL and put it in a video tag instead of image tag</P><P>&nbsp;</P><P>Do I need two hire a coder?</P><P>&nbsp;</P><P>Thanks,</P><P>&nbsp;</P><P>Justin</P>Wed, 25 Mar 2020 02:43:48 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/687607#M73567JustinRichard2020-03-25T02:43:48ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/687814#M73587
<P>Hi Justin,</P><P>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.</P><P>&nbsp;</P><P>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.</P><P>&nbsp;</P><P>I bet now you are wondering "but what should my budget be?" Here is a guide on that:&nbsp;<A href="https://medium.com/@rumen/shopify-store-customizations-how-do-you-calculate-the-budget-youve-got-for-the-project-b091e717e53d" target="_blank" rel="noopener">Shopify Store Customization — What Is A Reasonable Project Budget?</A></P>Wed, 25 Mar 2020 08:33:24 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/687814#M73587rsdimitrov2020-03-25T08:33:24ZRe: Load time with GIFshttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/688256#M73627
<P>Thanks. I think I'll run some tests to see if the concept works before I invest any further.</P><P>&nbsp;</P><P>Thanks again.</P><P>&nbsp;</P><P>Justin</P>Wed, 25 Mar 2020 15:48:03 GMThttps://community.shopify.com/c/Feedback-On-My-Store/Load-time-with-GIFs/m-p/688256#M73627JustinRichard2020-03-25T15:48:03Z