GIFS on the web: A new way to bloat

I have written a lot about how animated GIFs are a bloat on the web. But, I admit, they are never going away (they really do help with engagement!).

So we have to do our best to make do, and ensure that we are not over bloating our pages with them.

The best way to use a GIF is to convert it into a movie, and loop it (as I described here in 2017). You can do this with videos at api.video as well (this is where I work, so that’s my not-so-shameless plug).

My Love/Hate with GIPHY

The Love

If you had the opportunity to see the social chats I have with my family – GIPHY plays a very important role in our conversations. Our chats are frequently interspersed with with silly looping videos. I know they are huge, and a waste of data, but our family has the privilege of fast internet, and it makes our conversations fun.

GIPHY does a lot of smart things – for example in Chrome, I get an animated webp – saving many KB on the image being delivered over a GIF. (and now that Safari supports webp, this approach can nearly be considered an ‘industry standard’:

The Hate

However, when I see GIPHY embeds on webpages, I know how much delay is being added to the page.

When I attempt to add a GIF from GIPHY, I go through the trouble of finding the source, and downloading it to my machine, and then adding the file itself to our CMS. You might ask – “why do you do that? wouldn’t just embedded the GIF be fine?” Here’s the reason:

Embedded a GIF – adding another 3rd party

Despite all of these approaches, sometimes we’re in a hurry, or you forget, and you just embed that cool GIF to your page. In the case of a recent blog post at api.video, we embedded a GIF from GIPHY. The embed code looks something like this:

<center>https://giphy.com/embed/26uf9QPzzlKPvQG5O<p><a href="https://giphy.com/gifs/studiosoriginals-star-trek-josh-freydkis-warp-speed-26uf9QPzzlKPvQG5O"></a></p><br></center>

Looks pretty innocuous, wouldn’t you say? (all my performance friends are cringing, because they know what is coming next…)

If you just create a simple HTML page and load this, you’ll get the GIF, plus a whole lot more.

First: the expected:

Yes, a Webp GIF was downloaded. It’s 169KB, -which in my opinion is pretty reasonable.

The other stuff

Peeking at the bottom of the Network tab in my dev tools, there’s a LOT of other stuff here. Just the GIPHY embed adds another 300+ KB of stuff. (you all probably guessed that this was coming…)

The biggest culprit is JavaScript. I actually discovered this while auditing our pages with Google Page Speed Insights:

I was initially surprised that 175KB of JS was being downloaded, which brought be to this investigation.

I ran a WebPageTest run and discovered a lot of GIPHY content being added – JavaScript, images and fonts!

There are other issues with this page, for sure. We’re working on those issues, but this is one we can just as easily fix by hosting the GIF locally and removing 200 KB of JS and 100 KB of fonts.

If you mouse over the GIF – you can expect another few hundreds of KBs of GIFs will download – not affecting page speed, but it is an unintended add for GIPHY on your page.

Mind your third parties

This is not a shock, but when you let a third party into your site – they may bring along a few guests. So – just like anything else- when you add a GIF to your page – be mindful of how you are doing it, as you might invite a lot more content onto your site.