Optimize resource loading with the Fetch Priority API | Articles

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/articles/fetch-priority"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/articles/fetch-priority" /><link rel="alternate" hreflang="x-default" href="https://web.dev/articles/fetch-priority" /><link rel="alternate" hreflang="ar" href="https://web.dev/articles/fetch-priority?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/articles/fetch-priority?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/articles/fetch-priority?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/articles/fetch-priority?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/articles/fetch-priority?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/articles/fetch-priority?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/articles/fetch-priority?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/articles/fetch-priority?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/articles/fetch-priority?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/articles/fetch-priority?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/articles/fetch-priority?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/articles/fetch-priority?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/articles/fetch-priority?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/articles/fetch-priority?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/articles/fetch-priority?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/articles/fetch-priority?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/articles/fetch-priority?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/articles/fetch-priority?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/articles/fetch-priority?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/articles/fetch-priority?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/articles/fetch-priority" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/articles/fetch-priority" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/articles/fetch-priority?hl=vi" /><title>Optimize resource loading with the Fetch Priority API  |  Articles  |  web.dev</title> <meta property="og:title" content="Optimize resource loading with the Fetch Priority API  |  Articles  |  web.dev"><meta name="description" content="The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals."> <meta property="og:description" content="The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals."><meta property="og:url" content="https://web.dev/articles/fetch-priority"><meta property="og:image" content="https://web.dev/static/articles/fetch-priority/image/thumbnail.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2023-11-14", "headline": "Optimize resource loading with the Fetch Priority API" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Articles", "item": "https://web.dev/articles" },{ "@type": "ListItem", "position": 2, "name": "Optimize resource loading with the Fetch Priority API", "item": "https://web.dev/articles/fetch-priority" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="web-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Articles" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.dev/articles" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Articles" > Articles </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Optimize resource loading with the Fetch Priority API </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.</p> <p> <div class="wd-authors" translate="no"> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Addy Osmani" src="https://web.dev/images/authors/addyosmani.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Addy Osmani </span> <div class="wd-author__links"> <a href="https://twitter.com/addyosmani" aria-label="Addy Osmani on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/addyosmani" aria-label="Addy Osmani on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Leena Sohoni" src="https://web.dev/images/authors/leenasohoni.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Leena Sohoni </span> <div class="wd-author__links"> <a href="https://twitter.com/leena_sohoni" aria-label="Leena Sohoni on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Patrick Meenan" src="https://web.dev/images/authors/patmeenan.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Patrick Meenan </span> <div class="wd-author__links"> <a href="https://twitter.com/patmeenan" aria-label="Patrick Meenan on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> </div> </div> </div> <div class="wd-author"> <img class="devsite-landing-row-item-icon" alt="Barry Pollard" src="https://web.dev/images/authors/tunetheweb.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Barry Pollard </span> <div class="wd-author__links"> <a href="https://twitter.com/tunetheweb" aria-label="Barry Pollard on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/tunetheweb" aria-label="Barry Pollard on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://webperf.social/@tunetheweb" aria-label="Barry Pollard on Mastodon" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"> <title>Mastodon</title> <path fill="currentColor" d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z" style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"></path> </svg></a> <a href="https://www.tunetheweb.com" aria-label="Barry Pollard's homepage" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 30 30"> <title>Homepage</title> <circle cx="14.5" cy="14.5" r="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <ellipse cx="14.5" cy="14.5" rx="6.1" ry="13.5" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> <path d="M1.6 9.6h25.8M1.6 19.4h25.8" stroke-width="2" stroke-miterlimit="10" fill="none" stroke="currentColor" /> </svg></a> </div> </div> </div> </div></p> <aside class="note"><b>Note: </b> This feature was originally called Priority Hints but was renamed to Fetch Priority after standardization. See <a href="#history">History</a> for more details.</aside> <p><a name="browser_compatibility"></a> <div class="wd-browser-compat"> <p>Browser Support</p> <ul> <li data-support="yes"> <img alt="Chrome: 102." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-10 -10 276 276'%3E%3ClinearGradient id='a' x1='145' x2='34' y1='253' y2='61' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231e8e3e'/%3E%3Cstop offset='1' stop-color='%2334a853'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='111' x2='222' y1='254' y2='62' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fcc934'/%3E%3Cstop offset='1' stop-color='%23fbbc04'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='17' x2='239' y1='80' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23d93025'/%3E%3Cstop offset='1' stop-color='%23ea4335'/%3E%3C/linearGradient%3E%3Ccircle cx='128' cy='128' r='64' fill='%23fff'/%3E%3Cpath fill='url(%23a)' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E" > <span aria-hidden="true"> 102 </span> </li> <li data-support="yes"> <img alt="Edge: 102." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 27600 27600'%3E%3ClinearGradient id='A' gradientUnits='userSpaceOnUse'/%3E%3ClinearGradient id='B' x1='6870' x2='24704' y1='18705' y2='18705' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%230c59a4'/%3E%3Cstop offset='1' stop-color='%23114a8b'/%3E%3C/linearGradient%3E%3ClinearGradient id='C' x1='16272' x2='5133' y1='10968' y2='23102' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%231b9de2'/%3E%3Cstop offset='.16' stop-color='%231595df'/%3E%3Cstop offset='.67' stop-color='%230680d7'/%3E%3Cstop offset='1' stop-color='%230078d4'/%3E%3C/linearGradient%3E%3CradialGradient id='D' cx='16720' cy='18747' r='9538' xlink:href='%23A'%3E%3Cstop offset='.72' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.53'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='E' cx='7130' cy='19866' r='14324' gradientTransform='matrix(.14843 -.98892 .79688 .1196 -8759 25542)' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E" > <span aria-hidden="true"> 102 </span> </li> <li data-support="yes"> <img alt="Firefox: 132." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3E%3Cdefs%3E%3CradialGradient id='ff-b' cx='428.5' cy='55.1' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23ffbd4f'/%3E%3Cstop offset='.2' stop-color='%23ffac31'/%3E%3Cstop offset='.3' stop-color='%23ff9d17'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff563b'/%3E%3Cstop offset='.5' stop-color='%23ff3750'/%3E%3Cstop offset='.7' stop-color='%23f5156c'/%3E%3Cstop offset='.8' stop-color='%23eb0878'/%3E%3Cstop offset='.9' stop-color='%23e50080'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-c' cx='245.4' cy='259.9' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%23960e18'/%3E%3Cstop offset='.3' stop-color='%23b11927' stop-opacity='.7'/%3E%3Cstop offset='.4' stop-color='%23db293d' stop-opacity='.3'/%3E%3Cstop offset='.5' stop-color='%23f5334b' stop-opacity='.1'/%3E%3Cstop offset='.5' stop-color='%23ff3750' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-d' cx='305.8' cy='-58.6' r='363' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.3' stop-color='%23ffdc3e'/%3E%3Cstop offset='.5' stop-color='%23ff9d12'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-e' cx='190' cy='390.8' r='238.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%233a8ee6'/%3E%3Cstop offset='.5' stop-color='%235c79f0'/%3E%3Cstop offset='.7' stop-color='%239059ff'/%3E%3Cstop offset='1' stop-color='%23c139e6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-f' cx='252.2' cy='201.3' r='126.5' gradientTransform='matrix(1 0 0 1 -48 31)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E" > <span aria-hidden="true"> 132 </span> </li> <li data-support="yes"> <img alt="Safari: 17.2." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='195 190 135 135'%3E%3Cdefs%3E%3ClinearGradient id='s-a' x1='132.6' x2='134.4' y1='111.7' y2='-105.3' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23d2d2d2' /%3E%3Cstop offset='.5' stop-color='%23f2f2f2' /%3E%3Cstop offset='1' stop-color='%23fff' /%3E%3C/linearGradient%3E%3ClinearGradient id='s-b' gradientUnits='userSpaceOnUse' /%3E%3ClinearGradient id='s-c' x1='65.4' x2='67.4' y1='115.7' y2='17.1' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23005ad5' /%3E%3Cstop offset='.2' stop-color='%230875f0' /%3E%3Cstop offset='.3' stop-color='%23218cee' /%3E%3Cstop offset='.6' stop-color='%2327a5f3' /%3E%3Cstop offset='.8' stop-color='%2325aaf2' /%3E%3Cstop offset='1' stop-color='%2321aaef' /%3E%3C/linearGradient%3E%3ClinearGradient id='s-d' x1='158.7' x2='176.3' y1='96.7' y2='79.5' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23c72e24' /%3E%3Cstop offset='1' stop-color='%23fd3b2f' /%3E%3C/linearGradient%3E%3CradialGradient id='s-i' cx='-69.9' cy='69.3' r='54' gradientTransform='matrix(.9 -.01 .04 2.72 -9 -120)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E" > <span aria-hidden="true"> 17.2 </span> </li> </ul> <p><a href="https://developer.mozilla.org/docs/Web/API/HTMLImageElement/fetchPriority">Source</a></p> </div> </p> <p>When a browser parses a web page and begins to discover and download resources such as images, scripts, or CSS, it assigns them a fetch <code translate="no" dir="ltr">priority</code> so it can download them in an optimal order. A resource's priority usually depends on what it is and where it is in the document. For example, in-viewport images might have a <code translate="no" dir="ltr">High</code> priority, and the priority for early loaded, render-blocking CSS using <code translate="no" dir="ltr"><link></code>s in the <code translate="no" dir="ltr"><head></code> might be <code translate="no" dir="ltr">Very High</code>. Browsers are pretty good at assigning priorities that work well but may not be optimal in all cases.</p> <p>This page discusses the Fetch Priority API and the <code translate="no" dir="ltr">fetchpriority</code> HTML attribute, which lets you hint at the relative priority of a resource (<code translate="no" dir="ltr">high</code> or <code translate="no" dir="ltr">low</code>). Fetch Priority can help optimize the Core Web Vitals.</p> <aside class="note"> <p>Prefer video to reading? Check out this <a href="https://youtu.be/3rAf_Yx7R_g">DevTools Tips video on fetchpriority</a> for a summary of what's on this page.</p> <devsite-video video-id="3rAf_Yx7R_g"></devsite-video> </aside> <h2 id="summary" data-text="Summary" tabindex="-1">Summary</h2> <p><strong>A few key areas where Fetch Priority can help:</strong></p> <ul> <li>Boosting the priority of the LCP image by specifying <code translate="no" dir="ltr">fetchpriority="high"</code> on the image element, causing LCP to happen sooner.</li> <li>Increasing the priority of <code translate="no" dir="ltr">async</code> scripts, using better semantics than the current most common hack (inserting a <code translate="no" dir="ltr"><link rel="preload"></code> for the <code translate="no" dir="ltr">async</code> script).</li> <li>Decreasing the priority of late-body scripts to allow for better sequencing with images.</li> </ul> <figure> <img src="/static/articles/fetch-priority/image/a-filmstrip-view-comparin-298b8fe7eedbb.png" alt="A filmstrip view comparing two tests of the Google Flights homepage. At the bottom, Fetch Priority is used to boost the priority of the hero image, resulting in a 0.7 second decrease in LCP. " width="800" height="400"> <figcaption class="wd-caption">Fetch Priority improving Largest Contentful Paint from 2.6 s to 1.9 s in a test of Google Flights.</figcaption> </figure> <p>Historically, developers have had limited influence over resource priority using <a href="https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preload">preload</a> and <a href="https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect">preconnect</a>. Preload lets you tell the browser about critical resources you want to load early before the browser would naturally discover them. This is especially useful for resources that are harder to discover, such as fonts included in stylesheets, background images, or resources loaded from a script. Preconnect helps warm up connections to cross-origin servers and can help improve metrics like <a href="/articles/ttfb">Time to first byte</a>. It's useful when you know an origin but not necessarily the exact URL of a resource that will be needed.</p> <p>Fetch Priority complements these <a href="https://www.w3.org/TR/resource-hints/">Resource Hints</a>. It's a markup-based signal available through the <code translate="no" dir="ltr">fetchpriority</code> attribute that developers can use to indicate the relative priority of a particular resource. You can also use these hints through JavaScript and the <a href="/articles/introduction-to-fetch">Fetch API</a> with the <code translate="no" dir="ltr">priority</code> property to influence the priority of resource fetches made for data. Fetch Priority can also complement preload. Take a Largest Contentful Paint image, which, when preloaded, will still get a low priority. If it is pushed back by other early low-priority resources, using Fetch Priority can help how soon the image gets loaded.</p> <h2 id="resource-priority" data-text="Resource priority" tabindex="-1">Resource priority</h2> <p>The resource download sequence depends on the browser's assigned priority for every resource on the page. The factors that can affect priority computation logic include the following:</p> <ul> <li>The type of resource, such as CSS, fonts, scripts, images, and third-party resources.</li> <li>The location or order the document references resources in.</li> <li>Whether the <a href="/articles/efficiently-load-third-party-javascript#use_async_or_defer"><code translate="no" dir="ltr">async</code> or <code translate="no" dir="ltr">defer</code></a> attributes are used on scripts.</li> </ul> <p>The following table shows how Chrome prioritizes and sequences most resources:</p> <aside class="note"> <strong>Example of how to read this table:</strong> <ul> <li> Early CSS (like CSS in the <code translate="no" dir="ltr"><head></code>) is <code translate="no" dir="ltr">highest</code> by default and blocks layout. </li> <li> Late CSS (like CSS in the middle of the <code translate="no" dir="ltr"><body></code>), doesn't block the initial layout. It's not all loaded while the browser is in this layout-blocking phase, and instead is only loaded one at a time with other resources until the browser leaves the layout-blocking phase, so the browser can focus on more important resources. </li> <li> Non-matching CSS (like <code translate="no" dir="ltr">media="print"</code> stylesheets when the page is loading on a screen, not being printed) are loaded with the <code translate="no" dir="ltr">lowest</code> priority. </li> </ul> There are more explanations in the table footnotes. </aside> <div class="table-wrapper"> <table> <colgroup> <col span="1"> <col span="2" style="background-color:#45ccf5"> </colgroup> <thead> <tr> <th> </th> <th colspan="2">Load in layout-blocking phase</th> <th colspan="3">Load one-at-a-time in layout-blocking phase</th> </tr> </thead> <tbody> <tr> <td><strong>Blink<br>Priority</strong></td> <td><strong>VeryHigh</strong></td> <td><strong>High</strong></td> <td><strong>Medium</strong></td> <td><strong>Low</strong></td> <td><strong>VeryLow</strong></td> </tr> <tr> <td><strong>DevTools<br>Priority</strong></td> <td><strong>Highest</strong></td> <td><strong>High</strong></td> <td><strong>Medium</strong></td> <td><strong>Low</strong></td> <td><strong>Lowest</strong></td> </tr> <tr> <td></td> <td>Main resource</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td>CSS (early**)</td> <td></td> <td>CSS (late**)</td> <td></td> <td>CSS (media mismatch***)</td> </tr> <tr> <td></td> <td></td> <td>Script (early** or not from preload scanner)</td> <td>Script (late**)</td> <td>Script (async)</td> <td></td> </tr> <tr> <td></td> <td>Font</td> <td>Font (rel=preload)</td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>Import</td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>Image (in viewport)</td> <td>Image (first 5 images > 10,000px2)</td> <td>Image</td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td>Media (video/audio)</td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>Prefetch</td> </tr> <tr> <td></td> <td></td> <td>XSL</td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td>XHR (sync)</td> <td>XHR/fetch* (async)</td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <aside class="note"><strong>Notes:</strong><br> <strong>*</strong> Preloads using <code translate="no" dir="ltr">"as"</code> or <a href="https://developer.mozilla.org/docs/Web/API/Fetch_API">fetch</a> with a specific <code translate="no" dir="ltr">"destination"</code> use the priority of the destination they're requesting. For example, preload <code translate="no" dir="ltr">as="style"</code> uses Highest priority. With no explicit destination, fetch is prioritized like an async XHR.<br> <strong>**</strong> "Early" is defined as being requested before any non-preloaded images have been requested, and "late" is after non-preloaded images have been requested.<br> <strong>***</strong> CSS where the media type doesn't match isn't fetched by the preload scanner and is only processed when the main parser reaches it, which usually means it's fetched very late.<br> <br> Images start at "Low" priority by default. At layout time, images within the viewport are boosted to "High". As of Chrome 117, the first 5 large images are set to "Medium" to speed this up, and two of them can be fetched in parallel during the initial "tight mode". By tagging important images in markup using <code translate="no" dir="ltr">fetchpriority="high"</code>, they can start at "High" immediately and load much faster. </aside> <p>The browser downloads resources with the same computed priority in the order they're discovered. You can check the priority assigned to different resources when loading a page under the Chrome Dev Tools <strong>Network</strong> tab. (Make sure you include the <strong>priority</strong> column by right-clicking the table headings and ticking that).</p> <figure> <img src="/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd.png" alt="Network tab of Chrome's DevTools listing a number of font resources. They are all Highest priority." width="800" height="263" srcset="https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_36.png 36w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_48.png 48w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_72.png 72w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_96.png 96w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_480.png 480w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_720.png 720w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_856.png 856w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_960.png 960w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_1440.png 1440w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_1920.png 1920w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Priority for resource <code translate="no" dir="ltr">type = "font"</code> on BBC news detail page</figcaption> </figure> <figure> <img src="/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4.png" alt="Network tab of Chrome's DevTools listing a number of font resources. They are a mix of Low and High priority." width="800" height="175" srcset="https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_36.png 36w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_48.png 48w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_72.png 72w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_96.png 96w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_480.png 480w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_720.png 720w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_856.png 856w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_960.png 960w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_1440.png 1440w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_1920.png 1920w,https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Priority for resource <code translate="no" dir="ltr">type = "script"</code> on BBC news detail page.</figcaption> </figure> <p>When priorities change, you can see both the initial and final priority in the <strong>Big request rows</strong> setting or in a tooltip.</p> <figure> <img src="/static/articles/fetch-priority/image/initial-final-priority.png" alt="Network tab of Chrome's DevTools. The 'Big request rows' setting is ticked and the Priority column shows the first image with a prioruty of High, and a different initial priority of medium below. The same is shown in the tooltip." width="735" height="307" srcset="https://web.dev/static/articles/fetch-priority/image/initial-final-priority_36.png 36w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_48.png 48w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_72.png 72w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_96.png 96w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_480.png 480w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_720.png 720w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_856.png 856w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_960.png 960w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_1440.png 1440w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_1920.png 1920w,https://web.dev/static/articles/fetch-priority/image/initial-final-priority_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption">Priority changes in DevTools.</figcaption> </figure> <h2 id="examples" data-text="When might you need Fetch Priority?" tabindex="-1">When might you need Fetch Priority?</h2> <p>Now that you understand the browser's prioritization logic, you can tweak your page's download order to optimize its performance and <a href="/articles/vitals">Core Web Vitals</a>. Here are some examples of things you can change to influence the priority of resource downloads:</p> <ul> <li>Place resource tags like <code translate="no" dir="ltr"><script></code> and <code translate="no" dir="ltr"><link></code> in the order you want the browser to download them. Resources with the same priority are generally loaded in the order they are discovered.</li> <li><a href="/articles/preload-critical-assets">Use the <code translate="no" dir="ltr">preload</code> resource hint</a> to download necessary resources earlier, particularly for resources that are not easily discovered early by the browser.</li> <li>Use <a href="/articles/efficiently-load-third-party-javascript#use_async_or_defer"><code translate="no" dir="ltr">async</code> or <code translate="no" dir="ltr">defer</code></a> to download scripts without blocking other resources.</li> <li>Lazy-load below-the-fold content so the browser can use the available bandwidth for more critical above-the-fold resources.</li> </ul> <p>These techniques help to control the browser's priority computation, thereby improving performance and <a href="/articles/vitals">Core Web Vitals</a>. For example, when a critical background image is preloaded, it can be discovered much earlier, improving the Largest Contentful Paint (<a href="/articles/lcp">LCP</a>).</p> <p>Sometimes these handles may not be enough to prioritize resources optimally for your application. Here are some of the scenarios where Fetch Priority could be helpful:</p> <ul> <li>You have several above-the-fold images, but not all of them should have the same priority. For example, in an image carousel, only the first visible image needs a higher priority, and the others, typically offscreen initially can be set to have lower priority.</li> <li>Images inside the viewport typically start at a <code translate="no" dir="ltr">Low</code> priority. After the layout is complete, Chrome discovers that they're in the viewport and boosts their priority. This usually adds a significant delay to loading the critical images, like hero images. Providing the Fetch Priority in markup lets the image start at a <code translate="no" dir="ltr">High</code> priority and start loading much earlier. In an attempt to automate this somewhat, the first five larger images are set to <code translate="no" dir="ltr">Medium</code> priority by Chrome which will help, but an explicit <code translate="no" dir="ltr">fetchpriority="high"</code> will be even better. <br><br> Preload is still required for early discovery of LCP images included as CSS backgrounds. To boost your background images' priority, include <code translate="no" dir="ltr">fetchpriority='high'</code> on the preload.</li> <li>Declaring scripts as <code translate="no" dir="ltr">async</code> or <code translate="no" dir="ltr">defer</code> tells the browser to load them asynchronously. However, as shown in the <a href="#resource-priority">priority table</a>, these scripts are also assigned a "Low" priority. You might want to increase their priority while ensuring asynchronous download, especially for scripts that are critical for the user experience.</li> <li>If you use the JavaScript <a href="/articles/introduction-to-fetch"><code translate="no" dir="ltr">fetch()</code></a> API to fetch resources or data asynchronously, the browser assigns it <code translate="no" dir="ltr">High</code> priority. You might want some of your fetches to run with lower priority, especially if you're mixing background API calls with API calls that respond to user input. Mark the background API calls as <code translate="no" dir="ltr">Low</code> priority and the interactive API calls as <code translate="no" dir="ltr">High</code> priority.</li> <li>The browser assigns CSS and fonts a <code translate="no" dir="ltr">High</code> priority, but some of those resources might be more important than others. You can use Fetch Priority to lower the priority of non-critical resources (note early CSS is render blocking so should usually be a <code translate="no" dir="ltr">High</code> priority).</li> </ul> <h2 id="fetchpriority-attribute" data-text="The fetchpriority attribute" tabindex="-1">The <code translate="no" dir="ltr">fetchpriority</code> attribute</h2> <p>Use the <code translate="no" dir="ltr">fetchpriority</code> HTML attribute to specify download priority for resource types such as CSS, fonts, scripts, and images when downloaded using <code translate="no" dir="ltr">link</code>, <code translate="no" dir="ltr">img</code>, or <code translate="no" dir="ltr">script</code> tags. It can take the following values:</p> <ul> <li><code translate="no" dir="ltr">high</code>: The resource is a higher priority, and you want the browser to prioritize it higher than usual, as long as the browser's own heuristics don't prevent that from happening.</li> <li><code translate="no" dir="ltr">low</code>: The resource is a lower priority, and you want the browser to deprioritize it, again if its heuristics let it.</li> <li><code translate="no" dir="ltr">auto</code>: The default value, which lets the browser choose the appropriate priority.</li> </ul> <p>Here are a few examples of using the <code translate="no" dir="ltr">fetchpriority</code> attribute in markup, as well as the script-equivalent <code translate="no" dir="ltr">priority</code> property.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"> <img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">  <link rel="preload" href="/js/script.js" as="script" fetchpriority="low"> <script> fetch('https://example.com/', {priority: 'low'}) .then(data => { // Trigger a low priority fetch }); </script> </code></pre></devsite-code> <h3 id="effects" data-text="Effects of browser priority and fetchpriority" tabindex="-1">Effects of browser priority and <code translate="no" dir="ltr">fetchpriority</code></h3> <p>You can apply the <code translate="no" dir="ltr">fetchpriority</code> attribute to different resources as shown in the following table to increase or reduce their computed priority. <code translate="no" dir="ltr">fetchpriority="auto"</code> (◉) in each row marks the default priority for that type of resource. (also available <a href="https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit">as a Google Doc</a>).</p> <aside class="note"> <strong>Example of how to read this table:</strong> <ul> <li> Early CSS (like CSS in the <code translate="no" dir="ltr"><head></code>) is <code translate="no" dir="ltr">highest</code> by default (◉). Even if you use <code translate="no" dir="ltr">fetchpriority=high</code> (⬆), it won't increase any further because it's as it's as high as it can go. If you lower it with <code translate="no" dir="ltr">fetchpriority=low</code> (⬇) it only lowers to <code translate="no" dir="ltr">high</code>, and not any lower. In both cases, it can load during the layout-blocking phase. </li> </ul> There are more explanations in the table footnotes. </aside> <div class="table-wrapper"> <table> <colgroup> <col span="1"> <col span="2" style="background-color:#45ccf5"> </colgroup> <thead> <tr> <th> </th> <th colspan="2">Load in layout-blocking phase</th> <th colspan="3">Load one at a time in layout-blocking phase</th> </tr> </thead> <tbody> <tr> <td><strong>Blink<br>Priority</strong></td> <td><strong>VeryHigh</strong></td> <td><strong>High</strong></td> <td><strong>Medium</strong></td> <td><strong>Low</strong></td> <td><strong>VeryLow</strong></td> </tr> <tr> <td><strong>DevTools<br>Priority</strong></td> <td><strong>Highest</strong></td> <td><strong>High</strong></td> <td><strong>Medium</strong></td> <td><strong>Low</strong></td> <td><strong>Lowest</strong></td> </tr> <tr> <td>Main Resource</td> <td>◉</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>CSS (early**)</td> <td>⬆◉</td> <td>⬇</td> <td></td> <td></td> <td></td> </tr> <tr> <td>CSS (late**)</td> <td></td> <td>⬆</td> <td>◉</td> <td>⬇</td> <td></td> </tr> <tr> <td>CSS (media mismatch***)</td> <td></td> <td>⬆***</td> <td></td> <td></td> <td>◉⬇</td> </tr> <tr> <td>Script (early** or not from preload scanner)</td> <td></td> <td>⬆◉</td> <td></td> <td>⬇</td> <td></td> </tr> <tr> <td>Script (late**)</td> <td></td> <td>⬆</td> <td>◉</td> <td>⬇</td> <td></td> </tr> <tr> <td>Script (async/defer)</td> <td></td> <td>⬆</td> <td></td> <td>◉⬇</td> <td></td> </tr> <tr> <td>Font</td> <td>◉</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Font (rel=preload)</td> <td></td> <td>⬆◉</td> <td></td> <td>⬇</td> <td></td> </tr> <tr> <td>Import</td> <td></td> <td>◉</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Image (in viewport - after layout)</td> <td></td> <td>⬆◉</td> <td></td> <td>⬇</td> <td></td> </tr> <tr> <td>Image (first 5 images > 10,000px2)</td> <td></td> <td>⬆</td> <td>◉</td> <td>⬇</td> <td></td> </tr> <tr> <td>Image</td> <td></td> <td>⬆</td> <td></td> <td>◉⬇</td> <td></td> </tr> <tr> <td>Media (video/audio)</td> <td></td> <td></td> <td></td> <td>◉</td> <td></td> </tr> <tr> <td>XHR (sync) - deprecated</td> <td>◉</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>XHR/fetch* (async)</td> <td></td> <td>⬆◉</td> <td></td> <td>⬇</td> <td></td> </tr> <tr> <td>Prefetch</td> <td></td> <td></td> <td></td> <td></td> <td>◉</td> </tr> <tr> <td>XSL</td> <td></td> <td>◉</td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <aside class="note"><strong>Notes:</strong><br> <strong>*</strong> Preload using <code translate="no" dir="ltr">"as"</code> or <a href="https://developer.mozilla.org/docs/Web/API/Fetch_API">fetch</a> using a specific <code translate="no" dir="ltr">"destination"</code> use the priority of the destination they are requesting. For example, preload <code translate="no" dir="ltr">as="style"</code> will use Highest priority. With no explicit destintation, fetch will be prioritized like an async XHR.<br> <strong>**</strong> "Early" is defined as being requested before any non-preloaded images have been requested ("late" is after).<br> <strong>***</strong> CSS where the media type doesn't match is not fetched by the preload scanner and is only processed when the main parser reaches it, which usually means it will be fetched very late, even with <code translate="no" dir="ltr">fetchpriority="high"</code>.<br> <br> Images by default start at "Low" priority and then at layout time are boosted to "High" if within the viewport. As of Chrome 117, the first 5 large images are set to "Medium" to speed this up and two of these can be fetched in parallel during the initial "tight mode". By tagging important images in markup using <code translate="no" dir="ltr">fetchpriority="high"</code>, they can start at "High" immediately and load much faster. </aside> <p><code translate="no" dir="ltr">fetchpriority</code> sets <em>relative priority</em>, meaning it raises or lowers the default priority by an appropriate amount, rather instead of explicitly setting the priority to <code translate="no" dir="ltr">High</code> or <code translate="no" dir="ltr">Low</code>. This often results in <code translate="no" dir="ltr">High</code> or <code translate="no" dir="ltr">Low</code> priority, but not always. For example, critical CSS with <code translate="no" dir="ltr">fetchpriority="high"</code> retains the "Very High"/"Highest" priority, and using <code translate="no" dir="ltr">fetchpriority="low"</code> on these elements retains the "High" priority. Neither of these cases involve explicitly setting priority to <code translate="no" dir="ltr">High</code> or <code translate="no" dir="ltr">Low</code>.</p> <h3 id="use-cases" data-text="Use cases" tabindex="-1">Use cases</h3> <p>Use the <code translate="no" dir="ltr">fetchpriority</code> attribute when you want to give the browser an extra hint about what priority to fetch a resource with.</p> <h4 id="increase-lcp-priority" data-text="Increase the priority of the LCP image" tabindex="-1">Increase the priority of the LCP image</h4> <p>You can specify <code translate="no" dir="ltr">fetchpriority="high"</code> to boost the priority of the LCP or other critical images.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><img src="lcp-image.jpg" fetchpriority="high"> </code></pre></devsite-code> <p>The following comparison shows the Google Flights page with an LCP background image loaded with and without Fetch Priority. With the priority set to high, the <a href="https://www.webpagetest.org/video/compare.php?tests=211006_AiDcG3_40871b05d6040112a05be4524565cf5d%2C211006_BiDcHR_bebed947f1b6607f2d97e8a899fdc36b&thumbSize=200&ival=100&end=visual">LCP improved from 2.6s to 1.9s</a>.</p> <figure> <video autoplay controls loop muted playsinline > <source src="/static/articles/fetch-priority/video/1L2RBhCLSnXjCnSlevaDjy3vba73/BCngJfoVOy0YbUz8wFrM.mp4" type="video/mp4" /> </video> <figcaption class="wd-caption">An experiment conducted using Cloudflare workers to rewrite the Google Flights page using Fetch Priority.</figcaption> </figure> <h4 id="lower-carousel-priority" data-text="Lower the priority of above-the-fold images" tabindex="-1">Lower the priority of above-the-fold images</h4> <p>Use <code translate="no" dir="ltr">fetchpriority="low"</code> to lower the priority of above-the-fold images that aren't immediately important, for example offscreen images in an image carousel.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><ul class="carousel"> <img src="img/carousel-1.jpg" fetchpriority="high"> <img src="img/carousel-2.jpg" fetchpriority="low"> <img src="img/carousel-3.jpg" fetchpriority="low"> <img src="img/carousel-4.jpg" fetchpriority="low"> </ul> </code></pre></devsite-code> <p>While images 2-4 will be outside of the viewport, they may be considered "close enough" to boost them to <code translate="no" dir="ltr">high</code> and also load even if a <code translate="no" dir="ltr">load=lazy</code> attribute is added. Therefore <code translate="no" dir="ltr">fetchpriority="low"</code> is the correct solution for this.</p> <p>In an earlier experiment with the <a href="https://github.com/google/oodle-demo">Oodle</a> app, we used this to lower the priority of images that don't appear on load. It decreased page load time by 2 seconds.</p> <figure> <img src="/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2.png" alt="A side-by-side comparison of Fetch Priority when used on the Oodle app's image carousel. On the left, the browser sets default priorities for carousel images, but downloads and paints those images around two seconds slower than the example on the right, which sets a higher priority on only the first carousel image." width="800" height="460" srcset="https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_36.png 36w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_48.png 48w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_72.png 72w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_96.png 96w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_480.png 480w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_720.png 720w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_856.png 856w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_960.png 960w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_1440.png 1440w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_1920.png 1920w,https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="wd-caption"> Using high priority for only the first carousel image lets the page load faster. </figcaption> </figure> <h4 id="lower-preload-priority" data-text="Lower the priority of preloaded resources" tabindex="-1">Lower the priority of preloaded resources</h4> <p>To stop preloaded resources from competing with other critical resources, you can reduce their priority. Use this technique with images, scripts, and CSS.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"> <link rel="preload" as="script" href="critical-script.js"> <link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">  <link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'"> </code></pre></devsite-code> <h4 id="reprioritize-scripts" data-text="Reprioritize scripts" tabindex="-1">Reprioritize scripts</h4> <p>Scripts your page needs to be interactive should be load quickly, but shouldn't block other, more critical, render-blocking resources. You can mark these as <code translate="no" dir="ltr">async</code> with high priority.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><script src="async_but_important.js" async fetchpriority="high"></script> </code></pre></devsite-code> <p>You can't mark a script as <code translate="no" dir="ltr">async</code> if it relies on specific DOM states. However, if they run later on the page, you can load them with lower priority:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="HTML"><code translate="no" dir="ltr"><script src="blocking_but_unimportant.js" fetchpriority="low"></script> </code></pre></devsite-code> <p>This will still block the parser when it reaches this script, but will allow content before this to be prioritised.</p> <p>An alternative, if the completed DOM is needed, is to use the <code translate="no" dir="ltr">defer</code> attribute (which runs, in order, after <a href="https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a>), or even <code translate="no" dir="ltr">async</code> at the bottom of the page.</p> <h4 id="non-critical-fetch" data-text="Lower the priority for non-critical data fetches" tabindex="-1">Lower the priority for non-critical data fetches</h4> <p>The browser executes <code translate="no" dir="ltr">fetch</code> with a high priority. If you have multiple fetches that might fire simultaneously, you can use the high default priority for the more important data fetches and lower the priority of less critical data.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-c1">// Important validation data (high by default)</span> <span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">authenticate</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">fetch</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'/user'</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-c1">// Less important content data (suggested low)</span> <span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">suggestedContent</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">fetch</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s1">'/content/suggested'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-nx">priority</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'low'</span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <h2 id="implementation-notes" data-text="Fetch Priority implementation notes" tabindex="-1">Fetch Priority implementation notes</h2> <p>Fetch Priority can improve performance in specific use cases but there are some things to be aware of when using Fetch Priority:</p> <ul> <li>The <code translate="no" dir="ltr">fetchpriority</code> attribute is a hint, not a directive. The browser tries to respect the developer's preference, but it can also apply its resource priority preferences for resource priority to resolve conflicts.</li> <li><p>Don't confuse Fetch Priority with preloading:</p> <ul> <li>Preload is a mandatory fetch, not a hint.</li> <li>Preload lets the browser discover a resource early, but it still fetches the resource with the default priority. Conversely, Fetch Priority doesn't help with discoverability, but it does let you increase or decrease the fetch priority.</li> <li>It's often easier to observe and measure the effects of a preload than the effects of a priority change.</li> </ul> <p>Fetch Priority can complement preloads by increasing the granularity of prioritization. If you've already specified a preload as one of the first items in the <code translate="no" dir="ltr"><head></code> for an LCP image, then a <code translate="no" dir="ltr">high</code> Fetch Priority might not improve LCP significantly. However, if the preload happens after other resources load, a <code translate="no" dir="ltr">high</code> Fetch Priority can improve LCP more. If a critical image is a CSS background image, preload it with <code translate="no" dir="ltr">fetchpriority = "high"</code>.</p></li> <li><p>Load time improvements from prioritization are more relevant in environments where more resources compete for the available network bandwidth. This is common for HTTP/1.x connections where parallel downloads aren't possible, or on low bandwidth HTTP/2 or HTTP/3 connections. In these cases, prioritization can help resolve bottlenecks.</p></li> <li><p>CDNs don't <a href="https://github.com/andydavies/http2-prioritization-issues#cdns--cloud-hosting-services">implement HTTP/2 prioritization</a> uniformly, and similarly for HTTP/3. Even if the browser communicates the priority from Fetch Priority, the CDN might not reprioritize resources in the specified order. This makes testing Fetch Priority difficult. The priorities are applied both internally within the browser and with protocols that support prioritization (HTTP/2 and HTTP/3). It's still worth using Fetch Priority just for the internal browser prioritization independent of CDN or origin support, because priorities often change when the browser requests resources. For example, low-priority resources like images are often held back from being requested while the browser processes critical <code translate="no" dir="ltr"><head></code> items.</p></li> <li><p>You might not be able to introduce Fetch Priority as a best practice in your initial design. Later in your development cycle, you can the priorities being assigned to different resources on the page, and if they don't match your expectations, you can introduce Fetch Priority for further optimization.</p></li> </ul> <p>Developers should use preload for its <a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#loading-of-late-discovered-resources">intended purpose</a>—to preload resources not detected by the parser (fonts, imports, background LCP images). The placement of the <code translate="no" dir="ltr">preload</code> hint will affect when the resource is preloaded.</p> <p>Fetch priority is about how the resource should be fetched when it is fetched.</p> <h3 id="preload-tips" data-text="Tips for using preloads" tabindex="-1">Tips for using preloads</h3> <p>Keep the following in mind when using preloads:</p> <ul> <li>Including a preload in HTTP headers puts it before everything else in the load order.</li> <li>Generally, preloads load in the order the parser gets to them for anything with <code translate="no" dir="ltr">Medium</code> priority or higher. Be careful if you're including preloads at the beginning of your HTML.</li> <li>Font preloads probably work best toward the end of the head or beginning of the body.</li> <li>Import preloads (dynamic <code translate="no" dir="ltr">import()</code> or <code translate="no" dir="ltr">modulepreload</code>) should run after the script tag that needs the import, so make sure the script gets loaded or parsed first so it can be evaluated while its dependencies are loading.</li> <li>Image preloads have a <code translate="no" dir="ltr">Low</code> or <code translate="no" dir="ltr">Medium</code> priority by default. Order them relative to async scripts and other low or lowest priority tags.</li> </ul> <h2 id="history" data-text="History" tabindex="-1">History</h2> <p>Fetch Priority was first experimented with in Chrome as an origin trial in 2018, and then again in 2021 using the <code translate="no" dir="ltr">importance</code> attribute. At that time it was called <a href="https://github.com/WICG/priority-hints">Priority Hints</a>. The interface has since changed to <code translate="no" dir="ltr">fetchpriority</code> for HTML and <code translate="no" dir="ltr">priority</code> for JavaScript's Fetch API as part of the web standards process. To reduce confusion, we now call this API Fetch Priority.</p> <h2 id="conclusion" data-text="Conclusion" tabindex="-1">Conclusion</h2> <p>Developers are likely to be interested in Fetch Priority with the fixes in preload behavior and the recent focus on Core Web Vitals and LCP. They now have additional knobs available to achieve their preferred loading sequence.</p> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2023-11-14 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-11-14 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Articles", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="sTQF9n8No25yco2Ggov2GrEYDK+aDR"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_complete_playlist_endpoint","Experiments__reqs_query_experiments","Profiles__enable_dashboard_curated_recommendations","Concierge__enable_pushui","Profiles__enable_developer_profiles_callout","Cloud__enable_cloudx_experiment_ids","DevPro__enable_cloud_innovators_plus","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_variable_operator","Profiles__enable_release_notes_notifications","Profiles__enable_awarding_url","Cloud__enable_cloud_facet_chat","Search__enable_ai_eligibility_checks","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_firebase_utm","Search__enable_page_map","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_completecodelab_endpoint","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_page_saving","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__emergency_css","BookNav__enable_tenant_cache_key","Search__enable_suggestions_from_borg","OnSwitch__enable","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_legacy_calculator_redirect","CloudShell__cloud_code_overflow_menu","Search__enable_dynamic_content_confidential_banner","Cloud__enable_free_trial_server_call","MiscFeatureFlags__developers_footer_dark_image","DevPro__enable_developer_subscriptions","TpcFeatures__enable_required_headers","Cloud__enable_cloud_shell","Profiles__require_profile_eligibility_for_signin","CloudShell__cloud_shell_button","MiscFeatureFlags__enable_project_variables","Profiles__enable_profile_collections","Analytics__enable_clearcut_logging","Cloud__enable_cloudx_ping"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Optimize resource loading with the Fetch Priority API | Articles | web.dev