[{"data":1,"prerenderedAt":1140},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests":1131},{"id":4,"title":5,"body":6,"description":1111,"extension":1112,"meta":1113,"navigation":1125,"path":1126,"seo":1127,"stem":1129,"__hash__":1130},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002Findex.md","fetchpriority for Scripts and fetch() Requests",{"type":7,"value":8,"toc":1093},"minimark",[9,14,40,68,226,231,263,267,273,279,285,291,402,406,411,504,508,646,649,653,707,711,719,852,856,859,863,873,877,887,891,894,898,924,928,936,946,952,958,962,977,986,999,1008,1017,1026,1043,1052,1056,1079,1083,1086,1089],[10,11,13],"h1",{"id":12},"how-to-use-fetchpriority-for-scripts-and-fetch-requests","How to Use fetchpriority for Scripts and fetch() Requests",[15,16,17,18,23,24,28,29,33,34,36,37,39],"p",{},"This guide extends priority hints beyond the familiar LCP image, within ",[19,20,22],"a",{"href":21},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002F","Resource Hints & Early Hints"," and ",[19,25,27],{"href":26},"\u002Fadvanced-caching-strategies-cdn-architecture\u002F","Advanced Caching Strategies & CDN Architecture",". Browsers assign every request a priority based on its type and position: render-blocking CSS and fonts high, scripts in the head high, async scripts low, images low until they are known to be in the viewport, ",[30,31,32],"code",{},"fetch()"," high by default. Those defaults are good guesses, but the browser cannot know that one async script drives your first render while another is analytics, or that a ",[30,35,32],{}," for the main content matters more than three ",[30,38,32],{},"s for recommendations.",[15,41,42,43,46,47,50,51,50,54,50,57,60,61,64,65,67],{},"The ",[30,44,45],{},"fetchpriority"," attribute (on ",[30,48,49],{},"\u003Cscript>",", ",[30,52,53],{},"\u003Clink>",[30,55,56],{},"\u003Cimg>",[30,58,59],{},"\u003Ciframe>",") and the ",[30,62,63],{},"priority"," option in ",[30,66,32],{}," let you say so. Raising the priority of critical requests and lowering non-critical ones changes the order in which they compete for bandwidth and connection slots — most valuable on congested mobile connections where everything cannot download at once.",[15,69,70],{},[71,72,78,79,78,86,78,90,78,93,78,102,78,108,78,114,78,121,78,125,78,130,78,133,78,137,78,141,78,145,78,149,78,153,78,155,78,158,78,161,78,165,78,167,78,170,78,172,78,175,78,178,78,182,78,184,78,186,78,191,78,194,78,197,78,201,78,203,78,205,78,207,78,210,78,213,78,217,78,219,78,221,78,223,78],"svg",{"viewBox":73,"width":74,"role":75,"ariaLabel":76,"style":77},"0 0 760 258","100%","img","Default priorities for common request types in Chromium and when to override them with fetchpriority.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[80,81],"rect",{"className":82,"x":84,"y":84,"width":74,"height":74,"fill":85},[83],"svg-canvas","0","#ffffff",[87,88,89],"title",{},"Default browser priorities and useful overrides",[91,92,76],"desc",{},[80,94],{"x":95,"y":95,"width":96,"height":97,"rx":98,"fill":99,"stroke":100,"style":101},"1","758","256","10","none","currentColor","stroke-opacity:0.18",[103,104,89],"text",{"x":105,"y":106,"fill":100,"style":107},"28.0","34.0","font-size:16px;font-weight:700",[80,109],{"x":105,"y":110,"width":111,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},"56.0","173.5","30.0","fill-opacity:0.06;stroke-opacity:0.4",[103,115,120],{"x":116,"y":117,"fill":100,"style":118,"textAnchor":119},"38.0","75.5","font-size:12.5px;font-weight:700","start","Request",[80,122],{"x":123,"y":110,"width":124,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},"201.5","265.3",[103,126,129],{"x":127,"y":117,"fill":100,"style":118,"textAnchor":128},"334.1","middle","Default",[80,131],{"x":132,"y":110,"width":124,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},"466.7",[103,134,136],{"x":135,"y":117,"fill":100,"style":118,"textAnchor":128},"599.4","Useful override",[80,138],{"x":105,"y":139,"width":111,"height":112,"rx":84,"fill":99,"stroke":100,"style":140},"86.0","stroke-opacity:0.35",[103,142,144],{"x":116,"y":143,"fill":100,"style":118,"textAnchor":119},"105.5","Script in head (blocking)",[80,146],{"x":123,"y":139,"width":124,"height":112,"rx":84,"fill":147,"stroke":147,"style":148},"#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[103,150,152],{"x":127,"y":143,"fill":100,"style":151,"textAnchor":128},"font-size:12px","High",[80,154],{"x":132,"y":139,"width":124,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},[103,156,157],{"x":135,"y":143,"fill":100,"style":151,"textAnchor":128},"rarely needed",[80,159],{"x":105,"y":160,"width":111,"height":112,"rx":84,"fill":99,"stroke":100,"style":140},"116.0",[103,162,164],{"x":116,"y":163,"fill":100,"style":118,"textAnchor":119},"135.5","async \u002F defer script",[80,166],{"x":123,"y":160,"width":124,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},[103,168,169],{"x":127,"y":163,"fill":100,"style":151,"textAnchor":128},"Low",[80,171],{"x":132,"y":160,"width":124,"height":112,"rx":84,"fill":147,"stroke":147,"style":148},[103,173,174],{"x":135,"y":163,"fill":100,"style":151,"textAnchor":128},"high for first-render scripts",[80,176],{"x":105,"y":177,"width":111,"height":112,"rx":84,"fill":99,"stroke":100,"style":140},"146.0",[103,179,181],{"x":116,"y":180,"fill":100,"style":118,"textAnchor":119},"165.5","fetch() call",[80,183],{"x":123,"y":177,"width":124,"height":112,"rx":84,"fill":147,"stroke":147,"style":148},[103,185,152],{"x":127,"y":180,"fill":100,"style":151,"textAnchor":128},[80,187],{"x":132,"y":177,"width":124,"height":112,"rx":84,"fill":188,"stroke":189,"style":190},"#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[103,192,193],{"x":135,"y":180,"fill":100,"style":151,"textAnchor":128},"low for non-critical data",[80,195],{"x":105,"y":196,"width":111,"height":112,"rx":84,"fill":99,"stroke":100,"style":140},"176.0",[103,198,200],{"x":116,"y":199,"fill":100,"style":118,"textAnchor":119},"195.5","preload as=script",[80,202],{"x":123,"y":196,"width":124,"height":112,"rx":84,"fill":147,"stroke":147,"style":148},[103,204,152],{"x":127,"y":199,"fill":100,"style":151,"textAnchor":128},[80,206],{"x":132,"y":196,"width":124,"height":112,"rx":84,"fill":188,"stroke":189,"style":190},[103,208,209],{"x":135,"y":199,"fill":100,"style":151,"textAnchor":128},"low for late-needed modules",[80,211],{"x":105,"y":212,"width":111,"height":112,"rx":84,"fill":99,"stroke":100,"style":140},"206.0",[103,214,216],{"x":116,"y":215,"fill":100,"style":118,"textAnchor":119},"225.5","Image (not yet in viewport)",[80,218],{"x":123,"y":212,"width":124,"height":112,"rx":84,"fill":100,"stroke":100,"style":113},[103,220,169],{"x":127,"y":215,"fill":100,"style":151,"textAnchor":128},[80,222],{"x":132,"y":212,"width":124,"height":112,"rx":84,"fill":147,"stroke":147,"style":148},[103,224,225],{"x":135,"y":215,"fill":100,"style":151,"textAnchor":128},"high for LCP image",[227,228,230],"h2",{"id":229},"rapid-diagnosis","Rapid Diagnosis",[232,233,234,242,248,257],"ul",{},[235,236,237,241],"li",{},[238,239,240],"strong",{},"Show the Priority column"," in the Network panel (right-click the header). Note priorities of requests that finish before LCP.",[235,243,244,247],{},[238,245,246],{},"Find critical async scripts."," An async script that renders above-the-fold content but loads at Low priority behind images is a candidate.",[235,249,250,253,254,256],{},[238,251,252],{},"Find non-critical high-priority fetches."," Analytics, recommendations and prefetch ",[30,255,32],{}," calls default to High and compete with critical data.",[235,258,259,262],{},[238,260,261],{},"Look at contention."," On a throttled profile, if the critical request starts early but finishes late, it is competing with others.",[227,264,266],{"id":265},"root-cause-analysis","Root Cause Analysis",[15,268,269,272],{},[238,270,271],{},"1. Async scripts default to Low."," A script that renders the hero via client-side rendering competes poorly with images.",[15,274,275,278],{},[238,276,277],{},"2. fetch() defaults to High."," Every data request — critical or not — competes equally.",[15,280,281,284],{},[238,282,283],{},"3. Preloads at High for everything."," Preloading late-needed resources pulls bandwidth from critical ones.",[15,286,287,290],{},[238,288,289],{},"4. Late-discovered critical requests."," Priority cannot fix discovery; a request that starts late still finishes late.",[15,292,293],{},[71,294,78,297,78,300,78,303,78,305,78,308,78,310,78,314,78,320,78,326,78,330,78,334,78,339,78,343,78,348,78,353,78,360,78,366,78,370,78,374,78,378,78,382,78,386,78,390,78,394,78,398,78],{"viewBox":295,"width":74,"role":75,"ariaLabel":296,"style":77},"0 0 760 216","Timelines comparing a critical data fetch sharing bandwidth with secondary fetches at equal priority versus with secondary fetches lowered.",[80,298],{"className":299,"x":84,"y":84,"width":74,"height":74,"fill":85},[83],[87,301,302],{},"Main content fetch competing with secondary fetches",[91,304,296],{},[80,306],{"x":95,"y":95,"width":96,"height":307,"rx":98,"fill":99,"stroke":100,"style":101},"214",[103,309,302],{"x":105,"y":106,"fill":100,"style":107},[103,311,313],{"x":105,"y":312,"fill":100,"style":118},"74.0","Equal priority",[80,315],{"x":316,"y":110,"width":317,"height":318,"rx":319,"fill":188,"stroke":189,"style":190},"136.8","536.0","26.0","3",[103,321,325],{"x":322,"y":323,"fill":100,"style":324,"textAnchor":128},"404.8","73.5","font-size:11.5px","main content (shared bandwidth)",[103,327,329],{"x":105,"y":328,"fill":100,"style":118},"112.0","Prioritised",[80,331],{"x":316,"y":332,"width":333,"height":318,"rx":319,"fill":147,"stroke":147,"style":148},"94.0","280.4",[103,335,338],{"x":336,"y":337,"fill":100,"style":324,"textAnchor":128},"276.9","111.5","main content",[103,340,342],{"x":105,"y":341,"fill":100,"style":118},"150.0","Secondary (low)",[80,344],{"x":345,"y":346,"width":347,"height":318,"rx":319,"fill":100,"stroke":100,"style":113},"333.4","132.0","378.7",[103,349,352],{"x":350,"y":351,"fill":100,"style":324,"textAnchor":128},"522.8","149.5","recs + analytics",[354,355],"line",{"x1":356,"y1":357,"x2":358,"y2":357,"stroke":100,"style":359},"136.0","172.0","726.0","stroke-opacity:0.4",[103,361,365],{"x":362,"y":363,"fill":364,"style":324,"textAnchor":128},"146.7","189.0","#51617a","0ms",[103,367,369],{"x":368,"y":363,"fill":364,"style":324,"textAnchor":128},"201.6","100ms",[103,371,373],{"x":372,"y":363,"fill":364,"style":324,"textAnchor":128},"267.1","200ms",[103,375,377],{"x":376,"y":363,"fill":364,"style":324,"textAnchor":128},"332.7","300ms",[103,379,381],{"x":380,"y":363,"fill":364,"style":324,"textAnchor":128},"398.2","400ms",[103,383,385],{"x":384,"y":363,"fill":364,"style":324,"textAnchor":128},"463.8","500ms",[103,387,389],{"x":388,"y":363,"fill":364,"style":324,"textAnchor":128},"529.3","600ms",[103,391,393],{"x":392,"y":363,"fill":364,"style":324,"textAnchor":128},"594.9","700ms",[103,395,397],{"x":396,"y":363,"fill":364,"style":324,"textAnchor":128},"660.4","800ms",[103,399,401],{"x":400,"y":363,"fill":364,"style":324,"textAnchor":128},"715.3","900ms",[227,403,405],{"id":404},"step-by-step-resolution","Step-by-Step Resolution",[407,408,410],"h3",{"id":409},"_1-raise-critical-async-scripts","1. Raise critical async scripts",[412,413,418],"pre",{"className":414,"code":415,"language":416,"meta":417,"style":417},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Cscript src=\"\u002Fassets\u002Fhero-render.7a1c.js\" async fetchpriority=\"high\">\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fassets\u002Fanalytics.2b9d.js\" async fetchpriority=\"low\">\u003C\u002Fscript>\n\u003C!-- trade-off: high-priority async scripts can delay images, including the LCP\n     image, if bandwidth is scarce. Raise only scripts the first render depends on. -->\n","html","",[30,419,420,462,491,498],{"__ignoreMap":417},[421,422,424,428,432,436,439,443,446,449,451,454,457,459],"span",{"class":354,"line":423},1,[421,425,427],{"class":426},"saISM","\u003C",[421,429,431],{"class":430},"sZBmE","script",[421,433,435],{"class":434},"sPXB4"," src",[421,437,438],{"class":426},"=",[421,440,442],{"class":441},"sZ8jY","\"\u002Fassets\u002Fhero-render.7a1c.js\"",[421,444,445],{"class":434}," async",[421,447,448],{"class":434}," fetchpriority",[421,450,438],{"class":426},[421,452,453],{"class":441},"\"high\"",[421,455,456],{"class":426},">\u003C\u002F",[421,458,431],{"class":430},[421,460,461],{"class":426},">\n",[421,463,465,467,469,471,473,476,478,480,482,485,487,489],{"class":354,"line":464},2,[421,466,427],{"class":426},[421,468,431],{"class":430},[421,470,435],{"class":434},[421,472,438],{"class":426},[421,474,475],{"class":441},"\"\u002Fassets\u002Fanalytics.2b9d.js\"",[421,477,445],{"class":434},[421,479,448],{"class":434},[421,481,438],{"class":426},[421,483,484],{"class":441},"\"low\"",[421,486,456],{"class":426},[421,488,431],{"class":430},[421,490,461],{"class":426},[421,492,494],{"class":354,"line":493},3,[421,495,497],{"class":496},"sjfSM","\u003C!-- trade-off: high-priority async scripts can delay images, including the LCP\n",[421,499,501],{"class":354,"line":500},4,[421,502,503],{"class":496},"     image, if bandwidth is scarce. Raise only scripts the first render depends on. -->\n",[407,505,507],{"id":506},"_2-lower-non-critical-fetches","2. Lower non-critical fetches",[412,509,513],{"className":510,"code":511,"language":512,"meta":417,"style":417},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Critical: main content (default High, or explicit).\nconst product = fetch(`\u002Fapi\u002Fproducts\u002F${id}`, { priority: 'high' }).then((r) => r.json());\n\u002F\u002F Non-critical: lower so they do not compete.\nfetch(`\u002Fapi\u002Frecommendations\u002F${id}`, { priority: 'low' }).then(renderRecs);\nnavigator.sendBeacon?.('\u002Frum', payload);         \u002F\u002F beacons are already low priority\n\u002F\u002F trade-off: 'low' requests may be delayed noticeably on congested connections.\n\u002F\u002F Do not lower anything the user is actively waiting for.\n","javascript",[30,514,515,520,582,587,613,634,640],{"__ignoreMap":417},[421,516,517],{"class":354,"line":423},[421,518,519],{"class":496},"\u002F\u002F Critical: main content (default High, or explicit).\n",[421,521,522,526,529,532,536,539,542,545,548,551,554,557,560,563,567,570,573,576,579],{"class":354,"line":464},[421,523,525],{"class":524},"sPARh","const",[421,527,528],{"class":434}," product",[421,530,531],{"class":524}," =",[421,533,535],{"class":534},"smZ65"," fetch",[421,537,538],{"class":426},"(",[421,540,541],{"class":441},"`\u002Fapi\u002Fproducts\u002F${",[421,543,544],{"class":426},"id",[421,546,547],{"class":441},"}`",[421,549,550],{"class":426},", { priority: ",[421,552,553],{"class":441},"'high'",[421,555,556],{"class":426}," }).",[421,558,559],{"class":534},"then",[421,561,562],{"class":426},"((",[421,564,566],{"class":565},"sQw3B","r",[421,568,569],{"class":426},") ",[421,571,572],{"class":524},"=>",[421,574,575],{"class":426}," r.",[421,577,578],{"class":534},"json",[421,580,581],{"class":426},"());\n",[421,583,584],{"class":354,"line":493},[421,585,586],{"class":496},"\u002F\u002F Non-critical: lower so they do not compete.\n",[421,588,589,592,594,597,599,601,603,606,608,610],{"class":354,"line":500},[421,590,591],{"class":534},"fetch",[421,593,538],{"class":426},[421,595,596],{"class":441},"`\u002Fapi\u002Frecommendations\u002F${",[421,598,544],{"class":426},[421,600,547],{"class":441},[421,602,550],{"class":426},[421,604,605],{"class":441},"'low'",[421,607,556],{"class":426},[421,609,559],{"class":534},[421,611,612],{"class":426},"(renderRecs);\n",[421,614,616,619,622,625,628,631],{"class":354,"line":615},5,[421,617,618],{"class":426},"navigator.",[421,620,621],{"class":534},"sendBeacon",[421,623,624],{"class":426},"?.(",[421,626,627],{"class":441},"'\u002Frum'",[421,629,630],{"class":426},", payload);         ",[421,632,633],{"class":496},"\u002F\u002F beacons are already low priority\n",[421,635,637],{"class":354,"line":636},6,[421,638,639],{"class":496},"\u002F\u002F trade-off: 'low' requests may be delayed noticeably on congested connections.\n",[421,641,643],{"class":354,"line":642},7,[421,644,645],{"class":496},"\u002F\u002F Do not lower anything the user is actively waiting for.\n",[15,647,648],{},"Expected outcome: the main content request finishes sooner under contention.",[407,650,652],{"id":651},"_3-lower-late-needed-preloads","3. Lower late-needed preloads",[412,654,656],{"className":414,"code":655,"language":416,"meta":417,"style":417},"\u003Clink rel=\"preload\" href=\"\u002Fassets\u002Fbelow-fold-carousel.js\" as=\"script\" fetchpriority=\"low\">\n\u003C!-- trade-off: a low-priority preload still starts early but yields bandwidth;\n     if the resource is needed soon after load, low priority can delay it. -->\n",[30,657,658,697,702],{"__ignoreMap":417},[421,659,660,662,665,668,670,673,676,678,681,684,686,689,691,693,695],{"class":354,"line":423},[421,661,427],{"class":426},[421,663,664],{"class":430},"link",[421,666,667],{"class":434}," rel",[421,669,438],{"class":426},[421,671,672],{"class":441},"\"preload\"",[421,674,675],{"class":434}," href",[421,677,438],{"class":426},[421,679,680],{"class":441},"\"\u002Fassets\u002Fbelow-fold-carousel.js\"",[421,682,683],{"class":434}," as",[421,685,438],{"class":426},[421,687,688],{"class":441},"\"script\"",[421,690,448],{"class":434},[421,692,438],{"class":426},[421,694,484],{"class":441},[421,696,461],{"class":426},[421,698,699],{"class":354,"line":464},[421,700,701],{"class":496},"\u003C!-- trade-off: a low-priority preload still starts early but yields bandwidth;\n",[421,703,704],{"class":354,"line":493},[421,705,706],{"class":496},"     if the resource is needed soon after load, low priority can delay it. -->\n",[407,708,710],{"id":709},"_4-fix-discovery-first","4. Fix discovery first",[15,712,713,714,718],{},"Priority helps requests that are already in flight compete better. If a critical request starts late because it is discovered late, move it into the HTML or preload it first — see ",[19,715,717],{"href":716},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002F","diagnosing LCP resource load delay",".",[15,720,721],{},[71,722,78,725,78,728,78,731,78,733,78,750,78,753,78,755,78,760,78,766,78,769,78,774,78,781,78,787,78,791,78,796,78,799,78,803,78,805,78,808,78,811,78,814,78,817,78,820,78,823,78,827,78,829,78,832,78,835,78,838,78,842,78,845,78,848,78],{"viewBox":723,"width":74,"role":75,"ariaLabel":724,"style":77},"0 0 760 325","Decision sequence for setting fetchpriority on a request.",[80,726],{"className":727,"x":84,"y":84,"width":74,"height":74,"fill":85},[83],[87,729,730],{},"Raise, lower or leave?",[91,732,724],{},[734,735,736],"defs",{},[737,738,745],"marker",{"id":739,"viewBox":740,"refX":741,"refY":742,"markerWidth":743,"markerHeight":743,"orient":744},"fa42166545","0 0 10 10","9","5","7","auto-start-reverse",[746,747],"path",{"d":748,"fill":100,"style":749},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[80,751],{"x":95,"y":95,"width":96,"height":752,"rx":98,"fill":99,"stroke":100,"style":101},"323",[103,754,730],{"x":105,"y":106,"fill":100,"style":107},[80,756],{"x":105,"y":110,"width":757,"height":758,"rx":759,"fill":100,"stroke":100,"style":113},"320.0","35.0","6",[103,761,765],{"x":762,"y":763,"fill":100,"style":764,"textAnchor":128},"188.0","78.0","font-size:13px;font-weight:700","Needed for the first render or LCP?",[80,767],{"x":768,"y":110,"width":757,"height":758,"rx":759,"fill":147,"stroke":147,"style":148},"412.0",[103,770,773],{"x":771,"y":763,"fill":100,"style":772,"textAnchor":128},"572.0","font-size:12.5px","Raise (or keep High)",[354,775],{"x1":776,"y1":323,"x2":777,"y2":323,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"348.0","410.0","1.5","stroke-opacity:0.6","url(#fa42166545)",[103,782,786],{"x":783,"y":784,"fill":147,"style":785,"textAnchor":128},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[354,788],{"x1":762,"y1":789,"x2":762,"y2":790,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"91.0","125.0",[103,792,795],{"x":793,"y":794,"fill":364,"style":785},"196.0","113.0","no",[80,797],{"x":105,"y":798,"width":757,"height":758,"rx":759,"fill":100,"stroke":100,"style":113},"127.0",[103,800,802],{"x":762,"y":801,"fill":100,"style":764,"textAnchor":128},"149.0","Analytics, prefetch, below-the-fold data?",[80,804],{"x":768,"y":798,"width":757,"height":758,"rx":759,"fill":188,"stroke":189,"style":190},[103,806,807],{"x":771,"y":801,"fill":100,"style":772,"textAnchor":128},"Lower to low",[354,809],{"x1":776,"y1":810,"x2":777,"y2":810,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"144.5",[103,812,786],{"x":783,"y":813,"fill":147,"style":785,"textAnchor":128},"137.5",[354,815],{"x1":762,"y1":816,"x2":762,"y2":793,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"162.0",[103,818,795],{"x":793,"y":819,"fill":364,"style":785},"184.0",[80,821],{"x":105,"y":822,"width":757,"height":758,"rx":759,"fill":100,"stroke":100,"style":113},"198.0",[103,824,826],{"x":762,"y":825,"fill":100,"style":764,"textAnchor":128},"220.0","Discovered late?",[80,828],{"x":768,"y":822,"width":757,"height":758,"rx":759,"fill":147,"stroke":147,"style":148},[103,830,831],{"x":771,"y":825,"fill":100,"style":772,"textAnchor":128},"Fix discovery first — priority cannot help",[354,833],{"x1":776,"y1":834,"x2":777,"y2":834,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"215.5",[103,836,786],{"x":783,"y":837,"fill":147,"style":785,"textAnchor":128},"208.5",[354,839],{"x1":762,"y1":840,"x2":762,"y2":841,"stroke":100,"strokeWidth":778,"style":779,"markerEnd":780},"233.0","267.0",[103,843,795],{"x":793,"y":844,"fill":364,"style":785},"255.0",[80,846],{"x":105,"y":847,"width":757,"height":106,"rx":759,"fill":188,"stroke":189,"style":190},"269.0",[103,849,851],{"x":762,"y":850,"fill":100,"style":772,"textAnchor":128},"290.5","Leave the browser default",[227,853,855],{"id":854},"verification","Verification",[15,857,858],{},"In the Network panel, priorities should reflect your intent. On a throttled profile, critical requests should complete earlier relative to secondary ones. Measure LCP (for client-rendered content) or time-to-main-content with User Timing before and after; on congested connections the improvement can be several hundred milliseconds, on fast ones close to zero.",[227,860,862],{"id":861},"worked-example-a-client-rendered-product-page","Worked Example: A Client-Rendered Product Page",[15,864,865,866,868,869,872],{},"A client-rendered product page issued six ",[30,867,32],{}," calls at startup — product, inventory, reviews, recommendations, personalised offers and an A\u002FB config — all at High priority. On mobile, the product request finished at 1.4s because it shared bandwidth with the others. Marking reviews, recommendations and offers as ",[30,870,871],{},"priority: 'low'"," and raising the product request explicitly brought it to 0.8s; LCP p75 for the template fell by about 450ms. Total data loaded was unchanged; only the order improved.",[227,874,876],{"id":875},"how-priorities-interact-with-http2-and-http3","How Priorities Interact With HTTP\u002F2 and HTTP\u002F3",[15,878,879,880,883,884,886],{},"Browser priorities are communicated to the server: HTTP\u002F2 uses stream priorities (largely replaced by the simpler Extensible Priorities scheme), and HTTP\u002F3 uses the ",[30,881,882],{},"Priority"," header and frames. Whether your server or CDN honours them determines how much ",[30,885,45],{}," changes delivery order on a shared connection. Most major CDNs implement prioritisation; some origins and proxies ignore it, in which case the browser's own scheduling (when to issue requests) still helps but in-flight bandwidth sharing does not change. Test on your real stack rather than assuming.",[227,888,890],{"id":889},"a-priority-plan-for-a-typical-page","A Priority Plan for a Typical Page",[15,892,893],{},"Write down the intended order of the first second of loading, then make the hints express it. For a server-rendered product page it might be: HTML; critical CSS; the LCP image; the heading font; the hydration entry script; the product API refresh; everything else. Compare that plan with the Priority column and request start times in a throttled waterfall. Requests that should be early but start late need discovery fixes (preload, Early Hints); requests that start on time but finish late need priority changes; requests that are early but unimportant need lowering or deferral. Revisit the plan when templates change — a new carousel or widget quietly adds high-priority requests that reorder everything.",[227,895,897],{"id":896},"common-mistakes","Common Mistakes",[232,899,900,906,912,918],{},[235,901,902,905],{},[238,903,904],{},"Marking everything high."," Priorities are relative; if everything is high, nothing is.",[235,907,908,911],{},[238,909,910],{},"Using fetchpriority to fix late discovery."," It cannot start a request earlier.",[235,913,914,917],{},[238,915,916],{},"Lowering resources the user waits for."," Users notice slow data more than slow analytics.",[235,919,920,923],{},[238,921,922],{},"Ignoring server support."," Without server-side prioritisation, the effect on shared connections is smaller.",[227,925,927],{"id":926},"edge-cases","Edge Cases",[15,929,930,78,933,935],{},[238,931,932],{},"Iframes.",[30,934,45],{}," on iframes affects the iframe document's request priority, useful for deprioritising embeds.",[15,937,938,941,942,945],{},[238,939,940],{},"Service workers."," Requests made from a service worker carry their own priority; passing through ",[30,943,944],{},"event.request"," preserves it.",[15,947,948,951],{},[238,949,950],{},"Safari support."," Priority hints are supported in recent Chromium, Safari and Firefox versions; the attribute is ignored safely where unsupported.",[15,953,954,957],{},[238,955,956],{},"Speculative loading."," Prefetches and speculation rules already run at low priority; no hint needed.",[227,959,961],{"id":960},"faq","FAQ",[963,964,967,971],"details",{"className":965},[966],"faq-item",[968,969,970],"summary",{},"Is fetchpriority the same as preload?",[15,972,973,974,718],{},"No. Preload makes the browser start a request early; fetchpriority changes how a request competes once started. They combine well: preload the LCP image and give it ",[30,975,976],{},"fetchpriority=\"high\"",[963,978,980,983],{"className":979},[966],[968,981,982],{},"Does fetchpriority help on fast connections?",[15,984,985],{},"Less. With ample bandwidth, requests do not compete much and order matters little. The biggest gains are on congested mobile networks.",[963,987,989,992],{"className":988},[966],[968,990,991],{},"Can I lower the priority of third-party scripts I do not control?",[15,993,994,995,998],{},"Only if you load them — add ",[30,996,997],{},"fetchpriority=\"low\""," to the script tag you write. Scripts injected by a tag manager inherit whatever the injecting code sets.",[963,1000,1002,1005],{"className":1001},[966],[968,1003,1004],{},"What priority does sendBeacon use?",[15,1006,1007],{},"Beacons are sent at low priority by design, which is why they are suitable for analytics.",[963,1009,1011,1014],{"className":1010},[966],[968,1012,1013],{},"Should fonts get fetchpriority?",[15,1015,1016],{},"Fonts are already high priority when discovered. Preloading the critical font is more useful than adjusting its priority.",[963,1018,1020,1023],{"className":1019},[966],[968,1021,1022],{},"How do I confirm the server honours priorities?",[15,1024,1025],{},"Compare a throttled waterfall with and without the hints on the real stack. If completion order changes, prioritisation is effective end to end.",[963,1027,1029,1032],{"className":1028},[966],[968,1030,1031],{},"Does fetchpriority change the order of script execution?",[15,1033,1034,1035,1038,1039,1042],{},"No. Execution order is governed by script type (",[30,1036,1037],{},"defer"," scripts run in document order; ",[30,1040,1041],{},"async"," scripts run when they arrive). Priority only affects how quickly the bytes arrive, which can change when an async script happens to run.",[963,1044,1046,1049],{"className":1045},[966],[968,1047,1048],{},"Can a low-priority request be starved entirely?",[15,1050,1051],{},"Rarely on modern browsers — low-priority requests still proceed, just after higher-priority ones on contended connections. On very slow connections they can be delayed by seconds, which is acceptable for analytics and prefetches but not for anything visible.",[227,1053,1055],{"id":1054},"related","Related",[232,1057,1058,1065,1072],{},[235,1059,1060,1064],{},[19,1061,1063],{"href":1062},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — the most common use of the hint.",[235,1066,1067,1071],{},[19,1068,1070],{"href":1069},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F","Preload vs preconnect: when to use each"," — starting requests earlier.",[235,1073,1074,1078],{},[19,1075,1077],{"href":1076},"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002F","Diagnosing head-of-line blocking"," — how transport affects request ordering.",[431,1080,1082],{"type":1081},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Use fetchpriority for Scripts and fetch() Requests\",\n  \"description\": \"How the Priority Hints API applies beyond images — scripts, preloads and fetch requests — and how to use it to protect critical requests from contention.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Raise critical async scripts\",\n      \"text\": \"Raise critical async scripts\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Lower non-critical fetches\",\n      \"text\": \"Expected outcome: the main content request finishes sooner under contention.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Lower late-needed preloads\",\n      \"text\": \"Lower late-needed preloads\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Fix discovery first\",\n      \"text\": \"Priority helps requests that are already in flight compete better.\"\n    }\n  ]\n}\n",[431,1084,1085],{"type":1081},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Use fetchpriority for Scripts and fetch() Requests\",\n  \"description\": \"How the Priority Hints API applies beyond images — scripts, preloads and fetch requests — and how to use it to protect critical requests from contention.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002F\"\n  }\n}\n",[431,1087,1088],{"type":1081},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Advanced Caching Strategies & CDN Architecture\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Resource Hints & Early Hints\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"fetchpriority for Scripts and fetch() Requests\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002F\"\n    }\n  ]\n}\n",[1090,1091,1092],"style",{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":417,"searchDepth":464,"depth":464,"links":1094},[1095,1096,1097,1103,1104,1105,1106,1107,1108,1109,1110],{"id":229,"depth":464,"text":230},{"id":265,"depth":464,"text":266},{"id":404,"depth":464,"text":405,"children":1098},[1099,1100,1101,1102],{"id":409,"depth":493,"text":410},{"id":506,"depth":493,"text":507},{"id":651,"depth":493,"text":652},{"id":709,"depth":493,"text":710},{"id":854,"depth":464,"text":855},{"id":861,"depth":464,"text":862},{"id":875,"depth":464,"text":876},{"id":889,"depth":464,"text":890},{"id":896,"depth":464,"text":897},{"id":926,"depth":464,"text":927},{"id":960,"depth":464,"text":961},{"id":1054,"depth":464,"text":1055},"How the Priority Hints API applies beyond images — scripts, preloads and fetch requests — and how to use it to protect critical requests from contention.","md",{"slug":1114,"type":1115,"breadcrumb":1116,"datePublished":1124,"dateModified":1124},"fetchpriority-for-scripts-and-fetch-requests","article",[1117,1120,1121,1122],{"name":1118,"url":1119},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1123},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002F","2026-10-06",true,"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests",{"title":5,"description":1128},"Use fetchpriority on scripts, preloads and fetch() to tell the browser which requests matter: raise critical data and scripts, lower analytics and prefetches.","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002Findex","RRU45NCyiCZSSYPQTnaY4ZWLd_bQuzUlviEDNndtfaQ",[1132,1136],{"title":1133,"path":1134,"stem":1135},"dns-prefetch vs preconnect","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect\u002Findex",{"title":1137,"path":1138,"stem":1139},"Fixing Unused-Preload Warnings in the Console","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffixing-unused-preload-warnings-in-the-console","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffixing-unused-preload-warnings-in-the-console\u002Findex",1791308076988]