[vanderZwan]

So whenever I see an article about this topic I like to open the Network tab of Developer Tools, disable cache and refresh to see how this work out in practice.

This page loaded in just under a second, and had 1.30MB of data in total. Pretty good!

However, when looking at where all the data is there seems to be something fishy going on. Basically, for some reason it loaded both a .webp and .webm file for the sticky header animation. The webp is a 450 KiB choppy animation, the webm a 770 KiB smooth one. If we skipped the webp that would be a 33% reduction in data and presumably equivalent speed-up of page load, so why bother loading a choppy gif?

Looking into the page source I get this tag:

    <video autoplay="" loop="" muted="" playsinline="" poster="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.webp">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.hvec.mp4" type="video/mp4; codecs=hvc1">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.hvec.mp4" type="video/mp4; codecs=hevc">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.h264.mp4" type="video/mp4; codecs=avc1">
    <source src="https://markentier.tech/posts/2020/10/wrote-javascript-to-avoid-javascript/pos-sticky.webm" type="video/webm; codecs=vp9">
    </video>

So I'm wondering if there is a point in adding a poster like that, given that it's not going to be seen for most people and probably going to be a major part of the data budget on any page that has any number of video tags on it.

(Also, my browser acts a bit funny here: if I refresh again it only downloads the webp, but still shows the webm - despite cache being disabled. Could it be that the video tag ignores my cache settings?)

[asaaki]

I think I should just remove the poster, it was initially replacing the GIF, which was megabytes in size. Given that the sizes of the WebP and WebM animations are pretty close I can live without it; all major browsers support both formats anyway.

I cannot help with the caching fun here, quick tested in both Chrome and Firefox. There's probably something strange in the video tag, either by design or by implementation.

[infensus]

I've had similar experiences with video cache and never fully understood it. For example, when I want to block a webm with ublock, adding a rule and refreshing never works, I need to close and reopen the tab for it to take effect.