DevTools Tips: Debugging fetch priority

Sofia Emelianova

The browser shows some web page's content first and some later. With the Fetch Priority API, you can signal the initial fetch priority of important resources to the browser to optimize resource loading.

Watch the video to learn how to:

• Find the loading metric, Largest Contentful Paint (LCP), in the Performance panel.
• See the initial and final priorities in the Network panel and the Network track of the Performance trace.
• Use local overrides to test fetchpriority attributes in <img>, <link>, and <script> elements.
• Learn the difference between the loading and fetchpriority attributes.
• Learn when to lower the priority of resources.

LCP images can clearly benefit from fetchpriority="high". Another hint is if the browser automatically raises priority of an image, so it makes sense to set it initially.

For more information, see:

• Optimizing resource loading with the Fetch Priority API
• View network requests
• View timings
• Use big request rows