[{"data":1,"prerenderedAt":955},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each":946},{"id":4,"title":5,"body":6,"description":927,"extension":928,"meta":929,"navigation":940,"path":941,"seo":942,"stem":944,"__hash__":945},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002Findex.md","Preload vs Preconnect: When to Use Each",{"type":7,"value":8,"toc":918},"minimark",[9,14,52,57,110,269,273,375,379,389,395,411,421,425,430,540,547,553,615,618,627,705,720,730,778,782,789,792,795,799,817,826,835,847,862,879,883,903,908,911,914],[10,11,13],"h1",{"id":12},"preload-vs-preconnect-which-hint-fixes-your-critical-path","Preload vs Preconnect: Which Hint Fixes Your Critical Path?",[15,16,17,18,23,24,28,29,33,34,38,39,42,43,46,47,51],"p",{},"This comparison sits under ",[19,20,22],"a",{"href":21},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002F","Resource Hints & Early Hints"," in ",[19,25,27],{"href":26},"\u002Fadvanced-caching-strategies-cdn-architecture\u002F","Advanced Caching Strategies & CDN Architecture",". The two hints are routinely used interchangeably, and they do completely different things. ",[30,31,32],"code",{},"preconnect"," prepares a ",[35,36,37],"em",{},"pipe"," to an origin. ",[30,40,41],{},"preload"," fetches a ",[35,44,45],{},"file",". Choosing the wrong one produces either a warmed connection nothing travels through, or a high-priority download that displaces the resource defining your ",[19,48,50],{"href":49},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","LCP",".",[53,54,56],"h2",{"id":55},"rapid-diagnosis-do-you-know-the-url","Rapid Diagnosis: Do You Know the URL?",[58,59,60,70,78,96],"ul",{},[61,62,63,67,68,51],"li",{},[64,65,66],"strong",{},"You know the origin but not the file"," — an image CDN whose URLs are computed, an API called after hydration, a font service. That is ",[30,69,32],{},[61,71,72,75,76,51],{},[64,73,74],{},"You know the exact file and it is needed above the fold"," — a specific font, the critical stylesheet, the route's entry module. That is ",[30,77,41],{},[61,79,80,83,84,87,88,91,92,95],{},[64,81,82],{},"The file is already in the initial HTML"," — an ",[30,85,86],{},"\u003Cimg>",", a ",[30,89,90],{},"\u003Clink rel=stylesheet>",". Neither: the preload scanner already found it, so use ",[30,93,94],{},"fetchpriority"," instead.",[61,97,98,105,106,109],{},[64,99,100,101,104],{},"The resource is for the ",[35,102,103],{},"next"," page"," — that is ",[30,107,108],{},"prefetch",", at lowest priority, and it should not compete with the current page at all.",[111,112,119,120,127,128,127,132,127,136,127,145,127,152,127,160,127,167,127,174,127,179,127,185,127,191,127,196,127,201,127,205,127,208,127,212,127,215,127,219,127,222,127,225,127,228,127,230,127,233,127,236,127,239,127,241,127,244,127,248,127,251,127,256,127,259,127,263,127,266,127],"svg",{"xmlns":113,"viewBox":114,"width":115,"role":116,"ariaLabel":117,"style":118},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","0 0 760 250","100%","img","Decision flow asking whether the exact URL is known, whether the resource is needed for the first viewport, and whether it is already in the HTML, routing to preconnect, preload, fetchpriority or nothing","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)","\n  ",[121,122],"rect",{"className":123,"x":125,"y":125,"width":115,"height":115,"fill":126},[124],"svg-canvas","0","#ffffff"," ",[129,130,131],"title",{},"Choosing between preconnect, preload and neither",[133,134,135],"desc",{},"Three questions route the decision: unknown URL leads to preconnect, a known URL already present in the HTML leads to fetchpriority, a known late-discovered URL needed above the fold leads to preload, and anything else needs no hint.",[121,137],{"x":138,"y":138,"width":139,"height":140,"rx":141,"fill":142,"stroke":143,"style":144},"1","758","248","10","none","currentColor","stroke-opacity:0.18",[146,147,151],"text",{"x":148,"y":149,"fill":143,"style":150},"24","32","font-size:16px;font-weight:700","Which hint, if any?",[121,153],{"x":154,"y":155,"width":156,"height":157,"rx":158,"fill":143,"stroke":143,"style":159},"30","52","220","40","6","fill-opacity:0.04;stroke-opacity:0.3",[146,161,166],{"x":162,"y":163,"fill":143,"style":164,"textAnchor":165},"140","77","font-size:11.5px;font-weight:600;","middle","Do you know the exact URL?",[168,169],"line",{"x1":170,"y1":171,"x2":172,"y2":171,"stroke":143,"style":173},"250","72","282","stroke-opacity:0.4",[175,176],"polygon",{"points":177,"fill":143,"style":178},"290,72 280,67 280,77","fill-opacity:0.55",[146,180,184],{"x":181,"y":182,"fill":143,"style":183,"textAnchor":165},"268","64","font-size:10px;fill-opacity:0.65","no",[121,186],{"x":187,"y":155,"width":188,"height":157,"rx":158,"fill":189,"stroke":189,"style":190},"290","230","#0466c8","fill-opacity:0.18;stroke-opacity:0.55",[146,192,195],{"x":193,"y":163,"fill":143,"style":194,"textAnchor":165},"405","font-size:11.5px;font-weight:700;","preconnect the origin",[146,197,200],{"x":198,"y":163,"fill":143,"style":199},"536","font-size:10.5px;fill-opacity:0.7","2–3 max",[168,202],{"x1":162,"y1":203,"x2":162,"y2":204,"stroke":143,"style":173},"92","110",[175,206],{"points":207,"fill":143,"style":178},"140,118 135,108 145,108",[146,209,211],{"x":210,"y":204,"fill":143,"style":183},"158","yes",[121,213],{"x":154,"y":214,"width":156,"height":157,"rx":158,"fill":143,"stroke":143,"style":159},"118",[146,216,218],{"x":162,"y":217,"fill":143,"style":164,"textAnchor":165},"143","Already in the HTML?",[168,220],{"x1":170,"y1":221,"x2":172,"y2":221,"stroke":143,"style":173},"138",[175,223],{"points":224,"fill":143,"style":178},"290,138 280,133 280,143",[146,226,211],{"x":181,"y":227,"fill":143,"style":183,"textAnchor":165},"130",[121,229],{"x":187,"y":214,"width":188,"height":157,"rx":158,"fill":189,"stroke":189,"style":190},[146,231,232],{"x":193,"y":217,"fill":143,"style":194,"textAnchor":165},"fetchpriority, not preload",[168,234],{"x1":162,"y1":210,"x2":162,"y2":235,"stroke":143,"style":173},"176",[175,237],{"points":238,"fill":143,"style":178},"140,184 135,174 145,174",[146,240,184],{"x":210,"y":235,"fill":143,"style":183},[121,242],{"x":154,"y":243,"width":156,"height":157,"rx":158,"fill":143,"stroke":143,"style":159},"184",[146,245,247],{"x":162,"y":246,"fill":143,"style":164,"textAnchor":165},"209","Needed above the fold?",[168,249],{"x1":170,"y1":250,"x2":172,"y2":250,"stroke":143,"style":173},"204",[175,252],{"points":253,"fill":254,"style":255},"290,204 280,199 280,209","#b8860b","fill-opacity:0.8",[146,257,211],{"x":181,"y":258,"fill":143,"style":183,"textAnchor":165},"196",[121,260],{"x":187,"y":243,"width":188,"height":157,"rx":158,"fill":261,"stroke":254,"style":262},"#ffc300","fill-opacity:0.28",[146,264,265],{"x":193,"y":246,"fill":143,"style":194,"textAnchor":165},"preload with a correct `as`",[146,267,268],{"x":198,"y":246,"fill":143,"style":199},"otherwise: no hint",[53,270,272],{"id":271},"the-comparison","The Comparison",[274,275,276,294],"table",{},[277,278,279],"thead",{},[280,281,282,286,290],"tr",{},[283,284,285],"th",{},"Axis",[283,287,288],{},[30,289,32],{},[283,291,292],{},[30,293,41],{},[295,296,297,309,320,331,342,353],"tbody",{},[280,298,299,303,306],{},[300,301,302],"td",{},"What it prepares",[300,304,305],{},"DNS + TCP + TLS to an origin",[300,307,308],{},"The bytes of one specific file",[280,310,311,314,317],{},[300,312,313],{},"Needs the URL",[300,315,316],{},"No — origin only",[300,318,319],{},"Yes — exact, including query",[280,321,322,325,328],{},[300,323,324],{},"Typical saving",[300,326,327],{},"100–300ms of handshake",[300,329,330],{},"The full discovery gap, 200–600ms",[280,332,333,336,339],{},[300,334,335],{},"Cost when wrong",[300,337,338],{},"An idle connection for ~10s",[300,340,341],{},"Displaced bandwidth and priority",[280,343,344,347,350],{},[300,345,346],{},"Safe quantity",[300,348,349],{},"2–3",[300,351,352],{},"As few as genuinely qualify",[280,354,355,358,361],{},[300,356,357],{},"Fails when",[300,359,360],{},"The origin is never used",[300,362,363,366,367,370,371,374],{},[30,364,365],{},"as",", ",[30,368,369],{},"type"," or ",[30,372,373],{},"crossorigin"," mismatch",[53,376,378],{"id":377},"root-cause-analysis-the-four-common-mistakes","Root Cause Analysis: The Four Common Mistakes",[15,380,381,384,385,388],{},[64,382,383],{},"1. Preloading something the parser already found."," An ",[30,386,387],{},"\u003Cimg src>"," in the initial HTML is discovered by the preload scanner within milliseconds. Adding a preload does not make it earlier; it adds a second discovery path that can duplicate the request if the attributes differ.",[15,390,391,394],{},[64,392,393],{},"2. Preconnecting everything."," Each hint holds a connection open for roughly ten seconds and competes with the connections carrying your HTML and CSS. Past three origins, the marginal hint usually costs more than it saves.",[15,396,397,403,404,406,407,410],{},[64,398,399,400,402],{},"3. Omitting ",[30,401,373],{}," on a font preload."," Fonts are always fetched in anonymous CORS mode. A preload without ",[30,405,373],{}," creates a ",[35,408,409],{},"different"," request than the one the CSS will make, so the file downloads twice and the preload warning fires.",[15,412,413,416,417,420],{},[64,414,415],{},"4. Treating hints as free."," Hints do not create bandwidth; they redistribute it. Promoting three resources demotes everything else. Always re-measure LCP after adding one — a faster font that costs ",[30,418,419],{},"120ms"," of LCP is a regression.",[53,422,424],{"id":423},"step-by-step-resolution","Step-by-Step Resolution",[15,426,427],{},[64,428,429],{},"1. Preconnect the origins on the critical path, and only those.",[431,432,437],"pre",{"className":433,"code":434,"language":435,"meta":436,"style":436},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fimg.example-cdn.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fapi.example.com\" crossorigin>\n\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fwidget.vendor.example\">\n\u003C!-- trade-off: crossorigin must match how the resource will be requested.\n     A credentialed API fetch and an anonymous image fetch open different\n     connections, so a mismatched hint warms one you will never use. -->\n","html","",[30,438,439,473,498,521,528,534],{"__ignoreMap":436},[440,441,443,447,451,455,458,462,465,467,470],"span",{"class":168,"line":442},1,[440,444,446],{"class":445},"saISM","\u003C",[440,448,450],{"class":449},"sZBmE","link",[440,452,454],{"class":453},"sPXB4"," rel",[440,456,457],{"class":445},"=",[440,459,461],{"class":460},"sZ8jY","\"preconnect\"",[440,463,464],{"class":453}," href",[440,466,457],{"class":445},[440,468,469],{"class":460},"\"https:\u002F\u002Fimg.example-cdn.com\"",[440,471,472],{"class":445},">\n",[440,474,476,478,480,482,484,486,488,490,493,496],{"class":168,"line":475},2,[440,477,446],{"class":445},[440,479,450],{"class":449},[440,481,454],{"class":453},[440,483,457],{"class":445},[440,485,461],{"class":460},[440,487,464],{"class":453},[440,489,457],{"class":445},[440,491,492],{"class":460},"\"https:\u002F\u002Fapi.example.com\"",[440,494,495],{"class":453}," crossorigin",[440,497,472],{"class":445},[440,499,501,503,505,507,509,512,514,516,519],{"class":168,"line":500},3,[440,502,446],{"class":445},[440,504,450],{"class":449},[440,506,454],{"class":453},[440,508,457],{"class":445},[440,510,511],{"class":460},"\"dns-prefetch\"",[440,513,464],{"class":453},[440,515,457],{"class":445},[440,517,518],{"class":460},"\"https:\u002F\u002Fwidget.vendor.example\"",[440,520,472],{"class":445},[440,522,524],{"class":168,"line":523},4,[440,525,527],{"class":526},"sjfSM","\u003C!-- trade-off: crossorigin must match how the resource will be requested.\n",[440,529,531],{"class":168,"line":530},5,[440,532,533],{"class":526},"     A credentialed API fetch and an anonymous image fetch open different\n",[440,535,537],{"class":168,"line":536},6,[440,538,539],{"class":526},"     connections, so a mismatched hint warms one you will never use. -->\n",[15,541,542,543,546],{},"Expected outcome: removes handshake latency for the two origins that matter, typically ",[30,544,545],{},"100–250ms"," each on mobile.",[15,548,549,552],{},[64,550,551],{},"2. Preload only late-discovered, above-the-fold files."," The canonical case is a font referenced from CSS.",[431,554,556],{"className":433,"code":555,"language":435,"meta":436,"style":436},"\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Finter-latin.woff2\" as=\"font\"\n      type=\"font\u002Fwoff2\" crossorigin>\n\u003C!-- trade-off: `as` sets both the priority band and the Accept header. The\n     wrong value fetches a second copy at the wrong priority — strictly worse\n     than no preload at all. -->\n",[30,557,558,586,600,605,610],{"__ignoreMap":436},[440,559,560,562,564,566,568,571,573,575,578,581,583],{"class":168,"line":442},[440,561,446],{"class":445},[440,563,450],{"class":449},[440,565,454],{"class":453},[440,567,457],{"class":445},[440,569,570],{"class":460},"\"preload\"",[440,572,464],{"class":453},[440,574,457],{"class":445},[440,576,577],{"class":460},"\"\u002Ffonts\u002Finter-latin.woff2\"",[440,579,580],{"class":453}," as",[440,582,457],{"class":445},[440,584,585],{"class":460},"\"font\"\n",[440,587,588,591,593,596,598],{"class":168,"line":475},[440,589,590],{"class":453},"      type",[440,592,457],{"class":445},[440,594,595],{"class":460},"\"font\u002Fwoff2\"",[440,597,495],{"class":453},[440,599,472],{"class":445},[440,601,602],{"class":168,"line":500},[440,603,604],{"class":526},"\u003C!-- trade-off: `as` sets both the priority band and the Accept header. The\n",[440,606,607],{"class":168,"line":523},[440,608,609],{"class":526},"     wrong value fetches a second copy at the wrong priority — strictly worse\n",[440,611,612],{"class":168,"line":530},[440,613,614],{"class":526},"     than no preload at all. -->\n",[15,616,617],{},"Expected outcome: the font request starts with the document instead of after the stylesheet, cutting the discovery gap by a full round trip.",[15,619,620,626],{},[64,621,622,623,625],{},"3. Use ",[30,624,94],{}," where the resource is already discoverable."," For the LCP image, this is the correct tool and a preload is not.",[431,628,630],{"className":433,"code":629,"language":435,"meta":436,"style":436},"\u003Cimg src=\"\u002Fhero-1600.avif\" width=\"1600\" height=\"900\" alt=\"Dashboard overview\"\n     fetchpriority=\"high\" decoding=\"async\">\n\u003C!-- trade-off: promoting the hero demotes something else. If your critical CSS\n     arrives late as a result, you have moved the problem rather than solved it —\n     check the whole waterfall, not just the image. -->\n",[30,631,632,670,690,695,700],{"__ignoreMap":436},[440,633,634,636,638,641,643,646,649,651,654,657,659,662,665,667],{"class":168,"line":442},[440,635,446],{"class":445},[440,637,116],{"class":449},[440,639,640],{"class":453}," src",[440,642,457],{"class":445},[440,644,645],{"class":460},"\"\u002Fhero-1600.avif\"",[440,647,648],{"class":453}," width",[440,650,457],{"class":445},[440,652,653],{"class":460},"\"1600\"",[440,655,656],{"class":453}," height",[440,658,457],{"class":445},[440,660,661],{"class":460},"\"900\"",[440,663,664],{"class":453}," alt",[440,666,457],{"class":445},[440,668,669],{"class":460},"\"Dashboard overview\"\n",[440,671,672,675,677,680,683,685,688],{"class":168,"line":475},[440,673,674],{"class":453},"     fetchpriority",[440,676,457],{"class":445},[440,678,679],{"class":460},"\"high\"",[440,681,682],{"class":453}," decoding",[440,684,457],{"class":445},[440,686,687],{"class":460},"\"async\"",[440,689,472],{"class":445},[440,691,692],{"class":168,"line":500},[440,693,694],{"class":526},"\u003C!-- trade-off: promoting the hero demotes something else. If your critical CSS\n",[440,696,697],{"class":168,"line":523},[440,698,699],{"class":526},"     arrives late as a result, you have moved the problem rather than solved it —\n",[440,701,702],{"class":168,"line":530},[440,703,704],{"class":526},"     check the whole waterfall, not just the image. -->\n",[15,706,707,708,711,712,715,716,719],{},"Expected outcome: the image moves from ",[30,709,710],{},"Low","\u002F",[30,713,714],{},"Medium"," to ",[30,717,718],{},"High"," priority without a duplicate request.",[15,721,722,725,726,51],{},[64,723,724],{},"4. Deliver both as response headers when you can."," Header hints are processed before the body is parsed, and they are the only form Early Hints can carry — see ",[19,727,729],{"href":728},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fusing-103-early-hints-behind-a-cdn\u002F","using 103 Early Hints behind a CDN",[431,731,735],{"className":732,"code":733,"language":734,"meta":436,"style":436},"language-nginx shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","add_header Link '\u003C\u002Ffonts\u002Finter-latin.woff2>; rel=preload; as=font; type=\"font\u002Fwoff2\"; crossorigin' always;\nadd_header Link '\u003Chttps:\u002F\u002Fimg.example-cdn.com>; rel=preconnect' always;\n# trade-off: this applies to every response from the location block, including\n# routes that never use the font. Scope per route or generate from the build\n# manifest, or you will preload assets that page does not need.\n","nginx",[30,736,737,752,763,768,773],{"__ignoreMap":436},[440,738,739,743,746,749],{"class":168,"line":442},[440,740,742],{"class":741},"sPARh","add_header ",[440,744,745],{"class":445},"Link ",[440,747,748],{"class":460},"'\u003C\u002Ffonts\u002Finter-latin.woff2>; rel=preload; as=font; type=\"font\u002Fwoff2\"; crossorigin'",[440,750,751],{"class":445}," always;\n",[440,753,754,756,758,761],{"class":168,"line":475},[440,755,742],{"class":741},[440,757,745],{"class":445},[440,759,760],{"class":460},"'\u003Chttps:\u002F\u002Fimg.example-cdn.com>; rel=preconnect'",[440,762,751],{"class":445},[440,764,765],{"class":168,"line":500},[440,766,767],{"class":526},"# trade-off: this applies to every response from the location block, including\n",[440,769,770],{"class":168,"line":523},[440,771,772],{"class":526},"# routes that never use the font. Scope per route or generate from the build\n",[440,774,775],{"class":168,"line":530},[440,776,777],{"class":526},"# manifest, or you will preload assets that page does not need.\n",[53,779,781],{"id":780},"verification","Verification",[15,783,784,785,51],{},"Check the Network panel for three things: the hinted origins show connection setup completing before the dependent request starts, the preloaded file appears exactly once, and its priority matches what you intended. Two entries for the same URL means an attribute mismatch — the diagnosis is in ",[19,786,788],{"href":787},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffixing-unused-preload-warnings-in-the-console\u002F","fixing unused-preload warnings",[15,790,791],{},"Then confirm you did not displace anything. Compare the LCP resource's start time before and after: if it moved later, your hint took bandwidth from the metric it was supposed to help, and the hint should be removed or the priorities rebalanced.",[15,793,794],{},"Finally, watch the console. Chrome warns when a preloaded resource goes unused within a few seconds, and that warning is the single most reliable signal that a hint is wrong. Treat it as a build failure rather than noise.",[53,796,798],{"id":797},"faq","FAQ",[800,801,804,808],"details",{"className":802},[803],"faq-item",[805,806,807],"summary",{},"Can I use both hints for the same resource?",[15,809,810,811,813,814,816],{},"You can, but it is usually redundant: a ",[30,812,41],{}," opens the connection it needs as part of fetching the file, so a separate ",[30,815,32],{}," to the same origin adds nothing. The combination makes sense only when you preconnect an origin early and preload a file from it much later — for example, warming an image CDN in the document head and preloading a specific asset once a route is known.",[800,818,820,823],{"className":819},[803],[805,821,822],{},"Why did my preload make the page slower?",[15,824,825],{},"Because priority is zero-sum. A preloaded font at high priority competes with your stylesheet and your LCP image for the same connection, and on a constrained mobile link something has to arrive later. Check the LCP resource's start time before and after; if it slipped, drop the preload or downgrade the competing resource.",[800,827,829,832],{"className":828},[803],[805,830,831],{},"Does preconnect help for origins used later in the session?",[15,833,834],{},"Only briefly. Browsers close an idle preconnected socket after roughly ten seconds, so hinting an origin that is first used thirty seconds in wastes the connection and pays the handshake anyway. For that case, issue the hint at the moment intent appears — on hover, on scroll near the component, or when the route that needs it is prefetched.",[800,836,838,841],{"className":837},[803],[805,839,840],{},"How do I decide the order of multiple hints?",[15,842,843,844,846],{},"Order matters less than quantity, but where it does matter the rule is: origin warm-ups first, then file fetches, then anything speculative. A ",[30,845,32],{}," costs nothing to issue and pays off for every later request to that origin, so it belongs at the top of the head. Preloads follow, ordered by how early the resource is needed. Prefetches for future navigations go last, or better, are injected later on user intent so they cannot compete with the current page at all.",[800,848,850,853],{"className":849},[803],[805,851,852],{},"Do hints work inside a single-page application after the first load?",[15,854,855,856,370,858,861],{},"Yes, and they are underused there. Injecting a ",[30,857,32],{},[30,859,860],{},"modulepreload"," when a route becomes likely — a pointer resting on a link, a wizard reaching its penultimate step — gives you the same discovery saving on a soft navigation as the head hints give on a hard one. The one difference is that you now control the timing, so there is no excuse for a speculative hint competing with the current page's critical path.",[800,863,865,868],{"className":864},[803],[805,866,867],{},"Should hints differ per device or connection?",[15,869,870,871,874,875,878],{},"Sometimes, and the signal to use is ",[30,872,873],{},"navigator.connection",". On a ",[30,876,877],{},"save-data"," or low-effective-type connection, speculative hints are a straightforward cost: skip prefetches entirely and keep only the preconnect and preload that serve the current page. Conditional hinting is easy to over-engineer, so start with a single rule — no speculation under reduced-data mode — and add nuance only if the measurements justify it.",[53,880,882],{"id":881},"related","Related",[58,884,885,890,897],{},[61,886,887,889],{},[19,888,22],{"href":21}," — the full set of hints and how priority mediates their effect.",[61,891,892,896],{},[19,893,895],{"href":894},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — the correct tool when the resource is already in the HTML.",[61,898,899,902],{},[19,900,901],{"href":787},"Fixing unused-preload warnings"," — resolve the attribute mismatch behind a duplicated request.",[904,905,907],"script",{"type":906},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Choose between preload and preconnect\",\n  \"description\": \"Decide which resource hint fixes a critical-path problem based on whether the exact URL is known, whether the resource is already discoverable in the HTML, and whether it is needed above the fold.\",\n  \"step\": [\n    { \"@type\": \"HowToStep\", \"position\": 1, \"name\": \"Preconnect known origins\", \"text\": \"Warm the two or three origins the critical path needs, matching crossorigin to the eventual request mode.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 2, \"name\": \"Preload late-discovered files\", \"text\": \"Preload only above-the-fold resources the parser cannot find early, with a correct as value.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 3, \"name\": \"Use fetchpriority for discoverable resources\", \"text\": \"Promote images already present in the HTML with fetchpriority rather than duplicating them with a preload.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F#step-by-step-resolution\" },\n    { \"@type\": \"HowToStep\", \"position\": 4, \"name\": \"Deliver hints in headers\", \"text\": \"Move hints into Link response headers, scoped per route, so they are processed before the body is parsed.\", \"url\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F#step-by-step-resolution\" }\n  ]\n}\n",[904,909,910],{"type":906},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Preload vs Preconnect: Which Hint Fixes Your Critical Path?\",\n  \"description\": \"A decision matrix separating origin warm-up from file fetching, with the four mistakes that make hints counterproductive.\",\n  \"datePublished\": \"2026-08-01\",\n  \"dateModified\": \"2026-08-01\",\n  \"author\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"frontend-performance.com\" },\n  \"mainEntityOfPage\": { \"@type\": \"WebPage\", \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F\" }\n}\n",[904,912,913],{"type":906},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"Home\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Advanced Caching Strategies & CDN Architecture\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 3, \"name\": \"Resource Hints & Early Hints\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002F\" },\n    { \"@type\": \"ListItem\", \"position\": 4, \"name\": \"Preload vs Preconnect: When to Use Each\", \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F\" }\n  ]\n}\n",[915,916,917],"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}",{"title":436,"searchDepth":475,"depth":475,"links":919},[920,921,922,923,924,925,926],{"id":55,"depth":475,"text":56},{"id":271,"depth":475,"text":272},{"id":377,"depth":475,"text":378},{"id":423,"depth":475,"text":424},{"id":780,"depth":475,"text":781},{"id":797,"depth":475,"text":798},{"id":881,"depth":475,"text":882},"A decision matrix for the two hints engineers most often confuse, including the cases where the right answer is neither.","md",{"slug":930,"type":931,"breadcrumb":932,"datePublished":939,"dateModified":939},"preload-vs-preconnect-when-to-use-each","article",[933,935,936,937],{"name":934,"url":711},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":938},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002F","2026-08-01",true,"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each",{"title":5,"description":943},"preconnect warms an origin, preload fetches a file. Which one fixes your critical path depends on whether you know the URL — and on what you are willing to displace.","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreload-vs-preconnect-when-to-use-each\u002Findex","VYiId_h899GVEMzjb-GZOJUd5jbP1yBumPZOGxWlmlQ",[947,951],{"title":948,"path":949,"stem":950,"children":-1},"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",{"title":952,"path":953,"stem":954,"children":-1},"Using 103 Early Hints Behind a CDN","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fusing-103-early-hints-behind-a-cdn","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fusing-103-early-hints-behind-a-cdn\u002Findex",1785622406690]