Optimise GIF to optimise speed on homepage

[Nouveau_Health]

Hey all,

So, I have a gif we use on the front of our website, vitamored.com - but it's bringing our speed score down on Google Lighthouse to 40 as it's taking longer to load. Can we keep the gif, making it high quality and allowing us to continue to use it? Or do we need to convert it to a static image?

Thanks for your help in advance.

[SwiftfromOC]

Hi there, 

Happy to help here. We are developers of Swift SEO Page Speed Optimizer in Shopify App Store.

The GIF content is considered heavy and almost can't be optimized. Therefore, if you want to improve the speed performance, you should replace GIFs with static images.  

[Nouveau_Health]

Thank you so much for your support. I thought as much, I will look at
making the image static.

[flareAI]

Hello @Nouveau_Health,

This is Gina from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot.

To improve your website's speed score on Google Lighthouse while still keeping the animated GIF, you have a few options.

- Utilize online tools or specialized software to optimize the GIF's file size while maintaining its quality. Experiment with various optimization settings to find the right balance between file size and visual fidelity.

- Employ lazy loading for the GIF, ensuring that it loads only when it becomes visible to the user. By implementing this approach, you can preserve the high-quality GIF while minimizing its impact on the initial loading time of your website.

- Configure your server to set appropriate cache headers for the GIF. This enables the browser to cache the GIF after a user visits your website, resulting in faster subsequent visits as the GIF is retrieved from the user's local cache.

- Consider reducing the number of frames in the animation. By decreasing the frames, you can effectively decrease the file size. For example, if your GIF contains 100 frames, try reducing it to 50 frames.

- Depending on the specific content of your GIF, you may explore converting it to a more efficient format, such as HTML5 animations (using CSS or JavaScript) or a video format. These alternatives offer improved compression and loading times while still delivering a visually captivating experience.

- Leverage a CDN to serve your GIF. CDNs distribute your website's content across multiple servers worldwide, minimizing the distance between the user and the server. This can significantly enhance the loading time of the GIF, particularly for users located far away from your server.

- Opt for a limited color palette. By reducing the number of colors used in the GIF, you can effectively decrease its file size. Tools like Color Thief can assist in identifying the most common colors, allowing you to reduce the overall color count.

- Remove any unnecessary frames from the GIF. If there are frames that aren't essential to the animation, removing them can contribute to reducing the file size.

- Optimize your GIF specifically for small screens if it will be displayed on mobile devices. This entails reducing the resolution of the frames and the overall number of frames in the animation to enhance performance on smaller screens.

Let me know if you have any further questions.

Gina