3

I'm working on a project where I would like to preload a couple of large videos so I started reading up on timing in network performance and resource prioritization.

I found that when I looked at the Priority column of my network tab in the chrome dev tools, the video priority levels were "low" according to the browser. Normally this would be fine, but we're working on a web VR experience so the videos (or at least the first one) is the foundation of the view.

It seemed like I could use the link tag's type="preload" attribute to raise the priority level of the first video. I tried adding a link tag into a small proof of concept and referenced one of our videos:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="preload" as="video" type="video/mp4" href="videos/cardboard.mp4" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <video src="videos/cardboard.mp4" autoplay width="200" style="border:1px solid green"></video>
    <p class="start-button">Start</p>
</body>

</html>

When I review the network tab in the dev tools the video's priority level still shows as "Low", but the video started loading at the same time that the "Highest" priority resource (the css) was loaded:

still low priority

When I comment out the preload link it does seem like the video's load timing is queued until after the CSS is finished:

with the link commented out

So it seems like the preload is working, but I'm not sure if the preload is working and chrome isn't updating the Priority value, or if the load time is different because without the preload link tag the css is referenced before the video tag.

i.e. Am I doing it right?!

Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137

1 Answers1

1

<link rel="preload"> does not change Chrome's internal "priority" for downloading an asset, it simply instructs Chrome when to start the download.

The resource is loaded with the same priority as it would otherwise, but now the browser knows about it ahead of time, allowing for the download to start earlier.

A stylesheet or font will still be considered Highest priority, and a video will still be considered low priority. But Chrome will start downloading an asset immediately when it encounters the <link rel="preload"> tag.

Note that <link rel="preload"> is a compulsory instruction to the browser; unlike the other resource hints we’ll be talking about, it’s something the browser must do, rather than merely an optional hint.

Source: https://developers.google.com/web/fundamentals/performance/resource-prioritization

crenshaw-dev
  • 7,504
  • 3
  • 45
  • 81