How can I encourage the browser to cache the HTML5 <video> poster image?

by Rounin   Last Updated October 19, 2017 11:04 AM

I have a web page with a series of videos embedded on the page:

<video controls preload="metadata" poster="/path/to/video1/poster-image-1.jpg">
<video controls preload="metadata" poster="/path/to/video2/poster-image-2.jpg">
<video controls preload="metadata" poster="/path/to/video3/poster-image-3.jpg">

After I added the videos, the page load slowed down quite a lot, so I set about trying to ascertain the bottleneck.

The Network tab on Firefox Developer Tools reveals that each of the poster images is returning 206 Partial Content and the poster images are always being downloaded from the server, never from the local browser cache - and it's this that is slowing down the page by 2-3 seconds.

How can I ensure that the <video> poster images are retrieved from the local browser cache instead?

Is the only solution to have a series of invisible images elsewhere on the page, like this:

.preload {width: 1px; height: 1px; opacity: 0;}

<img class="preload" src="/path/to/video1/poster-image-1.jpg" alt="" />
<img class="preload" src="/path/to/video2/poster-image-2.jpg" alt="" />
<img class="preload" src="/path/to/video3/poster-image-3.jpg" alt="" />

Related Questions

Does background video affect SEO?

Updated October 08, 2016 09:01 AM

Serving Cached content to logged in users

Updated August 16, 2018 11:04 AM

What is the appropriate size for home page?

Updated April 14, 2016 08:15 AM