Skip to content
Dev Tech
  • Home
  • Tech

Prioritize resources

June 17, 2021 Article

Aug 17, 2018• Updated Aug 5, 2020

Appears in: Fast load times

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 , , and .

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 tag in your page's 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:

An example of how priorities are displayed in Chrome Developer Tools
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 types.

  • 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.
  • 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.
  • is somewhat different from and , 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.
Last updated: Aug 5, 2020Improve article

READ Also :   Introduction to variable fonts on the web

Calendar

March 2022
M T W T F S S
 123456
78910111213
14151617181920
21222324252627
28293031  
« Feb    

Archives

  • March 2022
  • February 2022
  • January 2022
  • November 2021
  • October 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • Improve article
  • Performance
  • Tech
  • Uncategorized
  • Wordpress

Copyright Dev Tech 2022 | By Theme in Progress | Proudly powered by WordPress

en_USEnglish
id_IDIndonesian en_USEnglish