Skip to content

Appropriate preload value should be selected for video based on whether it is in the viewport #1592

@westonruter

Description

@westonruter

I noticed that the default preload value for videos in the Video block is set to "Metadata":

Image

Nevertheless, this does not result in preload=metadata being added to the VIDEO tag in Gutenberg but rather no preload attribute at all. This leaves it up to the browser to decide what the default behavior is. In the worst case, the browser could decide the default is preload=auto which according to MDN, this "Indicates that the whole video file can be downloaded, even if the user is not expected to use it." This is not good as it means bytes are needlessly being downloaded. Nevertheless, Chrome's default is preload=metadata which is what the spec encourages browsers to use. When using preload=auto

On an example page that has a Video with a poster outside the viewport, the following is the impact on the total number of bytes downloaded for a video that is 59 MB in size:

preload=auto (4.5 MB) preload=metadata (1.5 MB) preload=none (0.9 MB)
Image Image Image

Note: The values of preload=auto and preload=metadata actually often seem to result in the same bytes being downloaded by Chrome. What is consistent, however, is that preload=none saves on a lot of bytes. Therefore, it may not make much of a difference setting preload=auto versus preload=metadata for videos in the initial viewport, but what surely will make a difference is to set preload=none for a video that doesn't appear in any initial viewport breakpoint.

The preload=none value should be automatically changed to preload=metadata (or preload=auto) when a video enters the viewport (via IntersectionObserver). This will ensure that the video is ready to play when the user sees it (similarly to #1590 which would start autoplaying when the video nears the viewport):

preload=none preload=metadata
Image Image

When a video is in all initial viewports, it should probably get preload=auto especially when it is the LCP element. It may even make sense to add fetchpriority=high preload links when it is the LCP element, particularly when the video has autoplay. (Update: This is not supported. See #1593.)

Note that the poster is getting downloaded automatically even though the video is not in the viewport. I've filed #1591 for this.

Metadata

Metadata

Assignees

Labels

[Plugin] Image PrioritizerIssues for the Image Prioritizer plugin (dependent on Optimization Detective)[Plugin] Optimization DetectiveIssues for the Optimization Detective plugin[Type] EnhancementA suggestion for improvement of an existing feature

Projects

Status

Done 😃

Relationships

None yet

Development

No branches or pull requests

Issue actions