Web features: [Fetch priority](https://webstatus.dev/features/fetch-priority) [\](https://webstatus.dev/features/link-rel-preload) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). Preloading resources with `` signals to the browser that a resource will be needed soon. However, preloads inherit the default priority for the resource type and for images in particular this is low. Using `fetchpriority` allows you to refine this relative priority, in particular ensuring image preloads are preloaded with a high priority allowing them to start earlier and use get more bandwidth resources. ## How to implement 1. **Identify preload candidates**: Find resources that are not discovered early by the browser (e.g., video poster images or background images in CSS) but are essential for the page's appearance. 2. **Elevate critical image preloads** : For the LCP image or other critical images that are not prioritized by default, use `` to ensure they are prioritized above other preloads. Note that fonts are already high priority by default. 3. **Deprioritize non-critical preloads** : For resources that aren't critical for the initial render (e.g., a background video or secondary fonts), use ``. 4. **Coordinate with resource types** : Note that different `as` types have different default priorities; use `fetchpriority` to override these defaults when necessary. ## Example code ```html ``` ## Best Practices - **MANDATORY** : Only use `fetchpriority="high"` on at most 1-2 critical image preloads to avoid network contention and diluting the priority boost. - **MANDATORY** : Use `fetchpriority="high"` on Largest Contentful Paint (LCP) images. - **DO**: Limit the total number of preloads on a page to at most 2 images and 2-3 essential fonts to prevent bandwidth contention. - **DO** use `fetchpriority="low"` for preloads that you want the browser to start early but not at the expense of critical resources (especially non-critical fonts). - **DO** specify the `as` attribute correctly to ensure the preload will be used. - **DO** prefer making critical resources (like LCP images) statically discoverable in HTML via `` tags rather than relying on preloads for background images. - **DO** ensure that font preloads always have the `crossorigin` attribute (even if same-origin). - **DO NOT** use the deprecated `importance` attribute. It has been replaced by `fetchpriority`. ## Fallback strategy The `fetchpriority` attribute on `` is a progressive enhancement. Browsers that do not support it will still preload the resource using their default priority for that resource type. To ensure compatibility, always provide correct `as` and `type` attributes. Source: [optimize-preload-priority guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/performance/optimize-preload-priority/guide.md)