Comment by cj | Hacker News Reader

Comment by cj | Hacker News Reader

One anecdote where their “Largest Contentful Paint” metric fails, and fixing degrades performance:

We have a large 300kb animated gif that takes up maybe 20% of the viewport above the fold. The gif demonstrates visually what our service does.

A couple months ago Webmaster Tools reported that page as being “slow” pointing to the large image download. So we decided to show the first frame of the gif as a (30kb) png file, and then swap in the gif 2 seconds after the page is fully loaded.

Except now the new “largest contentful paint” metric is failing on those pages because it includes the 2 second delay when the animated gif is swapped in. I guess technically they’re not wrong in how they’re calculating it.

In fewer words, Google doesn’t like anything being lazy loaded if it’s above the fold.

The metrics and how they’re calculated are questionable. We ended up optimizing for Google and removed the lazy load (ignoring that we think it’s a better UX to lazy load that specific gif).

> We have a large 300kb animated gif that takes up maybe 20% of the viewport above the fold. The gif demonstrates visually what our service does.

You might be able to turn a 300kB GIF into a much smaller encoded video; as long as it doesn't have audio, you can autoplay it.

Interesting case scenarios: 1) a Site has a stupid big gif that shows logo and staff parties, basically adding nothing but sucking up bandwidth(Not your case)

2) Your case, where you actually add value-content with the gif.

Now the speed metrics are just that, speed metrics they "report" in isolation from "content".

So now my question is: Is Google's OTHER-content-signals good enough to overcome any penalty that might have been applied because of the speed ?

Would an animated SVG work? Might be the best of both worlds, faster user experience and probably a better score.

That sounds like a nightmare. Is there any other way to delay the loading of the gif that doesn't negatively affect your score? Like a JS callback or similar.

As an aside, the other replies to your comment is very telling of the HN audience. Many of which aren't knowledgeable in the webdev field, but "they did it in the 90's", "use bleeding-edge tech" and "everything you're doing is wrong". Also IFRAMEs, hahaha.

Isn't there a standard way to show a thumbnail before loading an image? I remember doing that at the 90's.

I will not stay on a site with auto-playing video or GIFs. I can't focus on anything with it there.

Or you can scroll down. It's presumably a hero imagespace that serves to explain their product in the fastest way. 300kb for a gif isn't that big for such an inefficient type.

It takes me some effort to focus on most things. I'm not going to invest the energy to decide if the assault on my senses adds some value.

Cant you use a svg animation di you realy realy need the animations

Have you tried putting it in an IFRAME?

Reply on news.ycombinator.com