How can I speed up the loading time of a large gif on my website?

Technical Q&A
, ,
1

I added a gif to the main page of my site, it weighs 18.5 mb, and it takes a very long time to load, when I visit the site from a new mobile device, you need to wait about 5-7 seconds for the site to fully load because of this gif. The second launch of the site on the same device is fast. But for successful sales, it is important that the site launches quickly on the first attempt.
Can someone tell me how you can speed up the download process without deleting this gif, because it is quite high-quality and will be able to increase the conversion rate on the site.
Different gif compressors take 2-3% of the file weight, but this is not enough.
I have another gif on the product page, but it weighs 3 MB and loads pretty fast.
I will be grateful for your help, here is a link to my website: https://frame-tamer.myshopify.com/

1 Like
2

Here is this gif

Screenshot_1.png
Screenshot_1.png1599×754 133 KB

3

Hello @semk015 ,

I am Gina from flareAI app, and I am here to support you.

Large media files, such as high-quality GIFs, can significantly slow down the loading speed of your website, which can lead to a negative impact on user experience and conversion rates.

However, there are a few steps you can take to optimize the loading speed of your website without deleting the GIF altogether. Here are some suggestions:

  1. Optimize the GIF file
    While GIF compressors may not be able to reduce the file size of your GIF enough, there are other ways to optimize the file. You can try reducing the number of frames in the GIF, lowering the resolution, or reducing the color palette. There are several online tools available that can help with this.

  2. Use lazy loading
    With lazy loading, the GIF will only load when the user scrolls down to it, which can improve the initial loading time of the page. Shopify offers a built-in lazy loading feature for images on your website.

  3. Minimize HTTP requests
    Too many HTTP requests can slow down your website’s loading speed. You can reduce the number of requests by combining files, using CSS sprites, and reducing the number of plugins on your website.

  4. Use a faster hosting provider
    The speed of your website also depends on the hosting provider you use. Make sure to choose a provider that offers fast loading times and reliable uptime.

In summary, these steps can help improve user experience and boost conversion rates on your Shopify store.

Gina

4

Hi @semk015

Unfortunately, having a large gif will be slow and there isn’t really an easy fix to it. Best is to not rely on these things too much as they do slow down pages quite a lot.

You could look at maybe embedding a video that doesn’t autoplay instead?

Regards,

Cristian