search

WordPress / performance

Performance plugin from the WordPress Performance Group, which is a collection of standalone performance modules.
https://wordpress.org/plugins/performance-lab/
GNU General Public License v2.0
347 stars 94 forks source link

Prioritize loading poster image of video LCP elements #1183

Open westonruter opened 4 months ago

westonruter commented 4 months ago

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?

westonruter commented 1 month 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>
thelovekesh commented 1 month ago

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.

westonruter commented 1 month ago

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.

westonruter commented 1 month ago

Related to the preload attribute, I just found this interesting: https://kurtextrem.de/posts/improve-inp#videos--long-gray-tasks-%EF%B8%8F

thelovekesh commented 1 week ago

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.