Best way to embed GIF (page speed concern)

Solved
Shopify Partner
17 0 3

Hi everyone,

 

I want to include a GIF or a short video (5s) to demonstrate my product.

However, GIFs with an acceptable quality are way too large and short videos also slow down the page speed. Is there a way to achieve something like a GIF or short video with minimal impact on page speed?

 

Thanks

Andreas,

0 Likes
Highlighted
Shopify Partner
87 29 20

Hey Andreas, I'd recommend LazyLoading your gifs or autoplay videos to reduce their impact on your store.

 

If your store already has LazyLoading built in, usually you just have to add the class "lazyload" to your image and change the src attribute to data-src. If it doesn't and you're able to edit your code, you could use LazySizes to add LazyLoad to those gifs: https://github.com/aFarkas/lazysizes

 

Alternatively, Hyperspeed can add LazyLoad to your store for you, but product descriptions aren't handled by the app at the moment. Just contact support after installing the app and I'd be happy to make sure your gifs get LazyLoaded if you decide to use Hyperspeed!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
1 Like
Highlighted
Shopify Partner
17 0 3

Hi @Alex_Lam ,

 

Thank you for the suggestion!

My understanding of HTML, CSS and liquid is basic but I think the pictures on my site already use lazy loading.

 

All of them have the class "lazyload" and the image source always starts with "data-src".

 

Now I have two more questions, would be awesome if you can help me with those:

- when I upload a GIF, is it enough to give it the class "lazyload" and the "data-src" instead of src?

- does lazyloading (or something similar) also exist for videos that I want to embed via <iframe> (not Youtube or Vimeo)?

Thanks a lot!

0 Likes
Highlighted

Success.

Shopify Partner
87 29 20

To answer your questions:

- when I upload a GIF, is it enough to give it the class "lazyload" and the "data-src" instead of src?

Yup! That's all you need to do.

 

- does lazyloading (or something similar) also exist for videos that I want to embed via <iframe> (not Youtube or Vimeo)?

Exact same process for iframes!

Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
1 Like