References

Beginner-friendly references for web development, with live, editable examples.

The HTML fetchpriority attribute

Attribute All modern browsers Updated
Quick answer

The HTML fetchpriority attribute hints the relative priority for fetching the resource. It is used on the <img>, <link> and <script> elements.

Overview

The fetchpriority attribute hints the relative priority for fetching the resource. It applies to the <img>, <link> and <script> elements.

Mark your most important image (the LCP image) fetchpriority="high" and de-prioritize non-critical resources with low to improve Core Web Vitals.

Syntax

<img src="hero.jpg" fetchpriority="high" alt="">

Values

Value
auto (default) | high | low

Best practices

  • Declare the character encoding with <meta charset="utf-8"> first in the <head>.
  • Load scripts with defer (or as modules) so they do not block parsing.
  • Protect third-party resources with integrity and crossorigin (Subresource Integrity).
  • Use resource hints like preload deliberately, paired with the right as value.

Frequently asked questions

What does the fetchpriority attribute do?
Hints the fetch priority of the resource.
Where do head attributes apply?
On the metadata elements in the <head>: <meta>, <link>, <script> and <base>.
What is the difference between async and defer?
async runs a script as soon as it loads in no set order; defer runs scripts in order after the document is parsed.
Which elements use the fetchpriority attribute?
It is an element-specific attribute, used on the <img>, <link> and <script> elements.
enctype for