Learn Performance - Video
fetchpriority on poster image
This demo uses
fetchpriority
to hint the browser to boost the priority of the poster image on the
<video>
element.
The below chart compares the performance before and after the
preload
hint with
fetchpriority="high"
was added.
In the waterfall above—which includes the
fetchpriority
hint—the
poster.jpg
image starts downloading in parallel with the other high priority resources
and finishes at 1.2 seconds.
In the waterfall above, the
poster.jpg
image starts downloading once
style.css
has finished downloading and finishes at 1.7s. This
gives us a slower LCP at 1.7s.
View Source Code
<link rel="preload" as="image" fetchpriority="high" href="/images-accept/poster.jpg?v=1671553386107">