[{"data":1,"prerenderedAt":1235},["ShallowReactive",2],{"content:\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay":3,"surroundings:\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay":1227},{"id":4,"title":5,"body":6,"description":1207,"extension":1208,"meta":1209,"navigation":564,"path":1221,"seo":1222,"stem":1225,"__hash__":1226},"content\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002Findex.md","Diagnosing LCP Resource Load Delay",{"type":7,"value":8,"toc":1193},"minimark",[9,14,39,47,195,200,238,242,268,274,280,289,452,456,461,475,638,641,645,690,693,697,800,808,812,819,864,867,939,943,946,957,1058,1065,1069,1085,1102,1108,1122,1126,1138,1151,1155,1178,1183,1186,1189],[10,11,13],"h1",{"id":12},"how-to-diagnose-and-fix-lcp-resource-load-delay","How to Diagnose and Fix LCP Resource Load Delay",[15,16,17,18,23,24,28,29,33,34,38],"p",{},"This guide zooms in on one phase of the model in ",[19,20,22],"a",{"href":21},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Measuring LCP with Chrome DevTools",", within ",[19,25,27],{"href":26},"\u002Fcore-web-vitals-measurement\u002F","Core Web Vitals & Measurement",". LCP for an image splits into four parts: time to first byte, ",[30,31,32],"strong",{},"resource load delay",", resource load duration, and element render delay. Load delay is the time between the first byte of the HTML arriving and the browser ",[35,36,37],"em",{},"starting"," to request the LCP image.",[15,40,41,42,46],{},"It is the phase most often overlooked because nothing is \"slow\" during it — no request is in flight for the image at all. Yet on real pages it commonly accounts for 30–50% of LCP. A well-optimised page keeps load delay under roughly 10% of total LCP; at the ",[43,44,45],"code",{},"2.5s"," budget that means a few hundred milliseconds at most. When the image request starts at 1.4s, it does not matter how small the image is.",[15,48,49],{},[50,51,57,58,57,65,57,69,57,72,57,81,57,87,57,98,57,103,57,111,57,118,57,124,57,128,57,134,57,138,57,142,57,146,57,151,57,157,57,161,57,165,57,169,57,173,57,177,57,181,57,185,57,189,57],"svg",{"viewBox":52,"width":53,"role":54,"ariaLabel":55,"style":56},"0 0 760 162","100%","img","Timeline of an image LCP of 3.1 seconds in which resource load delay accounts for 1.3 seconds before the image request even starts.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[59,60],"rect",{"className":61,"x":63,"y":63,"width":53,"height":53,"fill":64},[62],"svg-canvas","0","#ffffff",[66,67,68],"title",{},"LCP phases with a dominant load delay",[70,71,55],"desc",{},[59,73],{"x":74,"y":74,"width":75,"height":76,"rx":77,"fill":78,"stroke":79,"style":80},"1","758","160","10","none","currentColor","stroke-opacity:0.18",[82,83,68],"text",{"x":84,"y":85,"fill":79,"style":86},"28.0","34.0","font-size:16px;font-weight:700",[88,89],"line",{"x1":90,"y1":91,"x2":90,"y2":92,"stroke":93,"strokeWidth":94,"strokeDashArray":95,"style":97},"586.2","72.0","118.0","#b8860b","1.5",[96,96],"4","stroke-opacity:0.9",[82,99,102],{"x":84,"y":100,"fill":79,"style":101},"96.0","font-size:12.5px;font-weight:700","Phases",[59,104],{"x":105,"y":106,"width":107,"height":108,"rx":109,"fill":79,"stroke":79,"style":110},"87.5","78.0","118.4","26.0","3","fill-opacity:0.06;stroke-opacity:0.4",[82,112,117],{"x":113,"y":114,"fill":79,"style":115,"textAnchor":116},"146.7","95.5","font-size:11.5px","middle","TTFB",[59,119],{"x":120,"y":106,"width":121,"height":108,"rx":109,"fill":122,"stroke":93,"style":123},"207.4","258.2","#ffc300","fill-opacity:0.24;stroke-opacity:0.9",[82,125,127],{"x":126,"y":114,"fill":79,"style":115,"textAnchor":116},"336.5","load delay",[59,129],{"x":130,"y":106,"width":131,"height":108,"rx":109,"fill":132,"stroke":132,"style":133},"467.1","158.3","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[82,135,137],{"x":136,"y":114,"fill":79,"style":115,"textAnchor":116},"546.2","load duration",[59,139],{"x":140,"y":106,"width":141,"height":108,"rx":109,"fill":79,"stroke":79,"style":110},"626.9","78.4",[82,143,145],{"x":144,"y":114,"fill":79,"style":115,"textAnchor":116},"666.1","render",[88,147],{"x1":148,"y1":92,"x2":149,"y2":92,"stroke":79,"style":150},"86.8","726.0","stroke-opacity:0.4",[82,152,156],{"x":153,"y":154,"fill":155,"style":115,"textAnchor":116},"97.5","135.0","#51617a","0ms",[82,158,160],{"x":159,"y":154,"fill":155,"style":115,"textAnchor":116},"166.7","400ms",[82,162,164],{"x":163,"y":154,"fill":155,"style":115,"textAnchor":116},"246.6","800ms",[82,166,168],{"x":167,"y":154,"fill":155,"style":115,"textAnchor":116},"326.5","1200ms",[82,170,172],{"x":171,"y":154,"fill":155,"style":115,"textAnchor":116},"406.4","1600ms",[82,174,176],{"x":175,"y":154,"fill":155,"style":115,"textAnchor":116},"486.3","2000ms",[82,178,180],{"x":179,"y":154,"fill":155,"style":115,"textAnchor":116},"566.2","2400ms",[82,182,184],{"x":183,"y":154,"fill":155,"style":115,"textAnchor":116},"646.1","2800ms",[82,186,188],{"x":187,"y":154,"fill":155,"style":115,"textAnchor":116},"712.3","3200ms",[82,190,194],{"x":90,"y":191,"fill":192,"style":193,"textAnchor":116},"68.0","#8a6608","font-size:12px;font-weight:700","LCP 2.5s",[196,197,199],"h2",{"id":198},"rapid-diagnosis","Rapid Diagnosis",[201,202,203,210,216,222,228],"ul",{},[204,205,206,209],"li",{},[30,207,208],{},"Get the breakdown."," In the Performance panel, the LCP insight lists the four phases. If \"Load delay\" is the largest or second-largest, continue.",[204,211,212,215],{},[30,213,214],{},"Find the request's initiator."," In the Network panel, click the LCP image and open the Initiator tab. \"Parser\" means discovered from HTML — good. A script file or a stylesheet means late discovery.",[204,217,218,221],{},[30,219,220],{},"Check the priority."," The Priority column should show \"High\" from the start. Images start at \"Low\" and are boosted only after layout confirms they are in the viewport — which may be hundreds of milliseconds later.",[204,223,224,227],{},[30,225,226],{},"Check the connection."," If the image is on another origin, look at the request's Timing tab for DNS, connection and SSL time. Setup on a cold origin is part of load delay.",[204,229,230,233,234,237],{},[30,231,232],{},"Look for lazy loading."," Inspect the element: ",[43,235,236],{},"loading=\"lazy\""," on the LCP image defers the request until layout, by design.",[196,239,241],{"id":240},"root-cause-analysis","Root Cause Analysis",[15,243,244,247,248,251,252,255,256,259,260,263,264,267],{},[30,245,246],{},"1. Late discovery."," The preload scanner reads raw HTML ahead of the parser and starts fetches for ",[43,249,250],{},"\u003Cimg src>",", ",[43,253,254],{},"srcset",", and ",[43,257,258],{},"\u003Clink rel=preload>",". It cannot see images set by JavaScript, CSS ",[43,261,262],{},"background-image",", images rendered by a client framework, or ",[43,265,266],{},"data-src"," lazy-loading patterns. Those requests start only after scripts or styles run.",[15,269,270,273],{},[30,271,272],{},"2. Low initial priority."," Even when discovered early, images begin at low priority. With HTTP\u002F2, the server and browser schedule higher-priority CSS, fonts and scripts first. On a congested connection, the image waits.",[15,275,276,279],{},[30,277,278],{},"3. Connection setup on a separate origin."," An image CDN on its own hostname needs DNS, TCP and TLS before the first byte can be requested — 100–300ms on mobile networks, more on high-latency links.",[15,281,282,285,286,288],{},[30,283,284],{},"4. Lazy loading applied to the LCP image."," Native ",[43,287,236],{}," waits until layout determines the image is near the viewport. JavaScript lazy loaders wait longer still: for the script, then for an IntersectionObserver callback.",[15,290,291],{},[50,292,57,295,57,298,57,301,57,303,57,320,57,323,57,325,57,331,57,336,57,339,57,344,57,351,57,357,57,361,57,366,57,369,57,373,57,375,57,378,57,381,57,384,57,387,57,390,57,393,57,397,57,399,57,402,57,405,57,408,57,412,57,415,57,418,57,422,57,424,57,427,57,430,57,433,57,437,57,440,57,444,57,448,57],{"viewBox":293,"width":53,"role":54,"ariaLabel":294,"style":56},"0 0 760 412","Decision sequence for identifying the cause of resource load delay from the Network panel initiator, priority and timing data.",[59,296],{"className":297,"x":63,"y":63,"width":53,"height":53,"fill":64},[62],[66,299,300],{},"Why did the LCP request start late?",[70,302,294],{},[304,305,306],"defs",{},[307,308,315],"marker",{"id":309,"viewBox":310,"refX":311,"refY":312,"markerWidth":313,"markerHeight":313,"orient":314},"fa0de57009","0 0 10 10","9","5","7","auto-start-reverse",[316,317],"path",{"d":318,"fill":79,"style":319},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[59,321],{"x":74,"y":74,"width":75,"height":322,"rx":77,"fill":78,"stroke":79,"style":80},"410",[82,324,300],{"x":84,"y":85,"fill":79,"style":86},[59,326],{"x":84,"y":327,"width":328,"height":329,"rx":330,"fill":79,"stroke":79,"style":110},"56.0","320.0","35.0","6",[82,332,335],{"x":333,"y":106,"fill":79,"style":334,"textAnchor":116},"188.0","font-size:13px;font-weight:700","Initiator is a script or stylesheet?",[59,337],{"x":338,"y":327,"width":328,"height":329,"rx":330,"fill":132,"stroke":132,"style":133},"412.0",[82,340,343],{"x":341,"y":106,"fill":79,"style":342,"textAnchor":116},"572.0","font-size:12.5px","Late discovery — put the URL in HTML or preload it",[88,345],{"x1":346,"y1":347,"x2":348,"y2":347,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"348.0","73.5","410.0","stroke-opacity:0.6","url(#fa0de57009)",[82,352,356],{"x":353,"y":354,"fill":132,"style":355,"textAnchor":116},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[88,358],{"x1":333,"y1":359,"x2":333,"y2":360,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"91.0","125.0",[82,362,365],{"x":363,"y":364,"fill":155,"style":355},"196.0","113.0","no",[59,367],{"x":84,"y":368,"width":328,"height":329,"rx":330,"fill":79,"stroke":79,"style":110},"127.0",[82,370,372],{"x":333,"y":371,"fill":79,"style":334,"textAnchor":116},"149.0","Has loading=lazy or a JS lazy loader?",[59,374],{"x":338,"y":368,"width":328,"height":329,"rx":330,"fill":132,"stroke":132,"style":133},[82,376,377],{"x":341,"y":371,"fill":79,"style":342,"textAnchor":116},"Remove lazy loading from the LCP image",[88,379],{"x1":346,"y1":380,"x2":348,"y2":380,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"144.5",[82,382,356],{"x":353,"y":383,"fill":132,"style":355,"textAnchor":116},"137.5",[88,385],{"x1":333,"y1":386,"x2":333,"y2":363,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"162.0",[82,388,365],{"x":363,"y":389,"fill":155,"style":355},"184.0",[59,391],{"x":84,"y":392,"width":328,"height":329,"rx":330,"fill":79,"stroke":79,"style":110},"198.0",[82,394,396],{"x":333,"y":395,"fill":79,"style":334,"textAnchor":116},"220.0","Priority starts at Low?",[59,398],{"x":338,"y":392,"width":328,"height":329,"rx":330,"fill":132,"stroke":132,"style":133},[82,400,401],{"x":341,"y":395,"fill":79,"style":342,"textAnchor":116},"Add fetchpriority=high",[88,403],{"x1":346,"y1":404,"x2":348,"y2":404,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"215.5",[82,406,356],{"x":353,"y":407,"fill":132,"style":355,"textAnchor":116},"208.5",[88,409],{"x1":333,"y1":410,"x2":333,"y2":411,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"233.0","267.0",[82,413,365],{"x":363,"y":414,"fill":155,"style":355},"255.0",[59,416],{"x":84,"y":417,"width":328,"height":329,"rx":330,"fill":79,"stroke":79,"style":110},"269.0",[82,419,421],{"x":333,"y":420,"fill":79,"style":334,"textAnchor":116},"291.0","DNS + connect + TLS over 100ms?",[59,423],{"x":338,"y":417,"width":328,"height":329,"rx":330,"fill":132,"stroke":132,"style":133},[82,425,426],{"x":341,"y":420,"fill":79,"style":342,"textAnchor":116},"Preconnect or serve from the main origin",[88,428],{"x1":346,"y1":429,"x2":348,"y2":429,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"286.5",[82,431,356],{"x":353,"y":432,"fill":132,"style":355,"textAnchor":116},"279.5",[88,434],{"x1":333,"y1":435,"x2":333,"y2":436,"stroke":79,"strokeWidth":94,"style":349,"markerEnd":350},"304.0","338.0",[82,438,365],{"x":363,"y":439,"fill":155,"style":355},"326.0",[59,441],{"x":84,"y":442,"width":328,"height":443,"rx":330,"fill":122,"stroke":93,"style":123},"340.0","50.0",[82,445,447],{"x":333,"y":446,"fill":79,"style":342,"textAnchor":116},"361.5","Check for bandwidth contention from other early",[82,449,451],{"x":333,"y":450,"fill":79,"style":342,"textAnchor":116},"377.5","requests",[196,453,455],{"id":454},"step-by-step-resolution","Step-by-Step Resolution",[457,458,460],"h3",{"id":459},"_1-make-the-lcp-image-discoverable-in-the-html","1. Make the LCP image discoverable in the HTML",[15,462,463,464,467,468,471,472,474],{},"Render a real ",[43,465,466],{},"\u003Cimg>"," with a real ",[43,469,470],{},"src"," (and ",[43,473,254],{},") in the server response. If the image must remain a CSS background or is chosen by JavaScript, add a preload.",[476,477,482],"pre",{"className":478,"code":479,"language":480,"meta":481,"style":481},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003C!-- Preferred: a plain img in the HTML is found by the preload scanner. -->\n\u003Cimg src=\"\u002Fimg\u002Fhero-1200.avif\" srcset=\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w\"\n     sizes=\"(max-width: 700px) 100vw, 1200px\" width=\"1200\" height=\"630\" alt=\"…\">\n\n\u003C!-- When it cannot be: preload with the same srcset\u002Fsizes so the right file is fetched. -->\n\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fimg\u002Fhero-1200.avif\"\n      imagesrcset=\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w\"\n      imagesizes=\"(max-width: 700px) 100vw, 1200px\">\n\u003C!-- trade-off: a preload whose srcset differs from the eventual img fetches a\n     DIFFERENT file and doubles the bytes. Keep them generated from one source. -->\n","html","",[43,483,484,492,521,559,566,572,604,614,626,632],{"__ignoreMap":481},[485,486,488],"span",{"class":88,"line":487},1,[485,489,491],{"class":490},"sjfSM","\u003C!-- Preferred: a plain img in the HTML is found by the preload scanner. -->\n",[485,493,495,499,502,506,509,513,516,518],{"class":88,"line":494},2,[485,496,498],{"class":497},"saISM","\u003C",[485,500,54],{"class":501},"sZBmE",[485,503,505],{"class":504},"sPXB4"," src",[485,507,508],{"class":497},"=",[485,510,512],{"class":511},"sZ8jY","\"\u002Fimg\u002Fhero-1200.avif\"",[485,514,515],{"class":504}," srcset",[485,517,508],{"class":497},[485,519,520],{"class":511},"\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w\"\n",[485,522,524,527,529,532,535,537,540,543,545,548,551,553,556],{"class":88,"line":523},3,[485,525,526],{"class":504},"     sizes",[485,528,508],{"class":497},[485,530,531],{"class":511},"\"(max-width: 700px) 100vw, 1200px\"",[485,533,534],{"class":504}," width",[485,536,508],{"class":497},[485,538,539],{"class":511},"\"1200\"",[485,541,542],{"class":504}," height",[485,544,508],{"class":497},[485,546,547],{"class":511},"\"630\"",[485,549,550],{"class":504}," alt",[485,552,508],{"class":497},[485,554,555],{"class":511},"\"…\"",[485,557,558],{"class":497},">\n",[485,560,562],{"class":88,"line":561},4,[485,563,565],{"emptyLinePlaceholder":564},true,"\n",[485,567,569],{"class":88,"line":568},5,[485,570,571],{"class":490},"\u003C!-- When it cannot be: preload with the same srcset\u002Fsizes so the right file is fetched. -->\n",[485,573,575,577,580,583,585,588,591,593,596,599,601],{"class":88,"line":574},6,[485,576,498],{"class":497},[485,578,579],{"class":501},"link",[485,581,582],{"class":504}," rel",[485,584,508],{"class":497},[485,586,587],{"class":511},"\"preload\"",[485,589,590],{"class":504}," as",[485,592,508],{"class":497},[485,594,595],{"class":511},"\"image\"",[485,597,598],{"class":504}," href",[485,600,508],{"class":497},[485,602,603],{"class":511},"\"\u002Fimg\u002Fhero-1200.avif\"\n",[485,605,607,610,612],{"class":88,"line":606},7,[485,608,609],{"class":504},"      imagesrcset",[485,611,508],{"class":497},[485,613,520],{"class":511},[485,615,617,620,622,624],{"class":88,"line":616},8,[485,618,619],{"class":504},"      imagesizes",[485,621,508],{"class":497},[485,623,531],{"class":511},[485,625,558],{"class":497},[485,627,629],{"class":88,"line":628},9,[485,630,631],{"class":490},"\u003C!-- trade-off: a preload whose srcset differs from the eventual img fetches a\n",[485,633,635],{"class":88,"line":634},10,[485,636,637],{"class":490},"     DIFFERENT file and doubles the bytes. Keep them generated from one source. -->\n",[15,639,640],{},"Expected outcome: the request's initiator becomes \"Parser\" or the preload link, and load delay drops to near the HTML arrival time — often a 500ms–1.5s improvement for client-rendered heroes.",[457,642,644],{"id":643},"_2-raise-the-priority","2. Raise the priority",[476,646,648],{"className":478,"code":647,"language":480,"meta":481,"style":481},"\u003Cimg src=\"\u002Fimg\u002Fhero-1200.avif\" fetchpriority=\"high\" …>\n\u003C!-- trade-off: fetchpriority=high on more than one or two images defeats the\n     purpose — they compete with each other and with CSS. Use it only on the\n     element you intend to be LCP. -->\n",[43,649,650,675,680,685],{"__ignoreMap":481},[485,651,652,654,656,658,660,662,665,667,670,673],{"class":88,"line":487},[485,653,498],{"class":497},[485,655,54],{"class":501},[485,657,505],{"class":504},[485,659,508],{"class":497},[485,661,512],{"class":511},[485,663,664],{"class":504}," fetchpriority",[485,666,508],{"class":497},[485,668,669],{"class":511},"\"high\"",[485,671,672],{"class":504}," …",[485,674,558],{"class":497},[485,676,677],{"class":88,"line":494},[485,678,679],{"class":490},"\u003C!-- trade-off: fetchpriority=high on more than one or two images defeats the\n",[485,681,682],{"class":88,"line":523},[485,683,684],{"class":490},"     purpose — they compete with each other and with CSS. Use it only on the\n",[485,686,687],{"class":88,"line":561},[485,688,689],{"class":490},"     element you intend to be LCP. -->\n",[15,691,692],{},"Expected outcome: the image starts at \"High\" priority instead of being boosted after layout; typical savings are 100–400ms on congested connections.",[457,694,696],{"id":695},"_3-remove-lazy-loading-from-above-the-fold-images","3. Remove lazy loading from above-the-fold images",[476,698,702],{"className":699,"code":700,"language":701,"meta":481,"style":481},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Component-level rule: the first N images in the main content are eager.\nfunction imgProps(index) {\n  return index \u003C 1\n    ? { loading: 'eager', fetchpriority: 'high', decoding: 'async' }\n    : { loading: 'lazy', decoding: 'async' };\n}\n\u002F\u002F trade-off: \"first N\" is a heuristic. On layouts where the LCP image is not\n\u002F\u002F the first in source order (a side-by-side hero), mark it explicitly instead.\n","javascript",[43,703,704,709,729,742,768,785,790,795],{"__ignoreMap":481},[485,705,706],{"class":88,"line":487},[485,707,708],{"class":490},"\u002F\u002F Component-level rule: the first N images in the main content are eager.\n",[485,710,711,715,719,722,726],{"class":88,"line":494},[485,712,714],{"class":713},"sPARh","function",[485,716,718],{"class":717},"smZ65"," imgProps",[485,720,721],{"class":497},"(",[485,723,725],{"class":724},"sQw3B","index",[485,727,728],{"class":497},") {\n",[485,730,731,734,737,739],{"class":88,"line":523},[485,732,733],{"class":713},"  return",[485,735,736],{"class":497}," index ",[485,738,498],{"class":713},[485,740,741],{"class":504}," 1\n",[485,743,744,747,750,753,756,759,762,765],{"class":88,"line":561},[485,745,746],{"class":713},"    ?",[485,748,749],{"class":497}," { loading: ",[485,751,752],{"class":511},"'eager'",[485,754,755],{"class":497},", fetchpriority: ",[485,757,758],{"class":511},"'high'",[485,760,761],{"class":497},", decoding: ",[485,763,764],{"class":511},"'async'",[485,766,767],{"class":497}," }\n",[485,769,770,773,775,778,780,782],{"class":88,"line":568},[485,771,772],{"class":713},"    :",[485,774,749],{"class":497},[485,776,777],{"class":511},"'lazy'",[485,779,761],{"class":497},[485,781,764],{"class":511},[485,783,784],{"class":497}," };\n",[485,786,787],{"class":88,"line":574},[485,788,789],{"class":497},"}\n",[485,791,792],{"class":88,"line":606},[485,793,794],{"class":490},"\u002F\u002F trade-off: \"first N\" is a heuristic. On layouts where the LCP image is not\n",[485,796,797],{"class":88,"line":616},[485,798,799],{"class":490},"\u002F\u002F the first in source order (a side-by-side hero), mark it explicitly instead.\n",[15,801,802,803,807],{},"Expected outcome: no lazy attribute on the LCP image; ",[19,804,806],{"href":805},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Ffixing-lazy-loaded-images-that-delay-lcp\u002F","fixing lazy-loaded images that delay LCP"," covers loader libraries that hide this.",[457,809,811],{"id":810},"_4-remove-or-warm-the-cross-origin-connection","4. Remove or warm the cross-origin connection",[15,813,814,815,818],{},"Serve hero images from the main origin through a CDN path rule (",[43,816,817],{},"\u002Fimg\u002F*"," routed to the image service), or preconnect to the image host early in the head.",[476,820,822],{"className":478,"code":821,"language":480,"meta":481,"style":481},"\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fimages.example-cdn.com\" crossorigin>\n\u003C!-- trade-off: preconnect opens a socket whether or not it is used; an unused\n     preconnect wastes a connection slot. Only preconnect to origins needed for\n     above-the-fold content on THIS template. -->\n",[43,823,824,849,854,859],{"__ignoreMap":481},[485,825,826,828,830,832,834,837,839,841,844,847],{"class":88,"line":487},[485,827,498],{"class":497},[485,829,579],{"class":501},[485,831,582],{"class":504},[485,833,508],{"class":497},[485,835,836],{"class":511},"\"preconnect\"",[485,838,598],{"class":504},[485,840,508],{"class":497},[485,842,843],{"class":511},"\"https:\u002F\u002Fimages.example-cdn.com\"",[485,845,846],{"class":504}," crossorigin",[485,848,558],{"class":497},[485,850,851],{"class":88,"line":494},[485,852,853],{"class":490},"\u003C!-- trade-off: preconnect opens a socket whether or not it is used; an unused\n",[485,855,856],{"class":88,"line":523},[485,857,858],{"class":490},"     preconnect wastes a connection slot. Only preconnect to origins needed for\n",[485,860,861],{"class":88,"line":561},[485,862,863],{"class":490},"     above-the-fold content on THIS template. -->\n",[15,865,866],{},"Expected outcome: DNS, connect and TLS disappear from the image's timing on the first request, saving 100–300ms on mobile.",[15,868,869],{},[50,870,57,873,57,876,57,879,57,881,57,884,57,886,57,893,57,899,57,904,57,908,57,913,57,917,57,921,57,924,57,928,57,932,57,935,57],{"viewBox":871,"width":53,"role":54,"ariaLabel":872,"style":56},"0 0 760 194","Bar chart of resource load delay falling from 1300 milliseconds to 160 milliseconds as each fix is applied cumulatively.",[59,874],{"className":875,"x":63,"y":63,"width":53,"height":53,"fill":64},[62],[66,877,878],{},"Load delay after each fix (mobile, Fast 4G)",[70,880,872],{},[59,882],{"x":74,"y":74,"width":75,"height":883,"rx":77,"fill":78,"stroke":79,"style":80},"192",[82,885,878],{"x":84,"y":85,"fill":79,"style":86},[82,887,892],{"x":888,"y":889,"fill":79,"style":890,"textAnchor":891},"188.5","70.0","font-size:13px","end","Baseline (JS-rendered hero)",[59,894],{"x":895,"y":327,"width":896,"height":897,"rx":109,"fill":122,"stroke":93,"style":898},"200.5","467.5","19","fill-opacity:0.7;stroke-opacity:0.9",[82,900,903],{"x":901,"y":889,"fill":79,"style":902},"674.0","font-size:12px;font-weight:600","1300ms",[82,905,907],{"x":888,"y":906,"fill":79,"style":890,"textAnchor":891},"101.0","+ img in server HTML",[59,909],{"x":895,"y":910,"width":911,"height":897,"rx":109,"fill":132,"stroke":132,"style":912},"87.0","151.0","fill-opacity:0.55;stroke-opacity:0.9",[82,914,916],{"x":915,"y":906,"fill":79,"style":902},"357.6","420ms",[82,918,920],{"x":888,"y":919,"fill":79,"style":890,"textAnchor":891},"132.0","+ fetchpriority high",[59,922],{"x":895,"y":92,"width":923,"height":897,"rx":109,"fill":132,"stroke":132,"style":912},"93.5",[82,925,927],{"x":926,"y":919,"fill":79,"style":902},"300.0","260ms",[82,929,931],{"x":888,"y":930,"fill":79,"style":890,"textAnchor":891},"163.0","+ preconnect image host",[59,933],{"x":895,"y":371,"width":934,"height":897,"rx":109,"fill":132,"stroke":132,"style":912},"57.5",[82,936,938],{"x":937,"y":930,"fill":79,"style":902},"264.1","160ms",[196,940,942],{"id":941},"verification","Verification",[15,944,945],{},"In a fresh trace with the same throttling, the LCP image request should start within roughly 100–200ms of the HTML response's first byte, and the LCP insight should show load delay as the smallest of the four phases. Check that the request is initiated by the parser or preload, at High priority, with no connection setup in its timing.",[15,947,948,949,952,953,956],{},"In the field, the ",[43,950,951],{},"web-vitals"," attribution build reports ",[43,954,955],{},"resourceLoadDelay"," directly:",[476,958,960],{"className":699,"code":959,"language":701,"meta":481,"style":481},"import { onLCP } from 'web-vitals\u002Fattribution';\nonLCP(({ value, attribution }) => {\n  report({ lcp: Math.round(value), loadDelay: Math.round(attribution.resourceLoadDelay),\n           loadDuration: Math.round(attribution.resourceLoadDuration),\n           url: attribution.url });\n});\n\u002F\u002F trade-off: field load delay includes real network variance — a slow TTFB\n\u002F\u002F on one request does not inflate it, but contention from other tabs or\n\u002F\u002F background downloads can. Compare medians and p75s, not individual beacons.\n",[43,961,962,979,1004,1023,1033,1038,1043,1048,1053],{"__ignoreMap":481},[485,963,964,967,970,973,976],{"class":88,"line":487},[485,965,966],{"class":713},"import",[485,968,969],{"class":497}," { onLCP } ",[485,971,972],{"class":713},"from",[485,974,975],{"class":511}," 'web-vitals\u002Fattribution'",[485,977,978],{"class":497},";\n",[485,980,981,984,987,990,992,995,998,1001],{"class":88,"line":494},[485,982,983],{"class":717},"onLCP",[485,985,986],{"class":497},"(({ ",[485,988,989],{"class":724},"value",[485,991,251],{"class":497},[485,993,994],{"class":724},"attribution",[485,996,997],{"class":497}," }) ",[485,999,1000],{"class":713},"=>",[485,1002,1003],{"class":497}," {\n",[485,1005,1006,1009,1012,1015,1018,1020],{"class":88,"line":523},[485,1007,1008],{"class":717},"  report",[485,1010,1011],{"class":497},"({ lcp: Math.",[485,1013,1014],{"class":717},"round",[485,1016,1017],{"class":497},"(value), loadDelay: Math.",[485,1019,1014],{"class":717},[485,1021,1022],{"class":497},"(attribution.resourceLoadDelay),\n",[485,1024,1025,1028,1030],{"class":88,"line":561},[485,1026,1027],{"class":497},"           loadDuration: Math.",[485,1029,1014],{"class":717},[485,1031,1032],{"class":497},"(attribution.resourceLoadDuration),\n",[485,1034,1035],{"class":88,"line":568},[485,1036,1037],{"class":497},"           url: attribution.url });\n",[485,1039,1040],{"class":88,"line":574},[485,1041,1042],{"class":497},"});\n",[485,1044,1045],{"class":88,"line":606},[485,1046,1047],{"class":490},"\u002F\u002F trade-off: field load delay includes real network variance — a slow TTFB\n",[485,1049,1050],{"class":88,"line":616},[485,1051,1052],{"class":490},"\u002F\u002F on one request does not inflate it, but contention from other tabs or\n",[485,1054,1055],{"class":88,"line":628},[485,1056,1057],{"class":490},"\u002F\u002F background downloads can. Compare medians and p75s, not individual beacons.\n",[15,1059,1060,1061,1064],{},"Track the p75 of ",[43,1062,1063],{},"loadDelay"," as its own series; a regression there almost always means a template change hid the image from the preload scanner.",[196,1066,1068],{"id":1067},"framework-patterns-that-reintroduce-load-delay","Framework Patterns That Reintroduce Load Delay",[15,1070,1071,1074,1075,1078,1079,1081,1082,1084],{},[30,1072,1073],{},"Image components that render a placeholder first."," Some image components render a ",[43,1076,1077],{},"\u003Cdiv>"," with a blurred background on the server and swap in the real ",[43,1080,466],{}," after hydration. The browser cannot request the full image until hydration. Prefer components that emit the real ",[43,1083,466],{}," with a placeholder as CSS background on the same element.",[15,1086,1087,1090,1091,1094,1095,1097,1098,1101],{},[30,1088,1089],{},"Responsive images chosen in JavaScript."," Code that reads ",[43,1092,1093],{},"window.innerWidth"," to pick an image URL cannot run before the preload scanner. Use ",[43,1096,254],{}," and ",[43,1099,1100],{},"sizes"," so the browser chooses.",[15,1103,1104,1107],{},[30,1105,1106],{},"A\u002FB testing scripts that swap the hero."," Client-side experimentation tools that replace the hero image after their script loads add the script's download and execution to load delay, and often create a second LCP candidate. Run hero experiments server-side or at the edge.",[15,1109,1110,1113,1114,1116,1117,1121],{},[30,1111,1112],{},"Streaming SSR with the hero in a late chunk."," If the hero is inside a Suspense boundary that resolves late, its ",[43,1115,466],{}," arrives late in the stream. Keep the hero outside slow boundaries, or emit its preload in the shell — see ",[19,1118,1120],{"href":1119},"\u002Fnetwork-protocol-optimization\u002Fstreaming-ssr-and-early-flush\u002Fflushing-the-document-head-early\u002F","flushing the document head early",".",[196,1123,1125],{"id":1124},"faq","FAQ",[1127,1128,1131,1135],"details",{"className":1129},[1130],"faq-item",[1132,1133,1134],"summary",{},"How is load delay different from TTFB?",[15,1136,1137],{},"TTFB ends when the first byte of the HTML arrives. Load delay starts there and ends when the LCP resource request begins. A slow server inflates TTFB; a page that hides its hero from the preload scanner inflates load delay. They have entirely different fixes, which is why the phase breakdown matters.",[1127,1139,1141,1144],{"className":1140},[1130],[1132,1142,1143],{},"Can 103 Early Hints reduce load delay below zero?",[15,1145,1146,1147,1121],{},"Effectively, yes: with Early Hints the server tells the browser to preload the hero before the final HTML response is ready, so the image request can start during server think time. Load delay as measured from the first byte of the final response may then be negative or zero. See ",[19,1148,1150],{"href":1149},"\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",[196,1152,1154],{"id":1153},"related","Related",[201,1156,1157,1164,1171],{},[204,1158,1159,1163],{},[19,1160,1162],{"href":1161},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Ffixing-a-slow-lcp-image-behind-an-image-cdn\u002F","Fixing a slow LCP image behind an image CDN"," — when load duration, not delay, dominates.",[204,1165,1166,1170],{},[19,1167,1169],{"href":1168},"\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"," — choosing the right hint for each origin.",[204,1172,1173,1177],{},[19,1174,1176],{"href":1175},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-slow-lcp-in-vue-and-nuxt-apps\u002F","Fixing slow LCP in Vue and Nuxt apps"," — framework-specific causes of late discovery.",[1179,1180,1182],"script",{"type":1181},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Diagnose and Fix LCP Resource Load Delay\",\n  \"description\": \"Find out why your LCP image request starts late — discovery, priority, connection setup or JavaScript — and shrink the gap to a few hundred milliseconds.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Make the LCP image discoverable in the HTML\",\n      \"text\": \"Render a real with a real src (and srcset) in the server response.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Raise the priority\",\n      \"text\": \"Expected outcome: the image starts at \\\"High\\\" priority instead of being boosted after layout; typical savings are 100–400ms on congested connections.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Remove lazy loading from above-the-fold images\",\n      \"text\": \"Expected outcome: no lazy attribute on the LCP image; fixing lazy-loaded images that delay LCP covers loader libraries that hide this.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Remove or warm the cross-origin connection\",\n      \"text\": \"Serve hero images from the main origin through a CDN path rule (\u002Fimg\u002F* routed to the image service), or preconnect to the image host early in the head.\"\n    }\n  ]\n}\n",[1179,1184,1185],{"type":1181},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Diagnose and Fix LCP Resource Load Delay\",\n  \"description\": \"Find out why your LCP image request starts late — discovery, priority, connection setup or JavaScript — and shrink the gap to a few hundred milliseconds.\",\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\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002F\"\n  }\n}\n",[1179,1187,1188],{"type":1181},"\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\": \"Core Web Vitals & Measurement\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Measuring LCP with Chrome DevTools\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Diagnosing LCP Resource Load Delay\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002F\"\n    }\n  ]\n}\n",[1190,1191,1192],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}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 .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":481,"searchDepth":494,"depth":494,"links":1194},[1195,1196,1197,1203,1204,1205,1206],{"id":198,"depth":494,"text":199},{"id":240,"depth":494,"text":241},{"id":454,"depth":494,"text":455,"children":1198},[1199,1200,1201,1202],{"id":459,"depth":523,"text":460},{"id":643,"depth":523,"text":644},{"id":695,"depth":523,"text":696},{"id":810,"depth":523,"text":811},{"id":941,"depth":494,"text":942},{"id":1067,"depth":494,"text":1068},{"id":1124,"depth":494,"text":1125},{"id":1153,"depth":494,"text":1154},"Find out why your LCP image request starts late — discovery, priority, connection setup or JavaScript — and shrink the gap to a few hundred milliseconds.","md",{"slug":1210,"type":1211,"breadcrumb":1212,"datePublished":1220,"dateModified":1220},"diagnosing-lcp-resource-load-delay","article",[1213,1216,1217,1218],{"name":1214,"url":1215},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1219},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002F","2026-10-06","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay",{"title":1223,"description":1224},"Diagnosing LCP Resource Load Delay in DevTools","Resource load delay is the gap between TTFB and the LCP image request starting. Find why the request starts late and cut it to under 10% of LCP.","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002Findex","Gj3itZh63dalDfEvPm2VKTX6XbwfMvl205snROA2mog",[1228,1231],{"title":22,"path":1229,"stem":1230,"children":-1},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Findex",{"title":1232,"path":1233,"stem":1234,"children":-1},"Fixing LCP Render Delay from Render-Blocking CSS","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-render-delay-from-render-blocking-css","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-render-delay-from-render-blocking-css\u002Findex",1791308073317]