LCP Optimization Best Practices 2026: The Complete Guide

The 2026 LCP playbook: Priority Hints, Speculation Rules, 103 Early Hints, Lighthouse 13 Insights, View Transitions, AVIF, HTTP/3, and edge streaming SSR.
Harlan WiltonHarlan Wilton12 min read Published
LCPLargest Contentful Paint CWV
25% weight
Good ≤2.5sPoor >4.0s

Related

LCP OverviewCore Web VitalsLCP DefinitionLCP Finder ToolBulk PageSpeed Test

Unused JavaScript

How to reduce unused JavaScript through code splitting, tree shaking, and dynamic imports to improve your Largest Contentful Paint.

Render-Blocking Resources

How to eliminate render-blocking CSS and JavaScript in the Lighthouse audit. Async/defer scripts, critical CSS extraction, font loading, and Next.js optimizeCss config.

\n",[4290,4613,4614,4635,4641,4646,4651,4656,4661,4666,4671,4677,4683,4689,4695,4701],{"__ignoreMap":1843},[4356,4615,4616,4618,4621,4624,4626,4628,4631,4633],{"class":4358,"line":1766},[4356,4617,4362],{"class":4361},[4356,4619,4620],{"class":4365},"script",[4356,4622,4623],{"class":4371}," type",[4356,4625,4375],{"class":4361},[4356,4627,4379],{"class":4378},[4356,4629,4630],{"class":4382},"speculationrules",[4356,4632,4379],{"class":4378},[4356,4634,4464],{"class":4361},[4356,4636,4637],{"class":4358,"line":1756},[4356,4638,4640],{"class":4639},"sqjlB","{\n",[4356,4642,4643],{"class":4358,"line":1828},[4356,4644,4645],{"class":4639}," \"prerender\": [{\n",[4356,4647,4648],{"class":4358,"line":1749},[4356,4649,4650],{"class":4639}," \"where\": {\n",[4356,4652,4653],{"class":4358,"line":1984},[4356,4654,4655],{"class":4639}," \"and\": [\n",[4356,4657,4658],{"class":4358,"line":4431},[4356,4659,4660],{"class":4639}," { \"href_matches\": \"/*\" },\n",[4356,4662,4663],{"class":4358,"line":4446},[4356,4664,4665],{"class":4639}," { \"not\": { \"href_matches\": \"/logout\" } },\n",[4356,4667,4668],{"class":4358,"line":4461},[4356,4669,4670],{"class":4639}," { \"not\": { \"selector_matches\": \"[data-no-prerender]\" } }\n",[4356,4672,4674],{"class":4358,"line":4673},9,[4356,4675,4676],{"class":4639}," ]\n",[4356,4678,4680],{"class":4358,"line":4679},10,[4356,4681,4682],{"class":4639}," },\n",[4356,4684,4686],{"class":4358,"line":4685},11,[4356,4687,4688],{"class":4639}," \"eagerness\": \"moderate\"\n",[4356,4690,4692],{"class":4358,"line":4691},12,[4356,4693,4694],{"class":4639}," }]\n",[4356,4696,4698],{"class":4358,"line":4697},13,[4356,4699,4700],{"class":4639},"}\n",[4356,4702,4704,4707,4709],{"class":4358,"line":4703},14,[4356,4705,4706],{"class":4361},""," hint.",[4286,4834,4835,4841],{},[4309,4836,4837,4838,4796],{},"LCP render delay (",[4290,4839,4840],{},"lcp-render-delay-insight"," Measures the gap between resource load complete and paint. High render delay means render-blocking CSS or JavaScript, or long main thread tasks like hydration blocking the compositor.",[4286,4843,4844,4850],{},[4309,4845,4846,4847,4796],{},"LCP breakdown (",[4290,4848,4849],{},"lcp-phases-insight"," Shows the four-part lifecycle: TTFB, resource load delay, resource load duration, and element render delay. Target under 10% for both load delay and render delay.",[4348,4852,4856],{"className":4853,"code":4854,"language":4855,"meta":1843,"style":1843},"language-bash shiki shiki-themes github-light github-light material-theme-palenight","npx lighthouse https://your-site.com \\\n --output=json \\\n | jq '.audits[\"lcp-phases-insight\"], .audits[\"lcp-discovery-insight\"]'\n","bash",[4290,4857,4858,4874,4882],{"__ignoreMap":1843},[4356,4859,4860,4864,4867,4870],{"class":4358,"line":1766},[4356,4861,4863],{"class":4862},"sryBE","npx",[4356,4865,4866],{"class":4382}," lighthouse",[4356,4868,4869],{"class":4382}," https://your-site.com",[4356,4871,4873],{"class":4872},"smpaK"," \\\n",[4356,4875,4876,4880],{"class":4358,"line":1756},[4356,4877,4879],{"class":4878},"sJFDI"," --output=json",[4356,4881,4873],{"class":4872},[4356,4883,4884,4888,4891,4894,4897],{"class":4358,"line":1828},[4356,4885,4887],{"class":4886},"sc1V3"," |",[4356,4889,4890],{"class":4862}," jq",[4356,4892,4893],{"class":4378}," '",[4356,4895,4896],{"class":4382},".audits[\"lcp-phases-insight\"], .audits[\"lcp-discovery-insight\"]",[4356,4898,4899],{"class":4378},"'\n",[4327,4901,4903],{"id":4902},"_103-early-hints","103 Early Hints",[4286,4905,4906,4911],{},[4301,4907,4910],{"href":4908,"rel":4909},"https://developer.chrome.com/docs/web-platform/early-hints",[4305],"HTTP 103 Early Hints"," use \"server think time\" to send preload directives. While your origin builds HTML, the browser already started fetching CSS and the LCP image.",[4286,4913,4914,4915,4801,4920,4925,4926,4929,4930,4801,4935,4940],{},"Benchmarks from ",[4301,4916,4919],{"href":4917,"rel":4918},"https://www.shopify.com/blog/early-hints",[4305],"Shopify Engineering",[4301,4921,4924],{"href":4922,"rel":4923},"https://www.akamai.com/blog/performance/improving-performance-with-http-103-early-hints",[4305],"Akamai"," show ",[4309,4927,4928],{},"LCP improvements of 300ms to 500ms"," at the 75th percentile. ",[4301,4931,4934],{"href":4932,"rel":4933},"https://cloudflare.com",[4305],"Cloudflare",[4301,4936,4939],{"href":4937,"rel":4938},"https://vercel.com",[4305],"Vercel"," support Early Hints at the edge, caching link headers from your origin.",[4348,4942,4946],{"className":4943,"code":4944,"language":4945,"meta":1843,"style":1843},"language-js shiki shiki-themes github-light github-light material-theme-palenight","// Cloudflare Workers / Nitro handler\nexport default defineEventHandler(async (event) => {\n event.node.res.writeEarlyHints({\n link: [\n '; rel=preload; as=image; fetchpriority=high',\n '; rel=preload; as=style',\n ],\n })\n\n return await renderPage(event)\n})\n","js",[4290,4947,4948,4954,4989,5014,5025,5039,5050,5057,5065,5071,5088],{"__ignoreMap":1843},[4356,4949,4950],{"class":4358,"line":1766},[4356,4951,4953],{"class":4952},"sTBSN","// Cloudflare Workers / Nitro handler\n",[4356,4955,4956,4960,4963,4967,4970,4973,4976,4980,4983,4986],{"class":4358,"line":1756},[4356,4957,4959],{"class":4958},"smL2f","export",[4356,4961,4962],{"class":4958}," default",[4356,4964,4966],{"class":4965},"s0YkB"," defineEventHandler",[4356,4968,4969],{"class":4639},"(",[4356,4971,4412],{"class":4972},"swqme",[4356,4974,4975],{"class":4361}," (",[4356,4977,4979],{"class":4978},"sgUNn","event",[4356,4981,4982],{"class":4361},")",[4356,4984,4985],{"class":4972}," =>",[4356,4987,4988],{"class":4361}," {\n",[4356,4990,4991,4994,4996,4999,5001,5004,5006,5009,5012],{"class":4358,"line":1828},[4356,4992,4993],{"class":4639}," event",[4356,4995,4486],{"class":4361},[4356,4997,4998],{"class":4639},"node",[4356,5000,4486],{"class":4361},[4356,5002,5003],{"class":4639},"res",[4356,5005,4486],{"class":4361},[4356,5007,5008],{"class":4965},"writeEarlyHints",[4356,5010,4969],{"class":5011},"sqVJQ",[4356,5013,4640],{"class":4361},[4356,5015,5016,5019,5022],{"class":4358,"line":1749},[4356,5017,5018],{"class":5011}," link",[4356,5020,5021],{"class":4361},":",[4356,5023,5024],{"class":5011}," [\n",[4356,5026,5027,5030,5033,5036],{"class":4358,"line":1984},[4356,5028,5029],{"class":4378}," '",[4356,5031,5032],{"class":4382},"; rel=preload; as=image; fetchpriority=high",[4356,5034,5035],{"class":4378},"'",[4356,5037,5038],{"class":4361},",\n",[4356,5040,5041,5043,5046,5048],{"class":4358,"line":4431},[4356,5042,5029],{"class":4378},[4356,5044,5045],{"class":4382},"; rel=preload; as=style",[4356,5047,5035],{"class":4378},[4356,5049,5038],{"class":4361},[4356,5051,5052,5055],{"class":4358,"line":4446},[4356,5053,5054],{"class":5011}," ]",[4356,5056,5038],{"class":4361},[4356,5058,5059,5062],{"class":4358,"line":4461},[4356,5060,5061],{"class":4361}," }",[4356,5063,5064],{"class":5011},")\n",[4356,5066,5067],{"class":4358,"line":4673},[4356,5068,5070],{"emptyLinePlaceholder":5069},true,"\n",[4356,5072,5073,5076,5079,5082,5084,5086],{"class":4358,"line":4679},[4356,5074,5075],{"class":4958}," return",[4356,5077,5078],{"class":4958}," await",[4356,5080,5081],{"class":4965}," renderPage",[4356,5083,4969],{"class":5011},[4356,5085,4979],{"class":4639},[4356,5087,5064],{"class":5011},[4356,5089,5090,5093],{"class":4358,"line":4685},[4356,5091,5092],{"class":4361},"}",[4356,5094,5064],{"class":4639},[5096,5097,5098],"info",{},[4286,5099,5100,5101,5105,5106,5109],{},"Best practice from ",[4301,5102,5104],{"href":4917,"rel":5103},[4305],"Shopify's research",": limit to ",[4309,5107,5108],{},"2–4 critical resources"," (CSS and LCP image) to avoid bandwidth saturation on mobile.",[4327,5111,5113],{"id":5112},"view-transitions-and-lcp-measurement","View Transitions and LCP measurement",[4286,5115,5116,5121],{},[4301,5117,5120],{"href":5118,"rel":5119},"https://developer.chrome.com/docs/web-platform/view-transitions",[4305],"View Transitions API"," animates between page states with a compositor snapshot. This changes how Chrome measures LCP on soft navigations.",[4286,5123,5124,5125,5130,5131,5134],{},"Same-document View Transitions do not reset LCP. ",[4301,5126,5129],{"href":5127,"rel":5128},"https://developer.chrome.com/docs/web-platform/view-transitions/cross-document",[4305],"Cross-document View Transitions",", enabled via ",[4290,5132,5133],{},"@view-transition { navigation: auto }",", count as a new page load and start a fresh LCP measurement.",[4348,5136,5140],{"className":5137,"code":5138,"language":5139,"meta":1843,"style":1843},"language-css shiki shiki-themes github-light github-light material-theme-palenight","@view-transition {\n navigation: auto;\n}\n\n::view-transition-old(hero),\n::view-transition-new(hero) {\n animation-duration: 300ms;\n}\n\n.hero-image {\n view-transition-name: hero;\n}\n","css",[4290,5141,5142,5149,5154,5158,5162,5167,5174,5193,5197,5201,5211,5223],{"__ignoreMap":1843},[4356,5143,5144,5147],{"class":4358,"line":1766},[4356,5145,5146],{"class":4958},"@view-transition",[4356,5148,4988],{"class":4361},[4356,5150,5151],{"class":4358,"line":1756},[4356,5152,5153],{"class":4639}," navigation: auto;\n",[4356,5155,5156],{"class":4358,"line":1828},[4356,5157,4700],{"class":4639},[4356,5159,5160],{"class":4358,"line":1749},[4356,5161,5070],{"emptyLinePlaceholder":5069},[4356,5163,5164],{"class":4358,"line":1984},[4356,5165,5166],{"class":4639},"::view-transition-old(hero),\n",[4356,5168,5169,5172],{"class":4358,"line":4431},[4356,5170,5171],{"class":4639},"::view-transition-new(hero) ",[4356,5173,4640],{"class":4361},[4356,5175,5176,5180,5182,5186,5190],{"class":4358,"line":4446},[4356,5177,5179],{"class":5178},"sQZzC"," animation-duration",[4356,5181,5021],{"class":4361},[4356,5183,5185],{"class":5184},"sjz_z"," 300",[4356,5187,5189],{"class":5188},"sJXcV","ms",[4356,5191,5192],{"class":4361},";\n",[4356,5194,5195],{"class":4358,"line":4461},[4356,5196,4700],{"class":4361},[4356,5198,5199],{"class":4358,"line":4673},[4356,5200,5070],{"emptyLinePlaceholder":5069},[4356,5202,5203,5206,5209],{"class":4358,"line":4679},[4356,5204,4486],{"class":5205},"sy1TL",[4356,5207,5208],{"class":4862},"hero-image",[4356,5210,4988],{"class":4361},[4356,5212,5213,5216,5218,5221],{"class":4358,"line":4685},[4356,5214,5215],{"class":4872}," view-transition-name",[4356,5217,5021],{"class":4361},[4356,5219,5220],{"class":4639}," hero",[4356,5222,5192],{"class":4361},[4356,5224,5225],{"class":4358,"line":4691},[4356,5226,4700],{"class":4361},[4286,5228,5229,5230,5233],{},"The LCP element should have a ",[4290,5231,5232],{},"view-transition-name",". Browsers reuse the snapshot, so the next page reports the old LCP element as already painted. This drops LCP on the destination page to milliseconds.",[4286,5235,5236],{},"Watch for regressions. A slow transition animation extends the time before the new LCP element paints. Keep transitions under 400ms.",[4327,5238,5240],{"id":5239},"modern-image-formats","Modern image formats",[4286,5242,5243,5244,5249,5250,5255],{},"AVIF is table stakes. ",[4301,5245,5248],{"href":5246,"rel":5247},"https://web.dev/baseline",[4305],"Baseline 2024 browser support"," means no fallback math needed for most audiences. ",[4301,5251,5254],{"href":5252,"rel":5253},"https://web.dev/articles/avif",[4305],"AVIF delivers 30 to 50% smaller files than WebP"," at the same visual quality.",[4348,5257,5259],{"className":4350,"code":5258,"language":4352,"meta":1843,"style":1843},"\n \n \n \"Hero\"\n\n",[4290,5260,5261,5270,5302,5332,5371],{"__ignoreMap":1843},[4356,5262,5263,5265,5268],{"class":4358,"line":1766},[4356,5264,4362],{"class":4361},[4356,5266,5267],{"class":4365},"picture",[4356,5269,4464],{"class":4361},[4356,5271,5272,5275,5278,5280,5282,5284,5287,5289,5292,5294,5296,5298,5300],{"class":4358,"line":1756},[4356,5273,5274],{"class":4361}," <",[4356,5276,5277],{"class":4365},"source",[4356,5279,4623],{"class":4371},[4356,5281,4375],{"class":4361},[4356,5283,4379],{"class":4378},[4356,5285,5286],{"class":4382},"image/avif",[4356,5288,4379],{"class":4378},[4356,5290,5291],{"class":4371}," srcset",[4356,5293,4375],{"class":4361},[4356,5295,4379],{"class":4378},[4356,5297,4383],{"class":4382},[4356,5299,4379],{"class":4378},[4356,5301,4464],{"class":4361},[4356,5303,5304,5306,5308,5310,5312,5314,5317,5319,5321,5323,5325,5328,5330],{"class":4358,"line":1828},[4356,5305,5274],{"class":4361},[4356,5307,5277],{"class":4365},[4356,5309,4623],{"class":4371},[4356,5311,4375],{"class":4361},[4356,5313,4379],{"class":4378},[4356,5315,5316],{"class":4382},"image/webp",[4356,5318,4379],{"class":4378},[4356,5320,5291],{"class":4371},[4356,5322,4375],{"class":4361},[4356,5324,4379],{"class":4378},[4356,5326,5327],{"class":4382},"/hero.webp",[4356,5329,4379],{"class":4378},[4356,5331,4464],{"class":4361},[4356,5333,5334,5336,5338,5340,5342,5344,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369],{"class":4358,"line":1749},[4356,5335,5274],{"class":4361},[4356,5337,4498],{"class":4365},[4356,5339,4501],{"class":4371},[4356,5341,4375],{"class":4361},[4356,5343,4379],{"class":4378},[4356,5345,5346],{"class":4382},"/hero.jpg",[4356,5348,4379],{"class":4378},[4356,5350,4513],{"class":4371},[4356,5352,4375],{"class":4361},[4356,5354,4379],{"class":4378},[4356,5356,4398],{"class":4382},[4356,5358,4379],{"class":4378},[4356,5360,4537],{"class":4371},[4356,5362,4375],{"class":4361},[4356,5364,4379],{"class":4378},[4356,5366,4456],{"class":4382},[4356,5368,4379],{"class":4378},[4356,5370,4464],{"class":4361},[4356,5372,5373,5375,5377],{"class":4358,"line":1984},[4356,5374,4706],{"class":4361},[4356,5376,5267],{"class":4365},[4356,5378,4464],{"class":4361},[4286,5380,5381,5382,5387,5388,5393],{},"JPEG-XL status: ",[4301,5383,5386],{"href":5384,"rel":5385},"https://caniuse.com/jpegxl",[4305],"Safari shipped support in 17",", Chrome ",[4301,5389,5392],{"href":5390,"rel":5391},"https://bugs.chromium.org/p/chromium/issues/detail?id=1178058",[4305],"remains on hold",", Firefox behind a flag. Ship AVIF as primary, JPEG-XL as a progressive enhancement when your CDN supports content negotiation.",[4286,5395,5396],{},"Generate responsive AVIF with sharp or a managed service:",[4348,5398,5400],{"className":4943,"code":5399,"language":4945,"meta":1843,"style":1843},"import sharp from 'sharp'\n\nawait sharp('hero.jpg')\n .resize(1200)\n .avif({ quality: 50, effort: 6 })\n .toFile('hero-1200.avif')\n",[4290,5401,5402,5420,5424,5443,5457,5493],{"__ignoreMap":1843},[4356,5403,5404,5407,5410,5413,5415,5418],{"class":4358,"line":1766},[4356,5405,5406],{"class":4958},"import",[4356,5408,5409],{"class":4639}," sharp ",[4356,5411,5412],{"class":4958},"from",[4356,5414,4893],{"class":4378},[4356,5416,5417],{"class":4382},"sharp",[4356,5419,4899],{"class":4378},[4356,5421,5422],{"class":4358,"line":1756},[4356,5423,5070],{"emptyLinePlaceholder":5069},[4356,5425,5426,5429,5432,5434,5436,5439,5441],{"class":4358,"line":1828},[4356,5427,5428],{"class":4958},"await",[4356,5430,5431],{"class":4965}," sharp",[4356,5433,4969],{"class":4639},[4356,5435,5035],{"class":4378},[4356,5437,5438],{"class":4382},"hero.jpg",[4356,5440,5035],{"class":4378},[4356,5442,5064],{"class":4639},[4356,5444,5445,5448,5451,5453,5455],{"class":4358,"line":1749},[4356,5446,5447],{"class":4361}," .",[4356,5449,5450],{"class":4965},"resize",[4356,5452,4969],{"class":4639},[4356,5454,4426],{"class":5184},[4356,5456,5064],{"class":4639},[4356,5458,5459,5461,5464,5466,5469,5472,5474,5477,5480,5483,5485,5488,5491],{"class":4358,"line":1984},[4356,5460,5447],{"class":4361},[4356,5462,5463],{"class":4965},"avif",[4356,5465,4969],{"class":4639},[4356,5467,5468],{"class":4361},"{",[4356,5470,5471],{"class":5011}," quality",[4356,5473,5021],{"class":4361},[4356,5475,5476],{"class":5184}," 50",[4356,5478,5479],{"class":4361},",",[4356,5481,5482],{"class":5011}," effort",[4356,5484,5021],{"class":4361},[4356,5486,5487],{"class":5184}," 6",[4356,5489,5490],{"class":4361}," }",[4356,5492,5064],{"class":4639},[4356,5494,5495,5497,5500,5502,5504,5507,5509],{"class":4358,"line":4431},[4356,5496,5447],{"class":4361},[4356,5498,5499],{"class":4965},"toFile",[4356,5501,4969],{"class":4639},[4356,5503,5035],{"class":4378},[4356,5505,5506],{"class":4382},"hero-1200.avif",[4356,5508,5035],{"class":4378},[4356,5510,5064],{"class":4639},[4286,5512,5513,5514,5518],{},"For bulk LCP image auditing across a site, scan with ",[4301,5515,5517],{"href":5516},"/","Unlighthouse"," which reports LCP image formats, dimensions, and byte weight per page.",[4327,5520,5522],{"id":5521},"font-loading-with-size-adjust","Font loading with size-adjust",[4286,5524,5525,5540,5541,5544],{},[4301,5526,5529,5532,5533,5536,5537],{"href":5527,"rel":5528},"https://developer.chrome.com/blog/font-fallbacks",[4305],[4290,5530,5531],{},"size-adjust",", ",[4290,5534,5535],{},"ascent-override",", and ",[4290,5538,5539],{},"descent-override"," eliminate layout shift from font swaps while keeping text paintable immediately. This makes ",[4290,5542,5543],{},"font-display: optional"," viable for LCP-relevant text.",[4348,5546,5548],{"className":5137,"code":5547,"language":5139,"meta":1843,"style":1843},"@font-face {\n font-family: 'Inter Fallback';\n src: local('Arial');\n size-adjust: 107%;\n ascent-override: 90%;\n descent-override: 22%;\n line-gap-override: 0%;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('/fonts/inter.woff2') format('woff2');\n font-display: optional;\n}\n\nbody {\n font-family: 'Inter', 'Inter Fallback', sans-serif;\n}\n",[4290,5549,5550,5557,5573,5595,5610,5624,5638,5652,5656,5660,5666,5681,5715,5727,5731,5736,5745,5773],{"__ignoreMap":1843},[4356,5551,5552,5555],{"class":4358,"line":1766},[4356,5553,5554],{"class":4958},"@font-face",[4356,5556,4988],{"class":4361},[4356,5558,5559,5562,5564,5566,5569,5571],{"class":4358,"line":1756},[4356,5560,5561],{"class":5178}," font-family",[4356,5563,5021],{"class":4361},[4356,5565,4893],{"class":4378},[4356,5567,5568],{"class":4382},"Inter Fallback",[4356,5570,5035],{"class":4378},[4356,5572,5192],{"class":4361},[4356,5574,5575,5577,5579,5583,5585,5587,5590,5592],{"class":4358,"line":1828},[4356,5576,4372],{"class":5178},[4356,5578,5021],{"class":4361},[4356,5580,5582],{"class":5581},"sJtTG"," local",[4356,5584,4969],{"class":4361},[4356,5586,5035],{"class":4378},[4356,5588,5589],{"class":4382},"Arial",[4356,5591,5035],{"class":4378},[4356,5593,5594],{"class":4361},");\n",[4356,5596,5597,5600,5602,5605,5608],{"class":4358,"line":1749},[4356,5598,5599],{"class":5178}," size-adjust",[4356,5601,5021],{"class":4361},[4356,5603,5604],{"class":5184}," 107",[4356,5606,5607],{"class":5188},"%",[4356,5609,5192],{"class":4361},[4356,5611,5612,5615,5617,5620,5622],{"class":4358,"line":1984},[4356,5613,5614],{"class":4872}," ascent-override",[4356,5616,5021],{"class":4361},[4356,5618,5619],{"class":5184}," 90",[4356,5621,5607],{"class":5188},[4356,5623,5192],{"class":4361},[4356,5625,5626,5629,5631,5634,5636],{"class":4358,"line":4431},[4356,5627,5628],{"class":4872}," descent-override",[4356,5630,5021],{"class":4361},[4356,5632,5633],{"class":5184}," 22",[4356,5635,5607],{"class":5188},[4356,5637,5192],{"class":4361},[4356,5639,5640,5643,5645,5648,5650],{"class":4358,"line":4446},[4356,5641,5642],{"class":4872}," line-gap-override",[4356,5644,5021],{"class":4361},[4356,5646,5647],{"class":5184}," 0",[4356,5649,5607],{"class":5188},[4356,5651,5192],{"class":4361},[4356,5653,5654],{"class":4358,"line":4461},[4356,5655,4700],{"class":4361},[4356,5657,5658],{"class":4358,"line":4673},[4356,5659,5070],{"emptyLinePlaceholder":5069},[4356,5661,5662,5664],{"class":4358,"line":4679},[4356,5663,5554],{"class":4958},[4356,5665,4988],{"class":4361},[4356,5667,5668,5670,5672,5674,5677,5679],{"class":4358,"line":4685},[4356,5669,5561],{"class":5178},[4356,5671,5021],{"class":4361},[4356,5673,4893],{"class":4378},[4356,5675,5676],{"class":4382},"Inter",[4356,5678,5035],{"class":4378},[4356,5680,5192],{"class":4361},[4356,5682,5683,5685,5687,5690,5692,5694,5697,5699,5701,5704,5706,5708,5711,5713],{"class":4358,"line":4691},[4356,5684,4372],{"class":5178},[4356,5686,5021],{"class":4361},[4356,5688,5689],{"class":5581}," url",[4356,5691,4969],{"class":4361},[4356,5693,5035],{"class":4378},[4356,5695,5696],{"class":4382},"/fonts/inter.woff2",[4356,5698,5035],{"class":4378},[4356,5700,4982],{"class":4361},[4356,5702,5703],{"class":5581}," format",[4356,5705,4969],{"class":4361},[4356,5707,5035],{"class":4378},[4356,5709,5710],{"class":4382},"woff2",[4356,5712,5035],{"class":4378},[4356,5714,5594],{"class":4361},[4356,5716,5717,5720,5722,5725],{"class":4358,"line":4697},[4356,5718,5719],{"class":5178}," font-display",[4356,5721,5021],{"class":4361},[4356,5723,5724],{"class":4872}," optional",[4356,5726,5192],{"class":4361},[4356,5728,5729],{"class":4358,"line":4703},[4356,5730,4700],{"class":4361},[4356,5732,5734],{"class":4358,"line":5733},15,[4356,5735,5070],{"emptyLinePlaceholder":5069},[4356,5737,5739,5743],{"class":4358,"line":5738},16,[4356,5740,5742],{"class":5741},"sTwkl","body",[4356,5744,4988],{"class":4361},[4356,5746,5748,5750,5752,5754,5756,5758,5760,5762,5764,5766,5768,5771],{"class":4358,"line":5747},17,[4356,5749,5561],{"class":5178},[4356,5751,5021],{"class":4361},[4356,5753,4893],{"class":4378},[4356,5755,5676],{"class":4382},[4356,5757,5035],{"class":4378},[4356,5759,5479],{"class":4361},[4356,5761,4893],{"class":4378},[4356,5763,5568],{"class":4382},[4356,5765,5035],{"class":4378},[4356,5767,5479],{"class":4361},[4356,5769,5770],{"class":4872}," sans-serif",[4356,5772,5192],{"class":4361},[4356,5774,5776],{"class":4358,"line":5775},18,[4356,5777,4700],{"class":4361},[4286,5779,5780,5782],{},[4290,5781,5543],{}," tells the browser: if the font is not cached within 100ms, use the fallback and never swap. No FOUT, no CLS, and text contributes to LCP on first paint.",[4286,5784,5785,5786,5788,5789,5794,5795,5800],{},"For the LCP element specifically, ",[4290,5787,4321],{}," with a metrics-matched fallback still wins because the fallback text paints immediately. Use the ",[4301,5790,5793],{"href":5791,"rel":5792},"https://github.com/nuxt/fonts",[4305],"Fontaine"," or ",[4301,5796,5799],{"href":5797,"rel":5798},"https://seek-oss.github.io/capsize/",[4305],"Capsize"," library to generate size-adjust values automatically.",[4327,5802,5804],{"id":5803},"inp-impact-on-paint-order","INP impact on paint order",[4286,5806,5807,5809],{},[4301,5808,3952],{"href":3986}," reshapes paint order. A page with long tasks during hydration pushes LCP later because the compositor waits for the main thread to flush.",[4286,5811,5812],{},"Yield to the main thread during hydration:",[4348,5814,5816],{"className":4943,"code":5815,"language":4945,"meta":1843,"style":1843},"async function hydrateWithYield(components) {\n for (const component of components) {\n await scheduler.yield()\n hydrate(component)\n }\n}\n",[4290,5817,5818,5837,5861,5877,5889,5894],{"__ignoreMap":1843},[4356,5819,5820,5822,5825,5828,5830,5833,5835],{"class":4358,"line":1766},[4356,5821,4412],{"class":4972},[4356,5823,5824],{"class":4972}," function",[4356,5826,5827],{"class":4965}," hydrateWithYield",[4356,5829,4969],{"class":4361},[4356,5831,5832],{"class":4978},"components",[4356,5834,4982],{"class":4361},[4356,5836,4988],{"class":4361},[4356,5838,5839,5842,5844,5847,5850,5853,5856,5859],{"class":4358,"line":1756},[4356,5840,5841],{"class":4958}," for",[4356,5843,4975],{"class":5011},[4356,5845,5846],{"class":4972},"const",[4356,5848,5849],{"class":4872}," component",[4356,5851,5852],{"class":4886}," of",[4356,5854,5855],{"class":4639}," components",[4356,5857,5858],{"class":5011},") ",[4356,5860,4640],{"class":4361},[4356,5862,5863,5866,5869,5871,5874],{"class":4358,"line":1828},[4356,5864,5865],{"class":4958}," await",[4356,5867,5868],{"class":4639}," scheduler",[4356,5870,4486],{"class":4361},[4356,5872,5873],{"class":4965},"yield",[4356,5875,5876],{"class":5011},"()\n",[4356,5878,5879,5882,5884,5887],{"class":4358,"line":1749},[4356,5880,5881],{"class":4965}," hydrate",[4356,5883,4969],{"class":5011},[4356,5885,5886],{"class":4639},"component",[4356,5888,5064],{"class":5011},[4356,5890,5891],{"class":4358,"line":1984},[4356,5892,5893],{"class":4361}," }\n",[4356,5895,5896],{"class":4358,"line":4431},[4356,5897,4700],{"class":4361},[4286,5899,5900,5918],{},[4301,5901,5904],{"href":5902,"rel":5903},"https://developer.chrome.com/blog/introducing-scheduler-yield",[4305],[4290,5905,5908,5911,5913,5915],{"className":5906,"language":5907,"style":1843},"language-ts shiki shiki-themes github-light github-light material-theme-palenight","ts",[4356,5909,5910],{"class":4639},"scheduler",[4356,5912,4486],{"class":4361},[4356,5914,5873],{"class":4965},[4356,5916,5917],{"class":4639},"()"," ships in Chrome 129+. It yields to the browser for paint and input, then resumes. Use it in any loop that runs during hydration.",[4286,5920,5921,5922,5933],{},"Break up hydration with ",[4290,5923,5924,5926,5928,5931],{"className":5906,"language":5907,"style":1843},[4356,5925,5910],{"class":4639},[4356,5927,4486],{"class":4361},[4356,5929,5930],{"class":4965},"postTask",[4356,5932,5917],{"class":4639}," for priority-aware scheduling:",[4348,5935,5937],{"className":4943,"code":5936,"language":4945,"meta":1843,"style":1843},"scheduler.postTask(() => hydrateAboveFold(), { priority: 'user-blocking' })\nscheduler.postTask(() => hydrateInteractive(), { priority: 'user-visible' })\nscheduler.postTask(() => hydrateBelowFold(), { priority: 'background' })\n",[4290,5938,5939,5979,6017],{"__ignoreMap":1843},[4356,5940,5941,5943,5945,5947,5949,5951,5953,5956,5958,5960,5963,5966,5968,5970,5973,5975,5977],{"class":4358,"line":1766},[4356,5942,5910],{"class":4639},[4356,5944,4486],{"class":4361},[4356,5946,5930],{"class":4965},[4356,5948,4969],{"class":4639},[4356,5950,5917],{"class":4361},[4356,5952,4985],{"class":4972},[4356,5954,5955],{"class":4965}," hydrateAboveFold",[4356,5957,5917],{"class":4639},[4356,5959,5479],{"class":4361},[4356,5961,5962],{"class":4361}," {",[4356,5964,5965],{"class":5011}," priority",[4356,5967,5021],{"class":4361},[4356,5969,4893],{"class":4378},[4356,5971,5972],{"class":4382},"user-blocking",[4356,5974,5035],{"class":4378},[4356,5976,5490],{"class":4361},[4356,5978,5064],{"class":4639},[4356,5980,5981,5983,5985,5987,5989,5991,5993,5996,5998,6000,6002,6004,6006,6008,6011,6013,6015],{"class":4358,"line":1756},[4356,5982,5910],{"class":4639},[4356,5984,4486],{"class":4361},[4356,5986,5930],{"class":4965},[4356,5988,4969],{"class":4639},[4356,5990,5917],{"class":4361},[4356,5992,4985],{"class":4972},[4356,5994,5995],{"class":4965}," hydrateInteractive",[4356,5997,5917],{"class":4639},[4356,5999,5479],{"class":4361},[4356,6001,5962],{"class":4361},[4356,6003,5965],{"class":5011},[4356,6005,5021],{"class":4361},[4356,6007,4893],{"class":4378},[4356,6009,6010],{"class":4382},"user-visible",[4356,6012,5035],{"class":4378},[4356,6014,5490],{"class":4361},[4356,6016,5064],{"class":4639},[4356,6018,6019,6021,6023,6025,6027,6029,6031,6034,6036,6038,6040,6042,6044,6046,6049,6051,6053],{"class":4358,"line":1828},[4356,6020,5910],{"class":4639},[4356,6022,4486],{"class":4361},[4356,6024,5930],{"class":4965},[4356,6026,4969],{"class":4639},[4356,6028,5917],{"class":4361},[4356,6030,4985],{"class":4972},[4356,6032,6033],{"class":4965}," hydrateBelowFold",[4356,6035,5917],{"class":4639},[4356,6037,5479],{"class":4361},[4356,6039,5962],{"class":4361},[4356,6041,5965],{"class":5011},[4356,6043,5021],{"class":4361},[4356,6045,4893],{"class":4378},[4356,6047,6048],{"class":4382},"background",[4356,6050,5035],{"class":4378},[4356,6052,5490],{"class":4361},[4356,6054,5064],{"class":4639},[4286,6056,6057,6058,6063],{},"Hydration scheduling alone ",[4301,6059,6062],{"href":6060,"rel":6061},"https://web.dev/articles/inp#optimizing_inp",[4305],"can move LCP by 200ms to 500ms"," on component-heavy pages.",[4327,6065,6067],{"id":6066},"http3-and-bbr","HTTP/3 and BBR",[4286,6069,6070,6075,6076,4486],{},[4301,6071,6074],{"href":6072,"rel":6073},"https://web.dev/articles/performance-http3",[4305],"HTTP/3 with QUIC"," eliminates TCP head-of-line blocking. One lost packet no longer stalls every stream. On lossy mobile networks, ",[4301,6077,6080],{"href":6078,"rel":6079},"https://blog.cloudflare.com/http3-the-past-present-and-future/",[4305],"HTTP/3 drops TTFB by 10 to 25%",[4286,6082,6083],{},"Every major CDN ships HTTP/3 by default in 2026: Cloudflare, Fastly, Akamai, CloudFront. Verify:",[4348,6085,6087],{"className":4853,"code":6086,"language":4855,"meta":1843,"style":1843},"curl -sI --http3 https://your-site.com | head -1\n",[4290,6088,6089],{"__ignoreMap":1843},[4356,6090,6091,6094,6097,6100,6102,6105,6108],{"class":4358,"line":1766},[4356,6092,6093],{"class":4862},"curl",[4356,6095,6096],{"class":4878}," -sI",[4356,6098,6099],{"class":4878}," --http3",[4356,6101,4869],{"class":4382},[4356,6103,6104],{"class":4886}," |",[4356,6106,6107],{"class":4862}," head",[4356,6109,6110],{"class":4878}," -1\n",[4286,6112,6113,6117,6118,6123],{},[4301,6114,6116],{"href":6078,"rel":6115},[4305],"BBR congestion control"," replaces CUBIC on Cloudflare, Google Cloud, and many origins. ",[4301,6119,6122],{"href":6120,"rel":6121},"https://cloud.google.com/blog/products/networking/tcp-bbr-congestion-control-comes-to-gcp-and-your-internet-experience",[4305],"BBR probes bandwidth"," instead of waiting for packet loss, which improves throughput on high-RTT connections.",[4286,6125,6126],{},"Check server support:",[4348,6128,6130],{"className":4853,"code":6129,"language":4855,"meta":1843,"style":1843},"sysctl net.ipv4.tcp_congestion_control\n# Should output: bbr or bbr2\n",[4290,6131,6132,6140],{"__ignoreMap":1843},[4356,6133,6134,6137],{"class":4358,"line":1766},[4356,6135,6136],{"class":4862},"sysctl",[4356,6138,6139],{"class":4382}," net.ipv4.tcp_congestion_control\n",[4356,6141,6142],{"class":4358,"line":1756},[4356,6143,6144],{"class":4952},"# Should output: bbr or bbr2\n",[4286,6146,6147],{},"If your origin runs CUBIC, switch. The change typically shaves 50ms to 200ms off LCP resource load duration.",[4327,6149,6151],{"id":6150},"edge-rendering-and-streaming-ssr","Edge rendering and streaming SSR",[4286,6153,6154],{},"Edge rendering on Cloudflare Workers, Vercel Edge, or Deno Deploy collapses TTFB to under 100ms globally. With the origin 20ms from the user, the entire LCP budget opens up for rendering and network.",[4286,6156,6157,6158,5021],{},"Streaming SSR pairs naturally. Send the critical HTML for the LCP element ",[4301,6159,6162],{"href":6160,"rel":6161},"https://web.dev/articles/streaming-ssr",[4305],"before data-dependent sections finish",[4348,6164,6166],{"className":5906,"code":6165,"language":5907,"meta":1843,"style":1843},"// Nitro / h3 streaming\nexport default defineEventHandler(async (event) => {\n return new ReadableStream({\n async start(controller) {\n controller.enqueue(encoder.encode(`\n \n \n \n \n \"Hero\"\n `))\n\n const data = await fetchSlowData()\n controller.enqueue(encoder.encode(renderRest(data)))\n controller.enqueue(encoder.encode(''))\n controller.close()\n },\n })\n})\n",[4290,6167,6168,6173,6195,6209,6227,6252,6257,6262,6267,6272,6277,6285,6289,6307,6336,6363,6374,6378,6384],{"__ignoreMap":1843},[4356,6169,6170],{"class":4358,"line":1766},[4356,6171,6172],{"class":4952},"// Nitro / h3 streaming\n",[4356,6174,6175,6177,6179,6181,6183,6185,6187,6189,6191,6193],{"class":4358,"line":1756},[4356,6176,4959],{"class":4958},[4356,6178,4962],{"class":4958},[4356,6180,4966],{"class":4965},[4356,6182,4969],{"class":4639},[4356,6184,4412],{"class":4972},[4356,6186,4975],{"class":4361},[4356,6188,4979],{"class":4978},[4356,6190,4982],{"class":4361},[4356,6192,4985],{"class":4972},[4356,6194,4988],{"class":4361},[4356,6196,6197,6199,6202,6205,6207],{"class":4358,"line":1828},[4356,6198,5075],{"class":4958},[4356,6200,6201],{"class":4886}," new",[4356,6203,6204],{"class":4965}," ReadableStream",[4356,6206,4969],{"class":5011},[4356,6208,4640],{"class":4361},[4356,6210,6211,6214,6218,6220,6223,6225],{"class":4358,"line":1749},[4356,6212,6213],{"class":4972}," async",[4356,6215,6217],{"class":6216},"sBBN6"," start",[4356,6219,4969],{"class":4361},[4356,6221,6222],{"class":4978},"controller",[4356,6224,4982],{"class":4361},[4356,6226,4988],{"class":4361},[4356,6228,6229,6232,6234,6237,6239,6242,6244,6247,6249],{"class":4358,"line":1984},[4356,6230,6231],{"class":4639}," controller",[4356,6233,4486],{"class":4361},[4356,6235,6236],{"class":4965},"enqueue",[4356,6238,4969],{"class":5011},[4356,6240,6241],{"class":4639},"encoder",[4356,6243,4486],{"class":4361},[4356,6245,6246],{"class":4965},"encode",[4356,6248,4969],{"class":5011},[4356,6250,6251],{"class":4378},"`\n",[4356,6253,6254],{"class":4358,"line":4431},[4356,6255,6256],{"class":4382}," \n",[4356,6258,6259],{"class":4358,"line":4446},[4356,6260,6261],{"class":4382}," \n",[4356,6263,6264],{"class":4358,"line":4461},[4356,6265,6266],{"class":4382}," \n",[4356,6268,6269],{"class":4358,"line":4673},[4356,6270,6271],{"class":4382}," \n",[4356,6273,6274],{"class":4358,"line":4679},[4356,6275,6276],{"class":4382}," \"Hero\"\n",[4356,6278,6279,6282],{"class":4358,"line":4685},[4356,6280,6281],{"class":4378}," `",[4356,6283,6284],{"class":5011},"))\n",[4356,6286,6287],{"class":4358,"line":4691},[4356,6288,5070],{"emptyLinePlaceholder":5069},[4356,6290,6291,6294,6297,6300,6302,6305],{"class":4358,"line":4697},[4356,6292,6293],{"class":4972}," const",[4356,6295,6296],{"class":4872}," data",[4356,6298,6299],{"class":4886}," =",[4356,6301,5078],{"class":4958},[4356,6303,6304],{"class":4965}," fetchSlowData",[4356,6306,5876],{"class":5011},[4356,6308,6309,6311,6313,6315,6317,6319,6321,6323,6325,6328,6330,6333],{"class":4358,"line":4703},[4356,6310,6231],{"class":4639},[4356,6312,4486],{"class":4361},[4356,6314,6236],{"class":4965},[4356,6316,4969],{"class":5011},[4356,6318,6241],{"class":4639},[4356,6320,4486],{"class":4361},[4356,6322,6246],{"class":4965},[4356,6324,4969],{"class":5011},[4356,6326,6327],{"class":4965},"renderRest",[4356,6329,4969],{"class":5011},[4356,6331,6332],{"class":4639},"data",[4356,6334,6335],{"class":5011},")))\n",[4356,6337,6338,6340,6342,6344,6346,6348,6350,6352,6354,6356,6359,6361],{"class":4358,"line":5733},[4356,6339,6231],{"class":4639},[4356,6341,4486],{"class":4361},[4356,6343,6236],{"class":4965},[4356,6345,4969],{"class":5011},[4356,6347,6241],{"class":4639},[4356,6349,4486],{"class":4361},[4356,6351,6246],{"class":4965},[4356,6353,4969],{"class":5011},[4356,6355,5035],{"class":4378},[4356,6357,6358],{"class":4382},"",[4356,6360,5035],{"class":4378},[4356,6362,6284],{"class":5011},[4356,6364,6365,6367,6369,6372],{"class":4358,"line":5738},[4356,6366,6231],{"class":4639},[4356,6368,4486],{"class":4361},[4356,6370,6371],{"class":4965},"close",[4356,6373,5876],{"class":5011},[4356,6375,6376],{"class":4358,"line":5747},[4356,6377,4682],{"class":4361},[4356,6379,6380,6382],{"class":4358,"line":5775},[4356,6381,5061],{"class":4361},[4356,6383,5064],{"class":5011},[4356,6385,6387,6389],{"class":4358,"line":6386},19,[4356,6388,5092],{"class":4361},[4356,6390,5064],{"class":4639},[4286,6392,6393],{},"The browser receives the LCP image URL in the first flush. Resource discovery happens while the origin still fetches data for the footer.",[4327,6395,6397],{"id":6396},"framework-specifics","Framework specifics",[6399,6400,6402],"h3",{"id":6401},"nextjs-15-partial-prerendering","Next.js 15 Partial Prerendering",[4286,6404,6405,6410],{},[4301,6406,6409],{"href":6407,"rel":6408},"https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering",[4305],"Partial Prerendering"," prerenders static shells at build time, then streams dynamic holes. The LCP element lives in the static shell, which ships from the edge in under 50ms.",[4348,6412,6416],{"className":6413,"code":6414,"language":6415,"meta":1843,"style":1843},"language-tsx shiki shiki-themes github-light github-light material-theme-palenight","// app/page.tsx\nexport const experimental_ppr = true\n\nexport default function Page() {\n return (\n <>\n \n }>\n \n \n \n )\n}\n","tsx",[4290,6417,6418,6423,6428,6432,6437,6442,6447,6452,6457,6462,6467,6472,6477],{"__ignoreMap":1843},[4356,6419,6420],{"class":4358,"line":1766},[4356,6421,6422],{},"// app/page.tsx\n",[4356,6424,6425],{"class":4358,"line":1756},[4356,6426,6427],{},"export const experimental_ppr = true\n",[4356,6429,6430],{"class":4358,"line":1828},[4356,6431,5070],{"emptyLinePlaceholder":5069},[4356,6433,6434],{"class":4358,"line":1749},[4356,6435,6436],{},"export default function Page() {\n",[4356,6438,6439],{"class":4358,"line":1984},[4356,6440,6441],{}," return (\n",[4356,6443,6444],{"class":4358,"line":4431},[4356,6445,6446],{}," <>\n",[4356,6448,6449],{"class":4358,"line":4446},[4356,6450,6451],{}," \n",[4356,6453,6454],{"class":4358,"line":4461},[4356,6455,6456],{}," }>\n",[4356,6458,6459],{"class":4358,"line":4673},[4356,6460,6461],{}," \n",[4356,6463,6464],{"class":4358,"line":4679},[4356,6465,6466],{}," \n",[4356,6468,6469],{"class":4358,"line":4685},[4356,6470,6471],{}," \n",[4356,6473,6474],{"class":4358,"line":4691},[4356,6475,6476],{}," )\n",[4356,6478,6479],{"class":4358,"line":4697},[4356,6480,4700],{},[4286,6482,6483,6484,6494],{},"The ",[4290,6485,6486,6488,6491],{"className":4350,"language":4352,"style":1843},[4356,6487,4362],{"class":4361},[4356,6489,4456],{"class":6490},"sFfpx",[4356,6492,6493],{"class":4361}," />"," prerenders. The suspended boundary streams from the server. LCP reports on the hero, which is already cached at the edge.",[6399,6496,6498],{"id":6497},"nuxt-4-payload-extraction","Nuxt 4 payload extraction",[4286,6500,6501,6502,6505,6506,6511],{},"Nuxt 4 automatically extracts ",[4290,6503,6504],{},"useAsyncData"," payloads into static JSON, avoiding a round-trip to the server on client navigation. For SSR pages, enable ",[4301,6507,6510],{"href":6508,"rel":6509},"https://nuxt.com/docs/guide/concepts/rendering",[4305],"payload extraction"," and preload:",[4348,6513,6515],{"className":5906,"code":6514,"language":5907,"meta":1843,"style":1843},"// nuxt.config.ts\nexport default defineNuxtConfig({\n experimental: {\n payloadExtraction: true,\n renderJsonPayloads: true,\n viewTransition: true,\n },\n nitro: {\n prerender: {\n crawlLinks: true,\n routes: ['/'],\n },\n compressPublicAssets: { brotli: true },\n },\n})\n",[4290,6516,6517,6522,6535,6544,6557,6568,6579,6584,6593,6602,6613,6634,6638,6657,6661],{"__ignoreMap":1843},[4356,6518,6519],{"class":4358,"line":1766},[4356,6520,6521],{"class":4952},"// nuxt.config.ts\n",[4356,6523,6524,6526,6528,6531,6533],{"class":4358,"line":1756},[4356,6525,4959],{"class":4958},[4356,6527,4962],{"class":4958},[4356,6529,6530],{"class":4965}," defineNuxtConfig",[4356,6532,4969],{"class":4639},[4356,6534,4640],{"class":4361},[4356,6536,6537,6540,6542],{"class":4358,"line":1828},[4356,6538,6539],{"class":5011}," experimental",[4356,6541,5021],{"class":4361},[4356,6543,4988],{"class":4361},[4356,6545,6546,6549,6551,6555],{"class":4358,"line":1749},[4356,6547,6548],{"class":5011}," payloadExtraction",[4356,6550,5021],{"class":4361},[4356,6552,6554],{"class":6553},"sGFTI"," true",[4356,6556,5038],{"class":4361},[4356,6558,6559,6562,6564,6566],{"class":4358,"line":1984},[4356,6560,6561],{"class":5011}," renderJsonPayloads",[4356,6563,5021],{"class":4361},[4356,6565,6554],{"class":6553},[4356,6567,5038],{"class":4361},[4356,6569,6570,6573,6575,6577],{"class":4358,"line":4431},[4356,6571,6572],{"class":5011}," viewTransition",[4356,6574,5021],{"class":4361},[4356,6576,6554],{"class":6553},[4356,6578,5038],{"class":4361},[4356,6580,6581],{"class":4358,"line":4446},[4356,6582,6583],{"class":4361}," },\n",[4356,6585,6586,6589,6591],{"class":4358,"line":4461},[4356,6587,6588],{"class":5011}," nitro",[4356,6590,5021],{"class":4361},[4356,6592,4988],{"class":4361},[4356,6594,6595,6598,6600],{"class":4358,"line":4673},[4356,6596,6597],{"class":5011}," prerender",[4356,6599,5021],{"class":4361},[4356,6601,4988],{"class":4361},[4356,6603,6604,6607,6609,6611],{"class":4358,"line":4679},[4356,6605,6606],{"class":5011}," crawlLinks",[4356,6608,5021],{"class":4361},[4356,6610,6554],{"class":6553},[4356,6612,5038],{"class":4361},[4356,6614,6615,6618,6620,6623,6625,6627,6629,6632],{"class":4358,"line":4685},[4356,6616,6617],{"class":5011}," routes",[4356,6619,5021],{"class":4361},[4356,6621,6622],{"class":4639}," [",[4356,6624,5035],{"class":4378},[4356,6626,5516],{"class":4382},[4356,6628,5035],{"class":4378},[4356,6630,6631],{"class":4639},"]",[4356,6633,5038],{"class":4361},[4356,6635,6636],{"class":4358,"line":4691},[4356,6637,4682],{"class":4361},[4356,6639,6640,6643,6645,6647,6650,6652,6654],{"class":4358,"line":4697},[4356,6641,6642],{"class":5011}," compressPublicAssets",[4356,6644,5021],{"class":4361},[4356,6646,5962],{"class":4361},[4356,6648,6649],{"class":5011}," brotli",[4356,6651,5021],{"class":4361},[4356,6653,6554],{"class":6553},[4356,6655,6656],{"class":4361}," },\n",[4356,6658,6659],{"class":4358,"line":4703},[4356,6660,6583],{"class":4361},[4356,6662,6663,6665],{"class":4358,"line":5733},[4356,6664,5092],{"class":4361},[4356,6666,5064],{"class":4639},[4286,6668,6669,6670,6692],{},"Pair with ",[4290,6671,6672,6674,6677,6680,6682,6684,6686,6688,6690],{"className":4350,"language":4352,"style":1843},[4356,6673,4362],{"class":4361},[4356,6675,6676],{"class":6490},"NuxtImg",[4356,6678,6679],{"class":4371}," preload",[4356,6681,4513],{"class":4371},[4356,6683,4375],{"class":4361},[4356,6685,4379],{"class":4378},[4356,6687,4398],{"class":4382},[4356,6689,4379],{"class":4378},[4356,6691,4831],{"class":4361}," for the LCP element.",[6399,6694,6696],{"id":6695},"astro-islands","Astro Islands",[4286,6698,6699,6703,6704,4486],{},[4301,6700,6696],{"href":6701,"rel":6702},"https://docs.astro.build/en/concepts/islands/",[4305]," ship zero JavaScript by default. The LCP element is pure HTML, which means ",[4301,6705,6708],{"href":6706,"rel":6707},"https://docs.astro.build/en/concepts/why-astro/#island-architecture",[4305],"render delay approaches zero",[4348,6710,6714],{"className":6711,"code":6712,"language":6713,"meta":1843,"style":1843},"language-astro shiki shiki-themes github-light github-light material-theme-palenight","---\nimport Hero from '../components/Hero.astro'\nimport InteractiveCart from '../components/Cart.svelte'\n---\n\n\n\n","astro",[4290,6715,6716,6721,6726,6731,6735,6739,6744],{"__ignoreMap":1843},[4356,6717,6718],{"class":4358,"line":1766},[4356,6719,6720],{},"---\n",[4356,6722,6723],{"class":4358,"line":1756},[4356,6724,6725],{},"import Hero from '../components/Hero.astro'\n",[4356,6727,6728],{"class":4358,"line":1828},[4356,6729,6730],{},"import InteractiveCart from '../components/Cart.svelte'\n",[4356,6732,6733],{"class":4358,"line":1749},[4356,6734,6720],{},[4356,6736,6737],{"class":4358,"line":1984},[4356,6738,5070],{"emptyLinePlaceholder":5069},[4356,6740,6741],{"class":4358,"line":4431},[4356,6742,6743],{},"\n",[4356,6745,6746],{"class":4358,"line":4446},[4356,6747,6748],{},"\n",[4286,6750,6751,6754],{},[4290,6752,6753],{},"client:visible"," hydrates the cart only when it scrolls into view. The LCP hero paints without waiting for any JavaScript bundle.",[4327,6756,6758],{"id":6757},"verify-with-field-data","Verify with field data",[4286,6760,6761,6762,6767],{},"Lab scores lie. ",[4301,6763,6766],{"href":6764,"rel":6765},"https://developer.chrome.com/docs/crux",[4305],"CrUX"," is what Google ranks on.",[4286,6769,6770,6771,5021],{},"Set up Real User Monitoring with the ",[4301,6772,6775],{"href":6773,"rel":6774},"https://github.com/GoogleChrome/web-vitals",[4305],"web-vitals library",[4348,6777,6779],{"className":4943,"code":6778,"language":4945,"meta":1843,"style":1843},"import { onLCP } from 'web-vitals/attribution'\n\nonLCP((metric) => {\n navigator.sendBeacon('/api/rum', JSON.stringify({\n value: metric.value,\n element: metric.attribution.element,\n url: metric.attribution.url,\n timeToFirstByte: metric.attribution.timeToFirstByte,\n resourceLoadDelay: metric.attribution.resourceLoadDelay,\n resourceLoadDuration: metric.attribution.resourceLoadDuration,\n elementRenderDelay: metric.attribution.elementRenderDelay,\n }))\n}, { reportAllChanges: true })\n",[4290,6780,6781,6802,6806,6824,6857,6874,6895,6915,6935,6955,6975,6995,7001],{"__ignoreMap":1843},[4356,6782,6783,6785,6787,6790,6792,6795,6797,6800],{"class":4358,"line":1766},[4356,6784,5406],{"class":4958},[4356,6786,5962],{"class":4361},[4356,6788,6789],{"class":4639}," onLCP",[4356,6791,5490],{"class":4361},[4356,6793,6794],{"class":4958}," from",[4356,6796,4893],{"class":4378},[4356,6798,6799],{"class":4382},"web-vitals/attribution",[4356,6801,4899],{"class":4378},[4356,6803,6804],{"class":4358,"line":1756},[4356,6805,5070],{"emptyLinePlaceholder":5069},[4356,6807,6808,6811,6813,6815,6818,6820,6822],{"class":4358,"line":1828},[4356,6809,6810],{"class":4965},"onLCP",[4356,6812,4969],{"class":4639},[4356,6814,4969],{"class":4361},[4356,6816,6817],{"class":4978},"metric",[4356,6819,4982],{"class":4361},[4356,6821,4985],{"class":4972},[4356,6823,4988],{"class":4361},[4356,6825,6826,6829,6831,6834,6836,6838,6841,6843,6845,6848,6850,6853,6855],{"class":4358,"line":1749},[4356,6827,6828],{"class":4639}," navigator",[4356,6830,4486],{"class":4361},[4356,6832,6833],{"class":4965},"sendBeacon",[4356,6835,4969],{"class":5011},[4356,6837,5035],{"class":4378},[4356,6839,6840],{"class":4382},"/api/rum",[4356,6842,5035],{"class":4378},[4356,6844,5479],{"class":4361},[4356,6846,6847],{"class":4872}," JSON",[4356,6849,4486],{"class":4361},[4356,6851,6852],{"class":4965},"stringify",[4356,6854,4969],{"class":5011},[4356,6856,4640],{"class":4361},[4356,6858,6859,6862,6864,6867,6869,6872],{"class":4358,"line":1984},[4356,6860,6861],{"class":5011}," value",[4356,6863,5021],{"class":4361},[4356,6865,6866],{"class":4639}," metric",[4356,6868,4486],{"class":4361},[4356,6870,6871],{"class":4639},"value",[4356,6873,5038],{"class":4361},[4356,6875,6876,6879,6881,6883,6885,6888,6890,6893],{"class":4358,"line":4431},[4356,6877,6878],{"class":5011}," element",[4356,6880,5021],{"class":4361},[4356,6882,6866],{"class":4639},[4356,6884,4486],{"class":4361},[4356,6886,6887],{"class":4639},"attribution",[4356,6889,4486],{"class":4361},[4356,6891,6892],{"class":4639},"element",[4356,6894,5038],{"class":4361},[4356,6896,6897,6900,6902,6904,6906,6908,6910,6913],{"class":4358,"line":4446},[4356,6898,6899],{"class":5011}," url",[4356,6901,5021],{"class":4361},[4356,6903,6866],{"class":4639},[4356,6905,4486],{"class":4361},[4356,6907,6887],{"class":4639},[4356,6909,4486],{"class":4361},[4356,6911,6912],{"class":4639},"url",[4356,6914,5038],{"class":4361},[4356,6916,6917,6920,6922,6924,6926,6928,6930,6933],{"class":4358,"line":4461},[4356,6918,6919],{"class":5011}," timeToFirstByte",[4356,6921,5021],{"class":4361},[4356,6923,6866],{"class":4639},[4356,6925,4486],{"class":4361},[4356,6927,6887],{"class":4639},[4356,6929,4486],{"class":4361},[4356,6931,6932],{"class":4639},"timeToFirstByte",[4356,6934,5038],{"class":4361},[4356,6936,6937,6940,6942,6944,6946,6948,6950,6953],{"class":4358,"line":4673},[4356,6938,6939],{"class":5011}," resourceLoadDelay",[4356,6941,5021],{"class":4361},[4356,6943,6866],{"class":4639},[4356,6945,4486],{"class":4361},[4356,6947,6887],{"class":4639},[4356,6949,4486],{"class":4361},[4356,6951,6952],{"class":4639},"resourceLoadDelay",[4356,6954,5038],{"class":4361},[4356,6956,6957,6960,6962,6964,6966,6968,6970,6973],{"class":4358,"line":4679},[4356,6958,6959],{"class":5011}," resourceLoadDuration",[4356,6961,5021],{"class":4361},[4356,6963,6866],{"class":4639},[4356,6965,4486],{"class":4361},[4356,6967,6887],{"class":4639},[4356,6969,4486],{"class":4361},[4356,6971,6972],{"class":4639},"resourceLoadDuration",[4356,6974,5038],{"class":4361},[4356,6976,6977,6980,6982,6984,6986,6988,6990,6993],{"class":4358,"line":4685},[4356,6978,6979],{"class":5011}," elementRenderDelay",[4356,6981,5021],{"class":4361},[4356,6983,6866],{"class":4639},[4356,6985,4486],{"class":4361},[4356,6987,6887],{"class":4639},[4356,6989,4486],{"class":4361},[4356,6991,6992],{"class":4639},"elementRenderDelay",[4356,6994,5038],{"class":4361},[4356,6996,6997,6999],{"class":4358,"line":4691},[4356,6998,5061],{"class":4361},[4356,7000,6284],{"class":5011},[4356,7002,7003,7006,7008,7011,7013,7015,7017],{"class":4358,"line":4697},[4356,7004,7005],{"class":4361},"},",[4356,7007,5962],{"class":4361},[4356,7009,7010],{"class":5011}," reportAllChanges",[4356,7012,5021],{"class":4361},[4356,7014,6554],{"class":6553},[4356,7016,5490],{"class":4361},[4356,7018,5064],{"class":4639},[4286,7020,6483,7021,7026],{},[4301,7022,7025],{"href":7023,"rel":7024},"https://github.com/GoogleChrome/web-vitals#attribution",[4305],"attribution build"," reports the four LCP sub-parts per user. Aggregate at the 75th percentile to match CrUX.",[4327,7028,7030],{"id":7029},"scan-every-page","Scan every page",[4286,7032,7033],{},"Optimizing the homepage while blog posts fail is the most common pattern. Different templates have different LCP elements, different preload strategies, and different render paths.",[4286,7035,7036,7038,7039,7043,7044,7047],{},[4301,7037,5517],{"href":5516}," scans every page on your site and reports LCP per template. ",[4301,7040,7042],{"href":7041},"/tools/bulk-pagespeed","Bulk PageSpeed"," compares lab and field data at scale. ",[4301,7045,7046],{"href":4595},"LCP Finder"," identifies the exact LCP element on any URL.",[4286,7049,7050,7051,7053],{},"Start with the ",[4290,7052,3990],{}," hub for issue-specific fixes, then layer in the 2026 optimizations above.",[4327,7055,7057],{"id":7056},"_2026-lcp-optimization-strategy","2026 LCP Optimization Strategy",[7059,7060,7061,7077],"table",{},[7062,7063,7064],"thead",{},[7065,7066,7067,7071,7074],"tr",{},[7068,7069,7070],"th",{},"Phase",[7068,7072,7073],{},"Action",[7068,7075,7076],{},"Tool",[7078,7079,7080,7097,7111,7126],"tbody",{},[7065,7081,7082,7088,7093],{},[7083,7084,7085],"td",{},[4309,7086,7087],{},"Discovery",[7083,7089,7090,7092],{},[4290,7091,4292],{}," + 103 Early Hints",[7083,7094,7095],{},[4301,7096,7046],{"href":4595},[7065,7098,7099,7104,7107],{},[7083,7100,7101],{},[4309,7102,7103],{},"Network",[7083,7105,7106],{},"AVIF + HTTP/3 + BBR",[7083,7108,7109],{},[4301,7110,5517],{"href":5516},[7065,7112,7113,7118,7124],{},[7083,7114,7115],{},[4309,7116,7117],{},"Render",[7083,7119,7120,7123],{},[4290,7121,7122],{},"scheduler.yield"," + Critical CSS",[7083,7125,4306],{},[7065,7127,7128,7133,7136],{},[7083,7129,7130],{},[4309,7131,7132],{},"Next Page",[7083,7134,7135],{},"Speculation Rules (Moderate)",[7083,7137,6766],{},[7139,7140],"u-button",{":trailing":7141,"icon":7142,"label":7143,"size":7144,"to":5516},"true","i-heroicons-rocket-launch","Scan Your Site with Unlighthouse","lg",[7146,7147,7148],"style",{},"html pre.shiki code .sx-uw, html code.shiki .sx-uw{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#89DDFF}html pre.shiki code .sV-QU, html code.shiki .sV-QU{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#F07178}html pre.shiki code .sg-iE, html code.shiki .sg-iE{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#C792EA}html pre.shiki code .sbw7o, html code.shiki .sbw7o{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#89DDFF}html pre.shiki code .sJnJ8, html code.shiki .sJnJ8{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#C3E88D}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 .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 pre.shiki code .sqjlB, html code.shiki .sqjlB{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#BABED8}html pre.shiki code .sryBE, html code.shiki .sryBE{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#FFCB6B}html pre.shiki code .smpaK, html code.shiki .smpaK{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#BABED8}html pre.shiki code .sJFDI, html code.shiki .sJFDI{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#C3E88D}html pre.shiki code .sc1V3, html code.shiki .sc1V3{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#89DDFF}html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .smL2f, html code.shiki .smL2f{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s0YkB, html code.shiki .s0YkB{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#82AAFF}html pre.shiki code .swqme, html code.shiki .swqme{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#C792EA}html pre.shiki code .sgUNn, html code.shiki .sgUNn{--shiki-light:#E36209;--shiki-light-font-style:inherit;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sqVJQ, html code.shiki .sqVJQ{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#F07178}html pre.shiki code .sQZzC, html code.shiki .sQZzC{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#B2CCD6}html pre.shiki code .sjz_z, html code.shiki .sjz_z{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#F78C6C}html pre.shiki code .sJXcV, html code.shiki .sJXcV{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F78C6C}html pre.shiki code .sy1TL, html code.shiki .sy1TL{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#89DDFF}html pre.shiki code .sJtTG, html code.shiki .sJtTG{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#82AAFF}html pre.shiki code .sTwkl, html code.shiki .sTwkl{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#FFCB6B}html pre.shiki code .sBBN6, html code.shiki .sBBN6{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#F07178}html pre.shiki code .sFfpx, html code.shiki .sFfpx{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:inherit}html pre.shiki code .sGFTI, html code.shiki .sGFTI{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#FF9CAC}",{"title":1843,"searchDepth":1756,"depth":1756,"links":7150},[],"The 2026 LCP playbook: Priority Hints, Speculation Rules, 103 Early Hints, Lighthouse 13 Insights, View Transitions, AVIF, HTTP/3, and edge streaming SSR.","md","i-heroicons-sparkles",[7155,7156,7157,7158,7159,7160,7161,7162],"largest contentful paint optimization best practices 2026","lcp best practices 2026","lcp 2026","optimize lcp 2026","lcp priority hints","lcp speculation rules","lighthouse 13 lcp insights","lcp fetchpriority",{"tags":7164},[7165,4284,7166],"performance","core web vitals",{"title":4007},null,"2026-04-13","12 min",[7172,7174,7175,7177,7179],{"path":3990,"title":7173},"LCP Overview",{"path":3986,"title":3280},{"path":3353,"title":7176},"LCP Definition",{"path":4595,"title":7178},"LCP Finder Tool",{"path":7041,"title":7180},"Bulk PageSpeed Test",{"title":4277,"description":7151},{"loc":4006,"lastmod":7169},"learn-lighthouse/lcp/13.best-practices-2026","O7Xp6WU_vN3Ib1R0kzHXvR_bhLLQNZOQUhMJuTOxTl0",[7186,7189],{"title":4004,"path":4003,"stem":7187,"description":7188,"children":-1,"_path":4003},"learn-lighthouse/lcp/12.unused-javascript","How to reduce unused JavaScript through code splitting, tree shaking, and dynamic imports to improve your Largest Contentful Paint.",{"title":4010,"path":4009,"stem":7190,"description":7191,"children":-1,"_path":4009},"learn-lighthouse/lcp/2.render-blocking-resources","How to eliminate render-blocking CSS and JavaScript in the Lighthouse audit. Async/defer scripts, critical CSS extraction, font loading, and Next.js optimizeCss config.",["Reactive",7193],{"$scolor-mode":7194,"$snuxt-seo-utils:routeRules":7196,"$stoasts":7197,"$snuxt-seo:breadcrumb:breadcrumb":7198,"$ssite-config":7205},{"preference":7195,"value":7195,"unknown":5069,"forced":3855},"system",{"head":-1,"seoMeta":-1},[],[7199,7203,7204],{"to":7200,"icon":7201,"label":7202,"ariaLabel":7202,"current":3855},"/learn-lighthouse","i-heroicons-academic-cap","Learn Google Lighthouse",{"to":3990,"label":3280,"ariaLabel":3280,"current":3855},{"to":3990,"label":3955,"ariaLabel":3955,"current":3855},{"_priority":7206,"description":7209,"env":7210,"name":5517,"titleSeparator":7211,"url":7212},{"env":7207,"url":7208,"name":7208,"description":7208,"titleSeparator":7208},-15,-3,"Google Lighthouse for your entire site.","production","·","https://unlighthouse.dev",["Set"],["ShallowReactive",7215],{"stats":-1,"search":-1,"navigation":-1,"learn-nav":-1,"learn-/learn-lighthouse/lcp/best-practices-2026":-1,"learn-/learn-lighthouse/lcp/best-practices-2026-surround":-1}]