Increase website page speed and score— use video in place of animated gifs
Recently we were developing a website for one of our clients, where they provided us with many videos, which they wanted to use on pages. However as some of videos were short like 10secs and from user experience we wanted them to play in loop without user intervention, which means we didn’t want user to click on video to play it to see it.
Now we tried to convert those videos into gifs, we noticed the size of the GIFs ballooned. If the original size of the video (mpeg format) was 300kb, when we converted it to GIF, it increased to 1.5mb…WOW!..that was huge jump and think if we were have couple of gifs like that on a page, what it would do to your page speed…go southward :(
We decided video is right choice baby!
No GIFs on website..
That’s it! if you want your website pages to load fast and have google pagespeed score. Many social media platforms like Twitter they convert the user uploaded GIFs to video (mpeg).
Conversion
There are number of ways to convert gifs to mpeg, i recommend using ffmpeg for the conversion, as it open source and pretty powerful.
Refer this article for different commands with right parameter to convert gfis to mpeg.
New age format
Google pagespeed recommend using next gen format for images and video — WebP and WebM. Again you can use ffpmeg to do the conversion. I would recommend using WebM and as fallback use MPEG, most of the browser do support (Chrome does — 2022 Browser market share report here) so you should be pretty good using WebM and WebP.
Embedding WebM into HTML
Once you have converted your GIFs into WebM and MPEG, you now need to insert them into your html. Remember we are replacing the GIFs which means we want these to auto play when page loads (NO user click/interaction). Here is how you can do it.
Video element requires a source and if has multiple sources it will user the first one and if browser does not support that format, it fallback to second source. Hence you can see in below code snippet we have use 2 sources.
<video autoplay loop muted playsinline>
<source src="no-gifs.webm" type="video/webm" />
<source src="no-gifs.mp4" type="video/mp4" />
</video>
You can host the video on your server or service like Vimeo to host and stream the videos. I recommend using third party streaming service like Vimeo