Open westonruter opened 4 months ago
Here's an example video element to test with:
<video
controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="640" height="360">
</video>
Aside: if there is no poster, should an LCP video element also preload the video URL as well?
Humm that sounds like a good idea.
Aside: if there is no
poster
, should an LCPvideo
element also preload the video URL as well?
Actually, preloading the video would be bad probably because it would try to fetch the entire thing, most likely. Maybe that would make sense if the video has autoplay
, but otherwise there is a preload
attribute on the video itself which we can set. If the video is in the initial viewport (for any breakpoint), then it should get preload=auto
. If it is outside the initial viewport, then it should be preload=none
.
If autoplay
is enabled, then we'll need to check if it makes sense to preload the poster image, or if it makes sense to preload the video file itself. However, in the case of a video
having multiple source
s, then this would mean multiple preload links with different types.
In any case, whenever a preload link is added we should make sure that it gets the appropriate media
attribute to specify the viewport range(s) in which the video appears in the initial viewport.
Related to the preload
attribute, I just found this interesting: https://kurtextrem.de/posts/improve-inp#videos--long-gray-tasks-%EF%B8%8F
https://github.com/WordPress/performance/issues/1183#issuecomment-2237212130
@westonruter I plan to address this in a separate issue and pull request to keep the current one on track for the next release. Let me know what you think.
Feature Description
When a
video
is the LCP element and it has aposter
image, we should prioritize the loading of that poster image with afetchpriority=high
preload link. This would be a simple addition to the existing logic that does the same for animg
orbackground-image
which is the LCP element.This can be done as part of the Image Prioritizer plugin. See #1088.
Aside: if there is no
poster
, should an LCPvideo
element also preload the video URL as well?