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="" />