[{"data":1,"prerenderedAt":994},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect":986},{"id":4,"title":5,"body":6,"description":965,"extension":966,"meta":967,"navigation":979,"path":980,"seo":981,"stem":984,"__hash__":985},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect\u002Findex.md","dns-prefetch vs preconnect",{"type":7,"value":8,"toc":948},"minimark",[9,14,29,41,204,209,246,250,256,262,275,281,394,398,403,490,493,497,560,564,574,578,586,717,721,724,728,738,742,767,771,800,804,814,820,826,832,836,848,857,870,879,888,897,906,910,933,938,941,944],[10,11,13],"h1",{"id":12},"dns-prefetch-vs-preconnect-choosing-the-right-connection-hint","dns-prefetch vs preconnect: Choosing the Right Connection Hint",[15,16,17,18,23,24,28],"p",{},"This comparison belongs to ",[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",". Every new origin a page talks to costs connection setup before any byte transfers: a DNS lookup, a TCP handshake and a TLS handshake. On a mobile network with 100–200ms round trips, that is 300–600ms for a cold origin — often longer than downloading the resource itself.",[15,30,31,32,36,37,40],{},"Two hints let the browser start that work early. ",[33,34,35],"code",{},"dns-prefetch"," performs only the DNS lookup. ",[33,38,39],{},"preconnect"," performs DNS, TCP and TLS, leaving an open, warm connection ready for the first request. Preconnect saves far more time, but it also costs more: each open connection uses a socket and some CPU, browsers close unused preconnected sockets after about ten seconds, and too many preconnects compete with critical requests.",[15,42,43],{},[44,45,51,52,51,59,51,63,51,66,51,75,51,81,51,86,51,94,51,101,51,105,51,109,51,113,51,117,51,124,51,128,51,131,51,134,51,138,51,141,51,144,51,147,51,150,51,153,51,156,51,160,51,167,51,173,51,176,51,180,51,184,51,188,51,192,51,196,51,200,51],"svg",{"viewBox":46,"width":47,"role":48,"ariaLabel":49,"style":50},"0 0 760 216","100%","img","Timelines comparing a cold request, a request after dns-prefetch, and a request after preconnect, showing which setup phases remain.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[53,54],"rect",{"className":55,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],"svg-canvas","0","#ffffff",[60,61,62],"title",{},"Connection setup for a cold third-party origin on mobile",[64,65,49],"desc",{},[53,67],{"x":68,"y":68,"width":69,"height":70,"rx":71,"fill":72,"stroke":73,"style":74},"1","758","214","10","none","currentColor","stroke-opacity:0.18",[76,77,62],"text",{"x":78,"y":79,"fill":73,"style":80},"28.0","34.0","font-size:16px;font-weight:700",[76,82,85],{"x":78,"y":83,"fill":73,"style":84},"74.0","font-size:12.5px;font-weight:700","No hint",[53,87],{"x":88,"y":89,"width":90,"height":91,"rx":92,"fill":73,"stroke":73,"style":93},"116.7","56.0","90.0","26.0","3","fill-opacity:0.06;stroke-opacity:0.4",[76,95,100],{"x":96,"y":97,"fill":73,"style":98,"textAnchor":99},"161.7","73.5","font-size:11.5px","middle","DNS",[53,102],{"x":103,"y":89,"width":104,"height":91,"rx":92,"fill":73,"stroke":73,"style":93},"208.2","112.9",[76,106,108],{"x":107,"y":97,"fill":73,"style":98,"textAnchor":99},"264.6","TCP",[53,110],{"x":111,"y":89,"width":112,"height":91,"rx":92,"fill":73,"stroke":73,"style":93},"322.6","135.8",[76,114,116],{"x":115,"y":97,"fill":73,"style":98,"textAnchor":99},"390.5","TLS",[53,118],{"x":119,"y":89,"width":120,"height":91,"rx":92,"fill":121,"stroke":122,"style":123},"459.8","151.0","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[76,125,127],{"x":126,"y":97,"fill":73,"style":98,"textAnchor":99},"535.4","request",[76,129,35],{"x":78,"y":130,"fill":73,"style":84},"112.0",[53,132],{"x":88,"y":133,"width":104,"height":91,"rx":92,"fill":73,"stroke":73,"style":93},"94.0",[76,135,108],{"x":136,"y":137,"fill":73,"style":98,"textAnchor":99},"173.1","111.5",[53,139],{"x":140,"y":133,"width":112,"height":91,"rx":92,"fill":73,"stroke":73,"style":93},"231.1",[76,142,116],{"x":143,"y":137,"fill":73,"style":98,"textAnchor":99},"298.9",[53,145],{"x":146,"y":133,"width":120,"height":91,"rx":92,"fill":121,"stroke":122,"style":123},"368.3",[76,148,127],{"x":149,"y":137,"fill":73,"style":98,"textAnchor":99},"443.8",[76,151,39],{"x":78,"y":152,"fill":73,"style":84},"150.0",[53,154],{"x":88,"y":155,"width":120,"height":91,"rx":92,"fill":121,"stroke":122,"style":123},"132.0",[76,157,127],{"x":158,"y":159,"fill":73,"style":98,"textAnchor":99},"192.2","149.5",[161,162],"line",{"x1":163,"y1":164,"x2":165,"y2":164,"stroke":73,"style":166},"115.9","172.0","726.0","stroke-opacity:0.4",[76,168,172],{"x":169,"y":170,"fill":171,"style":98,"textAnchor":99},"126.6","189.0","#51617a","0ms",[76,174,175],{"x":158,"y":170,"fill":171,"style":98,"textAnchor":99},"100ms",[76,177,179],{"x":178,"y":170,"fill":171,"style":98,"textAnchor":99},"268.4","200ms",[76,181,183],{"x":182,"y":170,"fill":171,"style":98,"textAnchor":99},"344.7","300ms",[76,185,187],{"x":186,"y":170,"fill":171,"style":98,"textAnchor":99},"421.0","400ms",[76,189,191],{"x":190,"y":170,"fill":171,"style":98,"textAnchor":99},"497.2","500ms",[76,193,195],{"x":194,"y":170,"fill":171,"style":98,"textAnchor":99},"573.5","600ms",[76,197,199],{"x":198,"y":170,"fill":171,"style":98,"textAnchor":99},"649.7","700ms",[76,201,203],{"x":202,"y":170,"fill":171,"style":98,"textAnchor":99},"715.3","800ms",[205,206,208],"h2",{"id":207},"rapid-diagnosis","Rapid Diagnosis",[210,211,212,220,234,240],"ul",{},[213,214,215,219],"li",{},[216,217,218],"strong",{},"List third-party origins on the critical path."," In the Network panel, check each origin's first request Timing tab for DNS, Initial connection and SSL times.",[213,221,222,225,226,229,230,233],{},[216,223,224],{},"Check existing hints."," View source for ",[33,227,228],{},"\u003Clink rel=\"preconnect\">"," and ",[33,231,232],{},"rel=\"dns-prefetch\"","; count them.",[213,235,236,239],{},[216,237,238],{},"Look for unused preconnects."," Chrome's console warns when a preconnected origin is not used within a few seconds.",[213,241,242,245],{},[216,243,244],{},"Check timing of first use."," An origin first used 8 seconds after load gains nothing from a preconnect in the head.",[205,247,249],{"id":248},"root-cause-analysis","Root Cause Analysis",[15,251,252,255],{},[216,253,254],{},"1. Late-discovered origins."," Fonts referenced in CSS, images set by JavaScript and API calls made after hydration reveal their origins late, so setup starts late.",[15,257,258,261],{},[216,259,260],{},"2. Over-preconnecting."," Preconnecting to every third party opens many sockets during load, competing with the main origin and LCP resources.",[15,263,264,271,272,274],{},[216,265,266,267,270],{},"3. Missing ",[33,268,269],{},"crossorigin"," on preconnect."," Fonts and CORS fetches use credentials-less CORS connections; a preconnect without ",[33,273,269],{}," opens the wrong kind of connection, which is then not reused.",[15,276,277,280],{},[216,278,279],{},"4. Preconnecting to origins not used early."," The connection times out before it is used.",[15,282,283],{},[44,284,51,287,51,290,51,292,51,294,51,297,51,299,51,303,51,309,51,313,51,316,51,319,51,322,51,326,51,330,51,332,51,336,51,340,51,343,51,346,51,350,51,352,51,355,51,357,51,360,51,363,51,367,51,369,51,372,51,374,51,377,51,380,51,384,51,386,51,389,51,391,51],{"viewBox":285,"width":47,"role":48,"ariaLabel":286,"style":50},"0 0 760 228","Comparison of dns-prefetch and preconnect by what they do, typical saving on mobile, cost, and when to use them.",[53,288],{"className":289,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],[60,291,5],{},[64,293,286],{},[53,295],{"x":68,"y":68,"width":69,"height":296,"rx":71,"fill":72,"stroke":73,"style":74},"226",[76,298,5],{"x":78,"y":79,"fill":73,"style":80},[53,300],{"x":78,"y":89,"width":301,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},"145.9","30.0",[76,304,308],{"x":305,"y":306,"fill":73,"style":84,"textAnchor":307},"38.0","75.5","start","Aspect",[53,310],{"x":311,"y":89,"width":312,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},"173.9","279.1",[76,314,35],{"x":315,"y":306,"fill":73,"style":84,"textAnchor":99},"313.4",[53,317],{"x":318,"y":89,"width":312,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},"453.0",[76,320,39],{"x":321,"y":306,"fill":73,"style":84,"textAnchor":99},"592.5",[53,323],{"x":78,"y":324,"width":301,"height":302,"rx":57,"fill":72,"stroke":73,"style":325},"86.0","stroke-opacity:0.35",[76,327,329],{"x":305,"y":328,"fill":73,"style":84,"textAnchor":307},"105.5","Work done early",[53,331],{"x":311,"y":324,"width":312,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},[76,333,335],{"x":315,"y":328,"fill":73,"style":334,"textAnchor":99},"font-size:12px","DNS only",[53,337],{"x":318,"y":324,"width":312,"height":302,"rx":57,"fill":338,"stroke":338,"style":339},"#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[76,341,342],{"x":321,"y":328,"fill":73,"style":334,"textAnchor":99},"DNS + TCP + TLS",[53,344],{"x":78,"y":345,"width":301,"height":302,"rx":57,"fill":72,"stroke":73,"style":325},"116.0",[76,347,349],{"x":305,"y":348,"fill":73,"style":84,"textAnchor":307},"135.5","Typical mobile saving",[53,351],{"x":311,"y":345,"width":312,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},[76,353,354],{"x":315,"y":348,"fill":73,"style":334,"textAnchor":99},"50-150ms",[53,356],{"x":318,"y":345,"width":312,"height":302,"rx":57,"fill":338,"stroke":338,"style":339},[76,358,359],{"x":321,"y":348,"fill":73,"style":334,"textAnchor":99},"200-500ms",[53,361],{"x":78,"y":362,"width":301,"height":302,"rx":57,"fill":72,"stroke":73,"style":325},"146.0",[76,364,366],{"x":305,"y":365,"fill":73,"style":84,"textAnchor":307},"165.5","Cost",[53,368],{"x":311,"y":362,"width":312,"height":302,"rx":57,"fill":338,"stroke":338,"style":339},[76,370,371],{"x":315,"y":365,"fill":73,"style":334,"textAnchor":99},"negligible",[53,373],{"x":318,"y":362,"width":312,"height":302,"rx":57,"fill":73,"stroke":73,"style":93},[76,375,376],{"x":321,"y":365,"fill":73,"style":334,"textAnchor":99},"socket + CPU, ~10s lifetime",[53,378],{"x":78,"y":379,"width":301,"height":302,"rx":57,"fill":72,"stroke":73,"style":325},"176.0",[76,381,383],{"x":305,"y":382,"fill":73,"style":84,"textAnchor":307},"195.5","Use for",[53,385],{"x":311,"y":379,"width":312,"height":302,"rx":57,"fill":338,"stroke":338,"style":339},[76,387,388],{"x":315,"y":382,"fill":73,"style":334,"textAnchor":99},"many likely origins",[53,390],{"x":318,"y":379,"width":312,"height":302,"rx":57,"fill":338,"stroke":338,"style":339},[76,392,393],{"x":321,"y":382,"fill":73,"style":334,"textAnchor":99},"1-3 critical origins used early",[205,395,397],{"id":396},"step-by-step-resolution","Step-by-Step Resolution",[399,400,402],"h3",{"id":401},"_1-preconnect-to-the-few-origins-needed-for-first-render","1. Preconnect to the few origins needed for first render",[404,405,410],"pre",{"className":406,"code":407,"language":408,"meta":409,"style":409},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fimages.example-cdn.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.example-cdn.com\" crossorigin>\n\u003C!-- trade-off: each preconnect opens a socket the browser may close after ~10s\n     if unused. Limit preconnects to origins requested within the first couple of\n     seconds — typically the image CDN and the font host. -->\n","html","",[33,411,412,446,471,478,484],{"__ignoreMap":409},[413,414,416,420,424,428,431,435,438,440,443],"span",{"class":161,"line":415},1,[413,417,419],{"class":418},"saISM","\u003C",[413,421,423],{"class":422},"sZBmE","link",[413,425,427],{"class":426},"sPXB4"," rel",[413,429,430],{"class":418},"=",[413,432,434],{"class":433},"sZ8jY","\"preconnect\"",[413,436,437],{"class":426}," href",[413,439,430],{"class":418},[413,441,442],{"class":433},"\"https:\u002F\u002Fimages.example-cdn.com\"",[413,444,445],{"class":418},">\n",[413,447,449,451,453,455,457,459,461,463,466,469],{"class":161,"line":448},2,[413,450,419],{"class":418},[413,452,423],{"class":422},[413,454,427],{"class":426},[413,456,430],{"class":418},[413,458,434],{"class":433},[413,460,437],{"class":426},[413,462,430],{"class":418},[413,464,465],{"class":433},"\"https:\u002F\u002Ffonts.example-cdn.com\"",[413,467,468],{"class":426}," crossorigin",[413,470,445],{"class":418},[413,472,474],{"class":161,"line":473},3,[413,475,477],{"class":476},"sjfSM","\u003C!-- trade-off: each preconnect opens a socket the browser may close after ~10s\n",[413,479,481],{"class":161,"line":480},4,[413,482,483],{"class":476},"     if unused. Limit preconnects to origins requested within the first couple of\n",[413,485,487],{"class":161,"line":486},5,[413,488,489],{"class":476},"     seconds — typically the image CDN and the font host. -->\n",[15,491,492],{},"Expected outcome: the first request to each of these origins starts with a warm connection, saving 200–500ms on mobile.",[399,494,496],{"id":495},"_2-use-dns-prefetch-for-likely-but-later-origins","2. Use dns-prefetch for likely but later origins",[404,498,500],{"className":406,"code":499,"language":408,"meta":409,"style":409},"\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fapi.analytics.example.com\">\n\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fwidget.chat.example.com\">\n\u003C!-- trade-off: DNS results are cached briefly; prefetching origins used much\n     later saves little. Use it for origins used within the session's first\n     minute, not for everything. -->\n",[33,501,502,524,545,550,555],{"__ignoreMap":409},[413,503,504,506,508,510,512,515,517,519,522],{"class":161,"line":415},[413,505,419],{"class":418},[413,507,423],{"class":422},[413,509,427],{"class":426},[413,511,430],{"class":418},[413,513,514],{"class":433},"\"dns-prefetch\"",[413,516,437],{"class":426},[413,518,430],{"class":418},[413,520,521],{"class":433},"\"https:\u002F\u002Fapi.analytics.example.com\"",[413,523,445],{"class":418},[413,525,526,528,530,532,534,536,538,540,543],{"class":161,"line":448},[413,527,419],{"class":418},[413,529,423],{"class":422},[413,531,427],{"class":426},[413,533,430],{"class":418},[413,535,514],{"class":433},[413,537,437],{"class":426},[413,539,430],{"class":418},[413,541,542],{"class":433},"\"https:\u002F\u002Fwidget.chat.example.com\"",[413,544,445],{"class":418},[413,546,547],{"class":161,"line":473},[413,548,549],{"class":476},"\u003C!-- trade-off: DNS results are cached briefly; prefetching origins used much\n",[413,551,552],{"class":161,"line":480},[413,553,554],{"class":476},"     later saves little. Use it for origins used within the session's first\n",[413,556,557],{"class":161,"line":486},[413,558,559],{"class":476},"     minute, not for everything. -->\n",[399,561,563],{"id":562},"_3-match-the-connection-mode","3. Match the connection mode",[15,565,566,567,570,571,573],{},"Fonts are always fetched in CORS mode; ",[33,568,569],{},"fetch()"," calls with default settings to other origins are CORS too. Add ",[33,572,269],{}," to preconnects for those origins. For images and scripts loaded without CORS, omit it. If both kinds of requests go to one origin, you may need two preconnects.",[399,575,577],{"id":576},"_4-remove-the-need-where-you-can","4. Remove the need where you can",[15,579,580,581,585],{},"The cheapest connection is the one you never open: serve images and fonts from your main origin via CDN path rules, so they reuse the existing connection. See ",[19,582,584],{"href":583},"\u002Fcore-web-vitals-measurement\u002Ffont-loading-and-text-rendering-performance\u002Fself-hosting-google-fonts\u002F","self-hosting Google Fonts",".",[15,587,588],{},[44,589,51,592,51,595,51,598,51,600,51,617,51,620,51,622,51,627,51,633,51,636,51,641,51,648,51,654,51,658,51,663,51,666,51,670,51,672,51,675,51,678,51,681,51,684,51,687,51,690,51,694,51,696,51,698,51,701,51,704,51,708,51,711,51,714,51],{"viewBox":590,"width":47,"role":48,"ariaLabel":591,"style":50},"0 0 760 325","Decision sequence for choosing preconnect, dns-prefetch or no hint for a third-party origin.",[53,593],{"className":594,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],[60,596,597],{},"Which hint for this origin?",[64,599,591],{},[601,602,603],"defs",{},[604,605,612],"marker",{"id":606,"viewBox":607,"refX":608,"refY":609,"markerWidth":610,"markerHeight":610,"orient":611},"fad57b20bd","0 0 10 10","9","5","7","auto-start-reverse",[613,614],"path",{"d":615,"fill":73,"style":616},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[53,618],{"x":68,"y":68,"width":69,"height":619,"rx":71,"fill":72,"stroke":73,"style":74},"323",[76,621,597],{"x":78,"y":79,"fill":73,"style":80},[53,623],{"x":78,"y":89,"width":624,"height":625,"rx":626,"fill":73,"stroke":73,"style":93},"320.0","35.0","6",[76,628,632],{"x":629,"y":630,"fill":73,"style":631,"textAnchor":99},"188.0","78.0","font-size:13px;font-weight:700","Can the resource be served from your own origin?",[53,634],{"x":635,"y":89,"width":624,"height":625,"rx":626,"fill":338,"stroke":338,"style":339},"412.0",[76,637,640],{"x":638,"y":630,"fill":73,"style":639,"textAnchor":99},"572.0","font-size:12.5px","Do that — no hint needed",[161,642],{"x1":643,"y1":97,"x2":644,"y2":97,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"348.0","410.0","1.5","stroke-opacity:0.6","url(#fad57b20bd)",[76,649,653],{"x":650,"y":651,"fill":338,"style":652,"textAnchor":99},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[161,655],{"x1":629,"y1":656,"x2":629,"y2":657,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"91.0","125.0",[76,659,662],{"x":660,"y":661,"fill":171,"style":652},"196.0","113.0","no",[53,664],{"x":78,"y":665,"width":624,"height":625,"rx":626,"fill":73,"stroke":73,"style":93},"127.0",[76,667,669],{"x":629,"y":668,"fill":73,"style":631,"textAnchor":99},"149.0","Needed for first render (LCP, fonts, critical CSS)?",[53,671],{"x":635,"y":665,"width":624,"height":625,"rx":626,"fill":338,"stroke":338,"style":339},[76,673,674],{"x":638,"y":668,"fill":73,"style":639,"textAnchor":99},"preconnect (crossorigin if CORS)",[161,676],{"x1":643,"y1":677,"x2":644,"y2":677,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"144.5",[76,679,653],{"x":650,"y":680,"fill":338,"style":652,"textAnchor":99},"137.5",[161,682],{"x1":629,"y1":683,"x2":629,"y2":660,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"162.0",[76,685,662],{"x":660,"y":686,"fill":171,"style":652},"184.0",[53,688],{"x":78,"y":689,"width":624,"height":625,"rx":626,"fill":73,"stroke":73,"style":93},"198.0",[76,691,693],{"x":629,"y":692,"fill":73,"style":631,"textAnchor":99},"220.0","Used in the first minute but not render-critical?",[53,695],{"x":635,"y":689,"width":624,"height":625,"rx":626,"fill":338,"stroke":338,"style":339},[76,697,35],{"x":638,"y":692,"fill":73,"style":639,"textAnchor":99},[161,699],{"x1":643,"y1":700,"x2":644,"y2":700,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"215.5",[76,702,653],{"x":650,"y":703,"fill":338,"style":652,"textAnchor":99},"208.5",[161,705],{"x1":629,"y1":706,"x2":629,"y2":707,"stroke":73,"strokeWidth":645,"style":646,"markerEnd":647},"233.0","267.0",[76,709,662],{"x":660,"y":710,"fill":171,"style":652},"255.0",[53,712],{"x":78,"y":713,"width":624,"height":79,"rx":626,"fill":121,"stroke":122,"style":123},"269.0",[76,715,85],{"x":629,"y":716,"fill":73,"style":639,"textAnchor":99},"290.5",[205,718,720],{"id":719},"verification","Verification",[15,722,723],{},"In a throttled trace, the first request to a preconnected origin should show zero (or near-zero) DNS, connection and SSL time in its Timing tab. The console should show no \"preconnected but not used\" warnings. Compare LCP before and after for templates where the LCP image or font comes from a third-party origin.",[205,725,727],{"id":726},"worked-example-image-cdn-and-fonts","Worked Example: Image CDN and Fonts",[15,729,730,731,733,734,737],{},"A travel site loaded its hero images from an image CDN and fonts from a separate font host, with no hints. On mobile, the hero request spent 410ms on connection setup and the font request 380ms. Adding ",[33,732,39],{}," to the image CDN and ",[33,735,736],{},"preconnect crossorigin"," to the font host — and removing seven preconnects to analytics and ad origins that had been added \"for speed\" — cut LCP p75 by 280ms. Later, moving fonts to the main origin removed the font preconnect altogether.",[205,739,741],{"id":740},"hints-in-http-headers-and-early-hints","Hints in HTTP Headers and Early Hints",[15,743,744,745,748,749,752,753,756,757,761,762,766],{},"Hints can be sent as HTTP ",[33,746,747],{},"Link"," headers instead of HTML elements: ",[33,750,751],{},"Link: \u003Chttps:\u002F\u002Fimages.example-cdn.com>; rel=preconnect",". In the HTML response, that only helps marginally (the browser sees headers slightly before the body). With ",[216,754,755],{},"103 Early Hints",", though, the server or CDN can send preconnect and preload hints ",[758,759,760],"em",{},"before"," the final response is ready, so connection setup overlaps server think time — see ",[19,763,765],{"href":764},"\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",". Preconnects are especially well suited to Early Hints because they are cheap to send and do not depend on page-specific asset URLs.",[205,768,770],{"id":769},"common-mistakes","Common Mistakes",[210,772,773,779,788,794],{},[213,774,775,778],{},[216,776,777],{},"Preconnecting to a dozen origins."," Beyond a few, preconnects compete with critical requests.",[213,780,781,787],{},[216,782,783,784,786],{},"Forgetting ",[33,785,269],{}," for fonts."," The warm connection goes unused and a new one is opened.",[213,789,790,793],{},[216,791,792],{},"Preconnecting to your own origin."," The browser is already connected to it.",[213,795,796,799],{},[216,797,798],{},"Using both hints for the same origin \"to be safe\"."," Preconnect includes DNS; the extra hint adds nothing in modern browsers.",[205,801,803],{"id":802},"edge-cases","Edge Cases",[15,805,806,809,810,585],{},[216,807,808],{},"HTTP\u002F2 connection coalescing."," Origins sharing an IP and certificate may reuse one connection, making a separate preconnect unnecessary — see ",[19,811,813],{"href":812},"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fconnection-coalescing-and-certificates\u002F","connection coalescing and certificates",[15,815,816,819],{},[216,817,818],{},"HTTP\u002F3."," QUIC combines transport and TLS handshakes, so cold connections are faster, but preconnect still helps.",[15,821,822,825],{},[216,823,824],{},"Privacy."," Preconnects reveal to third parties that a page was loaded even if the resource is never requested; consider consent requirements for tracking origins.",[15,827,828,831],{},[216,829,830],{},"Mobile radio wake-up."," On cellular networks the first packet after idle also pays radio wake-up time; early hints reduce its impact on the critical path.",[205,833,835],{"id":834},"faq","FAQ",[837,838,841,845],"details",{"className":839},[840],"faq-item",[842,843,844],"summary",{},"Is dns-prefetch still useful when preconnect exists?",[15,846,847],{},"Yes — as a cheap hint for origins that are likely but not critical, and as a fallback in very old browsers. For critical origins, preconnect supersedes it.",[837,849,851,854],{"className":850},[840],[842,852,853],{},"How many preconnects are too many?",[15,855,856],{},"More than three to four is usually counterproductive on mobile. Prioritise origins that serve LCP resources and fonts.",[837,858,860,863],{"className":859},[840],[842,861,862],{},"Does preconnect help if the origin is requested immediately anyway?",[15,864,865,866,869],{},"Only if the hint is discovered earlier than the request. A preconnect in the head helps resources referenced deep in CSS or added by JavaScript; for an ",[33,867,868],{},"\u003Cimg>"," early in the HTML, the request itself starts almost as soon.",[837,871,873,876],{"className":872},[840],[842,874,875],{},"Should preconnects be in HTML or HTTP headers?",[15,877,878],{},"Either works. Headers are slightly earlier and are the only option for 103 Early Hints; HTML elements are easier to manage per template.",[837,880,882,885],{"className":881},[840],[842,883,884],{},"Do preconnects affect INP?",[15,886,887],{},"Not meaningfully. Connection setup happens off the main thread; the concern is network contention during load, which affects LCP.",[837,889,891,894],{"className":890},[840],[842,892,893],{},"Can I preconnect conditionally?",[15,895,896],{},"Yes — add the link element from JavaScript when a user shows intent (hovering a button that opens a third-party widget), so the connection is warm by the time they click.",[837,898,900,903],{"className":899},[840],[842,901,902],{},"Can the same origin need both CORS and non-CORS preconnects?",[15,904,905],{},"Yes, if it serves both CORS requests (fonts, fetch) and non-CORS ones (images, classic scripts). Browsers keep separate connection pools for the two modes, so one preconnect covers only one of them. Add both only if both kinds of request happen early.",[205,907,909],{"id":908},"related","Related",[210,911,912,919,926],{},[213,913,914,918],{},[19,915,917],{"href":916},"\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"," — the next decision up.",[213,920,921,925],{},[19,922,924],{"href":923},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreloading-web-fonts-with-crossorigin\u002F","Preloading web fonts with crossorigin"," — why connection modes matter for fonts.",[213,927,928,932],{},[19,929,931],{"href":930},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fthird-party-script-performance\u002Fself-hosting-third-party-scripts\u002F","Self-hosting third-party scripts"," — removing origins instead of warming them.",[934,935,937],"script",{"type":936},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"dns-prefetch vs preconnect: Choosing the Right Connection Hint\",\n  \"description\": \"How the two connection-warming hints differ, what each saves on mobile networks, and how to choose without wasting sockets.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Preconnect to the few origins needed for first render\",\n      \"text\": \"Expected outcome: the first request to each of these origins starts with a warm connection, saving 200–500ms on mobile.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Use dns-prefetch for likely but later origins\",\n      \"text\": \"Use dns-prefetch for likely but later origins\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Match the connection mode\",\n      \"text\": \"Fonts are always fetched in CORS mode; fetch() calls with default settings to other origins are CORS too.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Remove the need where you can\",\n      \"text\": \"The cheapest connection is the one you never open: serve images and fonts from your main origin via CDN path rules, so they reuse the existing connection.\"\n    }\n  ]\n}\n",[934,939,940],{"type":936},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"dns-prefetch vs preconnect: Choosing the Right Connection Hint\",\n  \"description\": \"How the two connection-warming hints differ, what each saves on mobile networks, and how to choose without wasting sockets.\",\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\u002Fdns-prefetch-vs-preconnect\u002F\"\n  }\n}\n",[934,942,943],{"type":936},"\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\": \"dns-prefetch vs preconnect\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect\u002F\"\n    }\n  ]\n}\n",[945,946,947],"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);}",{"title":409,"searchDepth":448,"depth":448,"links":949},[950,951,952,958,959,960,961,962,963,964],{"id":207,"depth":448,"text":208},{"id":248,"depth":448,"text":249},{"id":396,"depth":448,"text":397,"children":953},[954,955,956,957],{"id":401,"depth":473,"text":402},{"id":495,"depth":473,"text":496},{"id":562,"depth":473,"text":563},{"id":576,"depth":473,"text":577},{"id":719,"depth":448,"text":720},{"id":726,"depth":448,"text":727},{"id":740,"depth":448,"text":741},{"id":769,"depth":448,"text":770},{"id":802,"depth":448,"text":803},{"id":834,"depth":448,"text":835},{"id":908,"depth":448,"text":909},"How the two connection-warming hints differ, what each saves on mobile networks, and how to choose without wasting sockets.","md",{"slug":968,"type":969,"breadcrumb":970,"datePublished":978,"dateModified":978},"dns-prefetch-vs-preconnect","article",[971,974,975,976],{"name":972,"url":973},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":977},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect\u002F","2026-10-06",true,"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect",{"title":982,"description":983},"dns-prefetch vs preconnect: Which Hint and When","dns-prefetch resolves a hostname early; preconnect also opens TCP and TLS. Compare cost, savings and limits, and choose the right hint for each third-party origin.","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fdns-prefetch-vs-preconnect\u002Findex","9l_qjC8eI1fJiJCyx-0I6hUbzNhl5_Xc88QAmIy8WlU",[987,990],{"title":22,"path":988,"stem":989,"children":-1},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Findex",{"title":991,"path":992,"stem":993,"children":-1},"fetchpriority for Scripts and fetch() Requests","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests","advanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002Findex",1791308072172]