Prioritize resources

2018-08-17T00:00:00Z

Not every byte that is sent down the wire to the browser has the same degree of importance, and the browser knows this. Browsers have heuristics that attempt to make a best-guess at the most important resources to load first—such as CSS before scripts and images.

That said, as with any heuristic, it doesn't always work out; the browser might make the wrong decision, usually because it doesn't have enough information at that time. There are ways that you can influence this decision-making using <link rel="preload">, <link rel="preconnect">, and <link rel="prefetch">.

Default priorities in the browser #

The browser assigns different relative priorities to different types of resources based on how critical they might be. So, for example, a <script> tag in your page's <head> would be loaded in Chrome at a High priority (below CSS, at Highest), but that priority would change to Low if it has the async attribute (meaning it can be loaded and run asynchronously).

Priorities become important when investigating loading performance in your site. Beyond the usual techniques of measuring and analyzing the critical rendering path, it's useful to know Chrome's priority for each resource. You can find that in the Network panel in Chrome DevTools. Here's what it looks like:

The Priority column, which is hidden by default (see Add or remove columns .

These priorities give you an idea of how much relative importance the browser attributes to each resource. And remember that subtle differences are enough for the browser to assign a different priority; for example, an image that is part of the initial render is prioritized higher than an image that starts offscreen. If you're curious about priorities, Preload, Prefetch And Priorities in Chrome digs a lot deeper into the current state of priorities in Chrome.

So what can you do if you find any resources that are marked with a different priority than the one you'd want?

There are three different declarative solutions, which are all relatively new <link> types.

<link rel="preload"> informs the browser that a resource is needed as part of the current navigation, and that it should start getting fetched as soon as possible.
<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
<link rel="prefetch"> is somewhat different from <link rel="preload"> and <link rel="preconnect">, in that it doesn't try to make something critical happen faster; instead, it tries to make something non-critical happen earlier, if there's a chance.

Sérgio Gomes on web.dev

Prioritize resources

Default priorities in the browser #