Prioritize loading poster image of video LCP elements

Feature Description

When a video is the LCP element and it has a poster image, we should prioritize the loading of that poster image with a fetchpriority=high preload link. This would be a simple addition to the existing logic that does the same for an img or background-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 LCP video element also preload the video URL as well?

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 LCP video 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 sources, 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

@westonruter

#1183 (comment)

@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.

Navigation Menu

Repository navigation

Prioritize loading poster image of video LCP elements #1183

Feature Description

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Prioritize loading poster image of video LCP elements #1183

Description

Feature Description

Activity

westonruter commented on Jul 18, 2024

thelovekesh commented on Jul 18, 2024

westonruter commented on Jul 18, 2024

westonruter commented on Jul 24, 2024

thelovekesh commented on Aug 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions