[{"data":1,"prerenderedAt":1163},["ShallowReactive",2],{"content:\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component":3,"surroundings:\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component":1154},{"id":4,"title":5,"body":6,"description":1134,"extension":1135,"meta":1136,"navigation":1148,"path":1149,"seo":1150,"stem":1152,"__hash__":1153},"content\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component\u002Findex.md","Fixing Slow LCP with the Next.js Image Component",{"type":7,"value":8,"toc":1115},"minimark",[9,14,54,72,190,195,235,239,245,251,257,263,267,272,397,401,412,416,426,542,546,549,659,663,677,681,702,706,722,726,732,859,863,874,878,904,908,918,928,940,949,953,970,982,991,1004,1022,1031,1046,1055,1064,1073,1077,1100,1105,1108,1111],[10,11,13],"h1",{"id":12},"how-to-fix-slow-lcp-with-the-nextjs-image-component","How to Fix Slow LCP with the Next.js Image Component",[15,16,17,18,23,24,28,29,33,34,37,38,41,42,45,46,49,50,53],"p",{},"This guide is part of ",[19,20,22],"a",{"href":21},"\u002Fframework-performance\u002Fnextjs-performance\u002F","Next.js Performance",", within ",[19,25,27],{"href":26},"\u002Fframework-performance\u002F","Framework Performance",". The Next.js ",[30,31,32],"code",{},"Image"," component (",[30,35,36],{},"next\u002Fimage",") generates responsive ",[30,39,40],{},"srcset","s, serves modern formats through the built-in optimiser or a custom loader, sets dimensions to prevent layout shifts, and lazy-loads images by default. That last default is the most common cause of slow LCP in Next.js apps: unless the hero image is marked with ",[30,43,44],{},"priority"," (or ",[30,47,48],{},"fetchPriority=\"high\""," and ",[30,51,52],{},"loading=\"eager\""," in newer versions), it is lazy-loaded and discovered late.",[15,55,56,57,60,61,64,65,67,68,71],{},"Other configuration problems compound it: a missing or wrong ",[30,58,59],{},"sizes"," prop makes the browser download images far larger than displayed; ",[30,62,63],{},"fill"," images without a ",[30,66,59],{}," default to ",[30,69,70],{},"100vw","; the optimiser transforms images on first request, which can take hundreds of milliseconds on a cache miss; and high default quality settings waste bytes.",[15,73,74],{},[75,76,82,83,82,90,82,94,82,97,82,106,82,112,82,123,82,130,82,138,82,143,82,147,82,153,82,157,82,161,82,167,82,171,82,175,82,179,82,183,82],"svg",{"viewBox":77,"width":78,"role":79,"ariaLabel":80,"style":81},"0 0 760 216","100%","img","Bar chart comparing LCP for a Next.js hero image with different Image component settings.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[84,85],"rect",{"className":86,"x":88,"y":88,"width":78,"height":78,"fill":89},[87],"svg-canvas","0","#ffffff",[91,92,93],"title",{},"LCP p75 for a hero image by configuration",[95,96,80],"desc",{},[84,98],{"x":99,"y":99,"width":100,"height":101,"rx":102,"fill":103,"stroke":104,"style":105},"1","758","214","10","none","currentColor","stroke-opacity:0.18",[107,108,93],"text",{"x":109,"y":110,"fill":104,"style":111},"28.0","34.0","font-size:16px;font-weight:700",[113,114],"line",{"x1":115,"y1":116,"x2":115,"y2":117,"stroke":118,"strokeWidth":119,"strokeDashArray":120,"style":122},"537.0","72.0","194.0","#b8860b","1.5",[121,121],"4","stroke-opacity:0.9",[107,124,129],{"x":125,"y":126,"fill":104,"style":127,"textAnchor":128},"161.1","92.0","font-size:13px","end","Default (lazy, no sizes)",[84,131],{"x":132,"y":133,"width":134,"height":135,"rx":136,"fill":103,"stroke":104,"style":137},"173.1","78.0","494.9","19","3","fill-opacity:0.7;stroke-opacity:0.35",[107,139,142],{"x":140,"y":126,"fill":104,"style":141},"674.0","font-size:12px;font-weight:600","3400ms",[107,144,146],{"x":125,"y":145,"fill":104,"style":127,"textAnchor":128},"123.0","priority, no sizes",[84,148],{"x":132,"y":149,"width":150,"height":135,"rx":136,"fill":151,"stroke":118,"style":152},"109.0","378.5","#ffc300","fill-opacity:0.7;stroke-opacity:0.9",[107,154,156],{"x":155,"y":145,"fill":104,"style":141},"557.6","2600ms",[107,158,160],{"x":125,"y":159,"fill":104,"style":127,"textAnchor":128},"154.0","priority + correct sizes",[84,162],{"x":132,"y":163,"width":164,"height":135,"rx":136,"fill":165,"stroke":165,"style":166},"140.0","305.7","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[107,168,170],{"x":169,"y":159,"fill":104,"style":141},"484.8","2100ms",[107,172,174],{"x":125,"y":173,"fill":104,"style":127,"textAnchor":128},"185.0","+ CDN loader (cached)",[84,176],{"x":132,"y":177,"width":178,"height":135,"rx":136,"fill":151,"stroke":118,"style":152},"171.0","247.5",[107,180,182],{"x":181,"y":173,"fill":104,"style":141},"426.5","1700ms",[107,184,189],{"x":115,"y":185,"fill":186,"style":187,"textAnchor":188},"68.0","#8a6608","font-size:12px;font-weight:700","middle","LCP good",[191,192,194],"h2",{"id":193},"rapid-diagnosis","Rapid Diagnosis",[196,197,198,213,219,229],"ul",{},[199,200,201,205,206,209,210,212],"li",{},[202,203,204],"strong",{},"Inspect the LCP image's HTML",": ",[30,207,208],{},"loading=\"lazy\""," means ",[30,211,44],{}," is missing.",[199,214,215,218],{},[202,216,217],{},"Check the downloaded width"," against the displayed width in DevTools (Network panel image preview shows intrinsic size).",[199,220,221,228],{},[202,222,223,224,227],{},"Check ",[30,225,226],{},"\u002F_next\u002Fimage"," response times"," on first request versus cached.",[199,230,231,234],{},[202,232,233],{},"Check for a preload link"," in the head for the LCP image.",[191,236,238],{"id":237},"root-cause-analysis","Root Cause Analysis",[15,240,241,244],{},[202,242,243],{},"1. Lazy loading by default."," The hero waits until layout determines it is in view.",[15,246,247,250],{},[202,248,249],{},"2. Missing or wrong sizes."," The browser picks large candidates.",[15,252,253,256],{},[202,254,255],{},"3. Cold optimiser cache."," First requests transform images synchronously.",[15,258,259,262],{},[202,260,261],{},"4. Client-rendered hero."," The image URL is known only after JavaScript runs.",[191,264,266],{"id":265},"step-by-step-resolution","Step-by-Step Resolution",[268,269,271],"h3",{"id":270},"_1-mark-the-lcp-image-as-priority","1. Mark the LCP image as priority",[273,274,279],"pre",{"className":275,"code":276,"language":277,"meta":278,"style":278},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","import Image from 'next\u002Fimage';\n\u003CImage src={product.heroUrl} alt={product.name} width={1200} height={900}\n       priority sizes=\"(max-width: 768px) 100vw, 50vw\" quality={70} \u002F>\n\u002F\u002F trade-off: priority preloads the image with high fetch priority; mark only the\n\u002F\u002F one or two images likely to be LCP, or they compete with each other.\n","javascript","",[30,280,281,303,356,384,391],{"__ignoreMap":278},[282,283,285,289,293,296,300],"span",{"class":113,"line":284},1,[282,286,288],{"class":287},"sPARh","import",[282,290,292],{"class":291},"saISM"," Image ",[282,294,295],{"class":287},"from",[282,297,299],{"class":298},"sZ8jY"," 'next\u002Fimage'",[282,301,302],{"class":291},";\n",[282,304,306,309,312,316,319,322,325,328,330,333,335,338,340,343,345,348,350,353],{"class":113,"line":305},2,[282,307,308],{"class":291},"\u003C",[282,310,32],{"class":311},"sZBmE",[282,313,315],{"class":314},"sPXB4"," src",[282,317,318],{"class":287},"={",[282,320,321],{"class":291},"product.heroUrl",[282,323,324],{"class":287},"}",[282,326,327],{"class":314}," alt",[282,329,318],{"class":287},[282,331,332],{"class":291},"product.name",[282,334,324],{"class":287},[282,336,337],{"class":314}," width",[282,339,318],{"class":287},[282,341,342],{"class":314},"1200",[282,344,324],{"class":287},[282,346,347],{"class":314}," height",[282,349,318],{"class":287},[282,351,352],{"class":314},"900",[282,354,355],{"class":287},"}\n",[282,357,359,362,365,368,371,374,376,379,381],{"class":113,"line":358},3,[282,360,361],{"class":314},"       priority",[282,363,364],{"class":314}," sizes",[282,366,367],{"class":287},"=",[282,369,370],{"class":298},"\"(max-width: 768px) 100vw, 50vw\"",[282,372,373],{"class":314}," quality",[282,375,318],{"class":287},[282,377,378],{"class":314},"70",[282,380,324],{"class":287},[282,382,383],{"class":291}," \u002F>\n",[282,385,387],{"class":113,"line":386},4,[282,388,390],{"class":389},"sjfSM","\u002F\u002F trade-off: priority preloads the image with high fetch priority; mark only the\n",[282,392,394],{"class":113,"line":393},5,[282,395,396],{"class":389},"\u002F\u002F one or two images likely to be LCP, or they compete with each other.\n",[268,398,400],{"id":399},"_2-set-sizes-to-match-the-layout","2. Set sizes to match the layout",[15,402,403,405,406,408,409,411],{},[30,404,59],{}," should describe the image's rendered width at each breakpoint. For ",[30,407,63],{}," images, always set ",[30,410,59],{},".",[268,413,415],{"id":414},"_3-use-a-cdn-backed-loader-or-cache-the-optimiser","3. Use a CDN-backed loader or cache the optimiser",[15,417,418,419,422,423,411],{},"For high-traffic sites, configure a custom ",[30,420,421],{},"loader"," that points at an image CDN, or ensure the built-in optimiser's output is cached at the CDN with a long ",[30,424,425],{},"minimumCacheTTL",[273,427,429],{"className":275,"code":428,"language":277,"meta":278,"style":278},"\u002F\u002F next.config.js — custom loader for an image CDN.\nmodule.exports = { images: { loader: 'custom', loaderFile: '.\u002Fimage-loader.js', formats: ['image\u002Favif', 'image\u002Fwebp'] } };\n\u002F\u002F image-loader.js\nexport default function loader({ src, width, quality }) {\n  return `https:\u002F\u002Fimg.example-cdn.com${src}?w=${width}&q=${quality || 70}&auto=format`;\n}\n",[30,430,431,436,476,481,503,537],{"__ignoreMap":278},[282,432,433],{"class":113,"line":284},[282,434,435],{"class":389},"\u002F\u002F next.config.js — custom loader for an image CDN.\n",[282,437,438,441,443,446,449,452,455,458,461,464,467,470,473],{"class":113,"line":305},[282,439,440],{"class":314},"module",[282,442,411],{"class":291},[282,444,445],{"class":314},"exports",[282,447,448],{"class":287}," =",[282,450,451],{"class":291}," { images: { loader: ",[282,453,454],{"class":298},"'custom'",[282,456,457],{"class":291},", loaderFile: ",[282,459,460],{"class":298},"'.\u002Fimage-loader.js'",[282,462,463],{"class":291},", formats: [",[282,465,466],{"class":298},"'image\u002Favif'",[282,468,469],{"class":291},", ",[282,471,472],{"class":298},"'image\u002Fwebp'",[282,474,475],{"class":291},"] } };\n",[282,477,478],{"class":113,"line":358},[282,479,480],{"class":389},"\u002F\u002F image-loader.js\n",[282,482,483,486,489,492,496,500],{"class":113,"line":386},[282,484,485],{"class":287},"export",[282,487,488],{"class":287}," default",[282,490,491],{"class":287}," function",[282,493,495],{"class":494},"smZ65"," loader",[282,497,499],{"class":498},"sQw3B","({ src, width, quality }) ",[282,501,502],{"class":291},"{\n",[282,504,505,508,511,514,517,520,523,526,529,532,535],{"class":113,"line":393},[282,506,507],{"class":287},"  return",[282,509,510],{"class":298}," `https:\u002F\u002Fimg.example-cdn.com${",[282,512,513],{"class":291},"src",[282,515,516],{"class":298},"}?w=${",[282,518,519],{"class":291},"width",[282,521,522],{"class":298},"}&q=${",[282,524,525],{"class":291},"quality",[282,527,528],{"class":287}," ||",[282,530,531],{"class":314}," 70",[282,533,534],{"class":298},"}&auto=format`",[282,536,302],{"class":291},[282,538,540],{"class":113,"line":539},6,[282,541,355],{"class":291},[268,543,545],{"id":544},"_4-render-the-hero-on-the-server","4. Render the hero on the server",[15,547,548],{},"Make sure the hero image's URL is in the server-rendered HTML (Server Components or SSR), not determined after client-side data fetching.",[15,550,551],{},[75,552,82,555,82,558,82,561,82,563,82,566,82,568,82,575,82,582,82,587,82,590,82,593,82,597,82,600,82,604,82,608,82,611,82,615,82,619,82,625,82,629,82,633,82,638,82,640,82,643,82,647,82,650,82,653,82,656,82],{"viewBox":553,"width":78,"role":79,"ariaLabel":554,"style":81},"0 0 760 318","Checks for configuring the Next.js Image component for a fast LCP.",[84,556],{"className":557,"x":88,"y":88,"width":78,"height":78,"fill":89},[87],[91,559,560],{},"next\u002Fimage LCP checklist",[95,562,554],{},[84,564],{"x":99,"y":99,"width":100,"height":565,"rx":102,"fill":103,"stroke":104,"style":105},"316",[107,567,560],{"x":109,"y":110,"fill":104,"style":111},[84,569],{"x":116,"y":570,"width":571,"height":572,"rx":573,"fill":165,"stroke":165,"style":574},"56.0","660.0","51.0","6","fill-opacity:0.14;stroke-opacity:0.9",[107,576,581],{"x":577,"y":578,"fill":104,"style":579,"textAnchor":580},"86.0","77.0","font-size:13px;font-weight:700","start","priority on the LCP image",[107,583,586],{"x":577,"y":584,"fill":104,"style":585,"textAnchor":580},"94.0","font-size:12px","Preloaded with high fetch priority, not lazy",[84,588],{"x":116,"y":589,"width":571,"height":572,"rx":573,"fill":165,"stroke":165,"style":574},"119.0",[107,591,592],{"x":577,"y":163,"fill":104,"style":579,"textAnchor":580},"Accurate sizes",[107,594,596],{"x":577,"y":595,"fill":104,"style":585,"textAnchor":580},"157.0","Matches rendered width at each breakpoint",[84,598],{"x":116,"y":599,"width":571,"height":572,"rx":573,"fill":165,"stroke":165,"style":574},"182.0",[107,601,603],{"x":577,"y":602,"fill":104,"style":579,"textAnchor":580},"203.0","Cached or CDN-backed optimisation",[107,605,607],{"x":577,"y":606,"fill":104,"style":585,"textAnchor":580},"220.0","No slow transforms on the critical path",[84,609],{"x":116,"y":610,"width":571,"height":572,"rx":573,"fill":165,"stroke":165,"style":574},"245.0",[107,612,614],{"x":577,"y":613,"fill":104,"style":579,"textAnchor":580},"266.0","Server-rendered URL",[107,616,618],{"x":577,"y":617,"fill":104,"style":585,"textAnchor":580},"283.0","Discoverable in the initial HTML",[113,620],{"x1":621,"y1":622,"x2":621,"y2":623,"stroke":104,"strokeWidth":119,"style":624},"43.0","95.5","130.5","stroke-opacity:0.3",[113,626],{"x1":621,"y1":627,"x2":621,"y2":628,"stroke":104,"strokeWidth":119,"style":624},"158.5","193.5",[113,630],{"x1":621,"y1":631,"x2":621,"y2":632,"stroke":104,"strokeWidth":119,"style":624},"221.5","256.5",[634,635],"circle",{"cx":621,"cy":636,"r":637,"fill":165},"81.5","13",[107,639,99],{"x":621,"y":577,"fill":89,"style":579,"textAnchor":188},[634,641],{"cx":621,"cy":642,"r":637,"fill":165},"144.5",[107,644,646],{"x":621,"y":645,"fill":89,"style":579,"textAnchor":188},"149.0","2",[634,648],{"cx":621,"cy":649,"r":637,"fill":165},"207.5",[107,651,136],{"x":621,"y":652,"fill":89,"style":579,"textAnchor":188},"212.0",[634,654],{"cx":621,"cy":655,"r":637,"fill":165},"270.5",[107,657,121],{"x":621,"y":658,"fill":89,"style":579,"textAnchor":188},"275.0",[191,660,662],{"id":661},"verification","Verification",[15,664,665,666,669,670,672,673,676],{},"In DevTools, the LCP image should have ",[30,667,668],{},"fetchpriority=\"high\"",", no ",[30,671,208],{},", and a preload link in the head. The downloaded image width should be close to displayed width × DPR. Image responses should come from cache (check ",[30,674,675],{},"x-nextjs-cache"," or CDN headers). In the field, LCP for the template should improve, particularly the resource load delay and load duration parts.",[191,678,680],{"id":679},"worked-example-a-real-estate-listing-site","Worked Example: A Real Estate Listing Site",[15,682,683,684,686,687,689,690,692,693,695,696,49,698,701],{},"A real estate site's listing pages used ",[30,685,36],{}," with ",[30,688,63],{}," for the main photo, no ",[30,691,44],{}," and no ",[30,694,59],{},". The browser lazy-loaded a 3840px image for a 600px slot on mobile. LCP p75 was 3.4 seconds. Adding ",[30,697,44],{},[30,699,700],{},"sizes=\"(max-width: 768px) 100vw, 60vw\""," cut the image from 680KB to 110KB on mobile and removed the lazy-load delay. Moving optimisation to an image CDN via a custom loader removed 300–700ms transform delays on cache misses for new listings. LCP p75 fell to 1.8 seconds.",[191,703,705],{"id":704},"priority-fetchpriority-and-preloading","Priority, fetchPriority and Preloading",[15,707,708,709,711,712,49,715,718,719,721],{},"In Next.js, ",[30,710,44],{}," does two things: it disables lazy loading and adds a preload link with high fetch priority in the document head. Newer Next.js versions also expose ",[30,713,714],{},"fetchPriority",[30,716,717],{},"loading"," directly, and may change how ",[30,720,44],{}," works; check the documentation for your version. Either way, the goal is the same: the LCP image must be discoverable in the initial HTML, requested early, and not deprioritised. Avoid marking many images as priority — they compete for bandwidth, which can make the real LCP image slower.",[191,723,725],{"id":724},"placeholder-blur-and-lcp","Placeholder Blur and LCP",[15,727,728,731],{},[30,729,730],{},"placeholder=\"blur\""," shows a blurred low-resolution version while the full image loads. It improves perceived loading but does not count as the LCP: LCP fires when the full image renders. The inline blur data adds a little HTML weight. It is a good choice for below-the-fold and gallery images; for the hero, focus on making the full image arrive fast.",[15,733,734],{},[75,735,82,738,82,741,82,744,82,746,82,749,82,751,82,756,82,762,82,766,82,770,82,773,82,777,82,780,82,783,82,785,82,788,82,790,82,793,82,796,82,799,82,801,82,804,82,806,82,808,82,811,82,815,82,817,82,820,82,822,82,824,82,827,82,831,82,833,82,836,82,838,82,841,82,844,82,848,82,851,82,854,82,856,82],{"viewBox":736,"width":78,"role":79,"ariaLabel":737,"style":81},"0 0 760 258","How common next\u002Fimage props affect LCP when used on the hero image.",[84,739],{"className":740,"x":88,"y":88,"width":78,"height":78,"fill":89},[87],[91,742,743],{},"Image props and their LCP effect",[95,745,737],{},[84,747],{"x":99,"y":99,"width":100,"height":748,"rx":102,"fill":103,"stroke":104,"style":105},"256",[107,750,743],{"x":109,"y":110,"fill":104,"style":111},[84,752],{"x":109,"y":570,"width":753,"height":754,"rx":88,"fill":104,"stroke":104,"style":755},"139.9","30.0","fill-opacity:0.06;stroke-opacity:0.4",[107,757,761],{"x":758,"y":759,"fill":104,"style":760,"textAnchor":580},"38.0","75.5","font-size:12.5px;font-weight:700","Prop",[84,763],{"x":764,"y":570,"width":765,"height":754,"rx":88,"fill":104,"stroke":104,"style":755},"167.9","282.1",[107,767,769],{"x":768,"y":759,"fill":104,"style":760,"textAnchor":188},"308.9","LCP effect",[84,771],{"x":772,"y":570,"width":765,"height":754,"rx":88,"fill":104,"stroke":104,"style":755},"449.9",[107,774,776],{"x":775,"y":759,"fill":104,"style":760,"textAnchor":188},"591.0","Use on hero?",[84,778],{"x":109,"y":577,"width":753,"height":754,"rx":88,"fill":103,"stroke":104,"style":779},"stroke-opacity:0.35",[107,781,44],{"x":758,"y":782,"fill":104,"style":760,"textAnchor":580},"105.5",[84,784],{"x":764,"y":577,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,786,787],{"x":768,"y":782,"fill":104,"style":585,"textAnchor":188},"preload + high priority",[84,789],{"x":772,"y":577,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,791,792],{"x":775,"y":782,"fill":104,"style":585,"textAnchor":188},"yes",[84,794],{"x":109,"y":795,"width":753,"height":754,"rx":88,"fill":103,"stroke":104,"style":779},"116.0",[107,797,59],{"x":758,"y":798,"fill":104,"style":760,"textAnchor":580},"135.5",[84,800],{"x":764,"y":795,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,802,803],{"x":768,"y":798,"fill":104,"style":585,"textAnchor":188},"right-sized download",[84,805],{"x":772,"y":795,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,807,792],{"x":775,"y":798,"fill":104,"style":585,"textAnchor":188},[84,809],{"x":109,"y":810,"width":753,"height":754,"rx":88,"fill":103,"stroke":104,"style":779},"146.0",[107,812,814],{"x":758,"y":813,"fill":104,"style":760,"textAnchor":580},"165.5","quality 60-75",[84,816],{"x":764,"y":810,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,818,819],{"x":768,"y":813,"fill":104,"style":585,"textAnchor":188},"fewer bytes",[84,821],{"x":772,"y":810,"width":765,"height":754,"rx":88,"fill":165,"stroke":165,"style":574},[107,823,792],{"x":775,"y":813,"fill":104,"style":585,"textAnchor":188},[84,825],{"x":109,"y":826,"width":753,"height":754,"rx":88,"fill":103,"stroke":104,"style":779},"176.0",[107,828,830],{"x":758,"y":829,"fill":104,"style":760,"textAnchor":580},"195.5","placeholder blur",[84,832],{"x":764,"y":826,"width":765,"height":754,"rx":88,"fill":104,"stroke":104,"style":755},[107,834,835],{"x":768,"y":829,"fill":104,"style":585,"textAnchor":188},"perceived only",[84,837],{"x":772,"y":826,"width":765,"height":754,"rx":88,"fill":104,"stroke":104,"style":755},[107,839,840],{"x":775,"y":829,"fill":104,"style":585,"textAnchor":188},"optional",[84,842],{"x":109,"y":843,"width":753,"height":754,"rx":88,"fill":103,"stroke":104,"style":779},"206.0",[107,845,847],{"x":758,"y":846,"fill":104,"style":760,"textAnchor":580},"225.5","loading lazy (default)",[84,849],{"x":764,"y":843,"width":765,"height":754,"rx":88,"fill":151,"stroke":118,"style":850},"fill-opacity:0.24;stroke-opacity:0.9",[107,852,853],{"x":768,"y":846,"fill":104,"style":585,"textAnchor":188},"late discovery",[84,855],{"x":772,"y":843,"width":765,"height":754,"rx":88,"fill":151,"stroke":118,"style":850},[107,857,858],{"x":775,"y":846,"fill":104,"style":585,"textAnchor":188},"never",[191,860,862],{"id":861},"finding-the-lcp-image-per-template","Finding the LCP Image per Template",[15,864,865,866,869,870,873],{},"The LCP element varies by template and viewport: the product photo on product pages, a hero banner on the homepage, sometimes a headline instead of an image on mobile. Check each key template at mobile and desktop widths using the Performance panel's LCP marker or the web-vitals attribution build, which reports the LCP element's selector and URL in the field. Mark only that element as priority, and revisit after redesigns. When the LCP image differs by breakpoint, use ",[30,867,868],{},"getImageProps"," with a ",[30,871,872],{},"picture"," element so each breakpoint's image is the one preloaded.",[191,875,877],{"id":876},"common-mistakes","Common Mistakes",[196,879,880,886,892,898],{},[199,881,882,885],{},[202,883,884],{},"No priority on the hero."," The single most common Next.js LCP problem.",[199,887,888,891],{},[202,889,890],{},"fill without sizes."," Defaults to full viewport width.",[199,893,894,897],{},[202,895,896],{},"Many priority images."," Competing high-priority downloads.",[199,899,900,903],{},[202,901,902],{},"Uncached optimisation."," Slow transforms on every cache miss.",[191,905,907],{"id":906},"edge-cases","Edge Cases",[15,909,910,913,914,49,916,411],{},[202,911,912],{},"Static imports."," Statically imported images get automatic dimensions and blur placeholders; still set ",[30,915,44],{},[30,917,59],{},[15,919,920,923,924,927],{},[202,921,922],{},"Remote images."," Configure ",[30,925,926],{},"remotePatterns"," to allow optimisation of remote sources.",[15,929,930,933,934,936,937,939],{},[202,931,932],{},"Art direction."," Use the ",[30,935,868],{}," helper with a ",[30,938,872],{}," element for different crops per breakpoint.",[15,941,942,82,945,948],{},[202,943,944],{},"Unoptimized images.",[30,946,947],{},"unoptimized"," skips the optimiser; ensure the source is already sized and in modern formats.",[191,950,952],{"id":951},"faq","FAQ",[954,955,958,962],"details",{"className":956},[957],"faq-item",[959,960,961],"summary",{},"Why is my Next.js hero image lazy-loaded?",[15,963,964,966,967,969],{},[30,965,36],{}," lazy-loads by default. Add ",[30,968,44],{}," (or the equivalent loading and fetch priority props in your version) to the LCP image.",[954,971,973,976],{"className":972},[957],[959,974,975],{},"What should sizes be?",[15,977,978,979,411],{},"A media-query list describing the rendered width at each breakpoint, such as ",[30,980,981],{},"(max-width: 768px) 100vw, 50vw",[954,983,985,988],{"className":984},[957],[959,986,987],{},"Is the built-in optimiser fast?",[15,989,990],{},"Cached responses are fast; first requests transform images and can be slow. Cache at the CDN or use an image CDN loader.",[954,992,994,997],{"className":993},[957],[959,995,996],{},"Should I enable AVIF?",[15,998,999,1000,1003],{},"Yes, with ",[30,1001,1002],{},"formats: ['image\u002Favif', 'image\u002Fwebp']",". AVIF encoding is slower on cache misses, so caching matters more.",[954,1005,1007,1010],{"className":1006},[957],[959,1008,1009],{},"Does next\u002Fimage prevent CLS?",[15,1011,1012,1013,49,1015,1018,1019,1021],{},"Yes, when dimensions are set (",[30,1014,519],{},[30,1016,1017],{},"height",", or ",[30,1020,63],{}," within a sized container).",[954,1023,1025,1028],{"className":1024},[957],[959,1026,1027],{},"How many images should have priority?",[15,1029,1030],{},"Usually one — the likely LCP image. At most a couple when the LCP element differs by viewport.",[954,1032,1034,1037],{"className":1033},[957],[959,1035,1036],{},"Can I use next\u002Fimage for background images?",[15,1038,1039,1040,686,1042,1045],{},"Use ",[30,1041,63],{},[30,1043,1044],{},"object-fit: cover"," in a positioned container instead of CSS backgrounds, so the image is discoverable and optimised.",[954,1047,1049,1052],{"className":1048},[957],[959,1050,1051],{},"What quality setting should I use?",[15,1053,1054],{},"Around 60–75 is a good range for photos with modern formats; validate visually for your content.",[954,1056,1058,1061],{"className":1057},[957],[959,1059,1060],{},"Does next\u002Fimage work with static exports?",[15,1062,1063],{},"The default optimiser needs a server. For static exports, use a custom loader pointing at an image CDN, or pre-generate sized images.",[954,1065,1067,1070],{"className":1066},[957],[959,1068,1069],{},"Should I use unoptimized for SVGs?",[15,1071,1072],{},"Yes. SVGs do not benefit from raster optimisation; serve them directly.",[191,1074,1076],{"id":1075},"related","Related",[196,1078,1079,1086,1093],{},[199,1080,1081,1085],{},[19,1082,1084],{"href":1083},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — the underlying browser mechanism.",[199,1087,1088,1092],{},[19,1089,1091],{"href":1090},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fcaching-transformed-images-at-the-edge\u002F","Caching transformed images at the edge"," — avoiding slow transforms.",[199,1094,1095,1099],{},[19,1096,1098],{"href":1097},"\u002Fframework-performance\u002Fnextjs-performance\u002Fnextjs-partial-prerendering\u002F","Next.js partial prerendering"," — keeping the hero in the static shell.",[1101,1102,1104],"script",{"type":1103},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Fix Slow LCP with the Next.js Image Component\",\n  \"description\": \"How to configure next\u002Fimage so the LCP image loads early, at the right size and format, without slow optimisation on cache misses.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Mark the LCP image as priority\",\n      \"text\": \"Mark the LCP image as priority\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Set sizes to match the layout\",\n      \"text\": \"sizes should describe the image's rendered width at each breakpoint.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Use a CDN-backed loader or cache the optimiser\",\n      \"text\": \"For high-traffic sites, configure a custom loader that points at an image CDN, or ensure the built-in optimiser's output is cached at the CDN with a long minimumCacheTTL.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Render the hero on the server\",\n      \"text\": \"Make sure the hero image's URL is in the server-rendered HTML (Server Components or SSR), not determined after client-side data fetching.\"\n    }\n  ]\n}\n",[1101,1106,1107],{"type":1103},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Fix Slow LCP with the Next.js Image Component\",\n  \"description\": \"How to configure next\u002Fimage so the LCP image loads early, at the right size and format, without slow optimisation on cache misses.\",\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\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component\u002F\"\n  }\n}\n",[1101,1109,1110],{"type":1103},"\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\": \"Framework Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Next.js Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fnextjs-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Fixing Slow LCP with the Next.js Image Component\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component\u002F\"\n    }\n  ]\n}\n",[1112,1113,1114],"style",{},"html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}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 .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 .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":278,"searchDepth":305,"depth":305,"links":1116},[1117,1118,1119,1125,1126,1127,1128,1129,1130,1131,1132,1133],{"id":193,"depth":305,"text":194},{"id":237,"depth":305,"text":238},{"id":265,"depth":305,"text":266,"children":1120},[1121,1122,1123,1124],{"id":270,"depth":358,"text":271},{"id":399,"depth":358,"text":400},{"id":414,"depth":358,"text":415},{"id":544,"depth":358,"text":545},{"id":661,"depth":305,"text":662},{"id":679,"depth":305,"text":680},{"id":704,"depth":305,"text":705},{"id":724,"depth":305,"text":725},{"id":861,"depth":305,"text":862},{"id":876,"depth":305,"text":877},{"id":906,"depth":305,"text":907},{"id":951,"depth":305,"text":952},{"id":1075,"depth":305,"text":1076},"How to configure next\u002Fimage so the LCP image loads early, at the right size and format, without slow optimisation on cache misses.","md",{"slug":1137,"type":1138,"breadcrumb":1139,"datePublished":1147,"dateModified":1147},"fixing-slow-lcp-with-the-nextjs-image-component","article",[1140,1143,1144,1145],{"name":1141,"url":1142},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1146},"\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component\u002F","2026-10-06",true,"\u002Fframework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component",{"title":5,"description":1151},"next\u002Fimage can delay LCP if misconfigured. Set priority on the hero, accurate sizes, sensible quality and formats, and cache or offload optimisation to a CDN loader.","framework-performance\u002Fnextjs-performance\u002Ffixing-slow-lcp-with-the-nextjs-image-component\u002Findex","vOzJTBcDGRQTOH7Jteol7-SqXk8eLp6nmWyyyJWSi78",[1155,1159],{"title":1156,"path":1157,"stem":1158},"Eliminating Font CLS with next\u002Ffont","\u002Fframework-performance\u002Fnextjs-performance\u002Feliminating-font-cls-with-next-font","framework-performance\u002Fnextjs-performance\u002Feliminating-font-cls-with-next-font\u002Findex",{"title":1160,"path":1161,"stem":1162},"Next.js Partial Prerendering","\u002Fframework-performance\u002Fnextjs-performance\u002Fnextjs-partial-prerendering","framework-performance\u002Fnextjs-performance\u002Fnextjs-partial-prerendering\u002Findex",1791308078430]