The HTML fetchpriority attribute
The HTML fetchpriority attribute hints whether the browser should fetch an image, script or link early or late. Its values are high, low and auto, as in <img src="hero.jpg" fetchpriority="high" alt="Harbor">, and the effect varies by browser.
Overview
The HTML fetchpriority attribute tells the browser how urgent a fetch is relative to others of the same kind. It goes on <img>, <link> and <script> elements and takes high, low or auto. A missing or unknown value counts as auto, the default.
It is a hint rather than a rule. Both the browser's internal priority for a fetch and the effect of fetchpriority on it are entirely browser dependent.
In Chrome, an image without the attribute starts at Low or Medium, and one in the viewport can be raised to High. Marked high, it starts at High, and marked low, it stays at Low even in view.
The attribute covers the element's own fetch. On a link it sets the priority of the linked resource, such as a preload or a stylesheet. On a script it sets the initial fetch only and doesn't affect module imports.
Syntax
<img src="hero.avif" alt="Harbor at sunrise" fetchpriority="high">
<link rel="preload" href="hero.avif" as="image" fetchpriority="high">
<script async src="chat.js" fetchpriority="low"></script>Values
| Value |
|---|
| auto (default) | high | low |
Example
<div class="carousel">
<img src="harbor.avif" alt="Harbor at sunrise" width="1200" height="600" fetchpriority="high">
<img src="pier.avif" alt="Boats at the pier" width="1200" height="600" fetchpriority="low">
<img src="market.avif" alt="Fish market at dusk" width="1200" height="600" fetchpriority="low">
</div>
<script async src="chat-widget.js" fetchpriority="low"></script>Best practices
- Set
fetchpriority="high"on the image behind the page's Largest Contentful Paint. Pair it with a preload link for that image to start the fetch early as well. - Use the attribute sparingly. Excessive or incorrect prioritization can degrade performance.
- Mark images that start off screen, such as later carousel slides, with
fetchpriority="low"to signal that they can wait behind other images. - Give an async script
fetchpriority="high"only when the first view needs it. In Chrome, async scripts start at Low priority unless they are marked high.
