[{"data":1,"prerenderedAt":1393},["ShallowReactive",2],{"content:\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element":3,"surroundings:\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element":1384},{"id":4,"title":5,"body":6,"description":1363,"extension":1364,"meta":1365,"navigation":1377,"path":1378,"seo":1379,"stem":1382,"__hash__":1383},"content\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element\u002Findex.md","Fixing LCP When the H1 Is the LCP Element",{"type":7,"value":8,"toc":1349},"minimark",[9,14,29,37,197,202,205,250,254,264,278,284,294,369,373,378,381,576,583,587,598,804,812,816,819,877,889,893,896,1006,1009,1081,1085,1093,1096,1219,1230,1234,1247,1260,1271,1275,1287,1296,1308,1312,1335,1340,1343,1346],[10,11,13],"h1",{"id":12},"how-to-fix-slow-lcp-when-the-h1-or-any-text-block-is-the-lcp-element","How to Fix Slow LCP When the H1 (or Any Text Block) Is the LCP Element",[15,16,17,18,23,24,28],"p",{},"This guide applies the phase model from ",[19,20,22],"a",{"href":21},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Measuring LCP with Chrome DevTools"," to a case that confuses many teams, within the wider ",[19,25,27],{"href":26},"\u002Fcore-web-vitals-measurement\u002F","Core Web Vitals & Measurement"," section: the LCP element is not an image at all, but a heading or a block of text.",[15,30,31,32,36],{},"Text LCP is common on articles, documentation, landing pages with typographic heroes, and any mobile layout where the hero image is hidden or pushed below the fold. It is often assumed to be \"free\" — text has no download — yet pages with a text LCP regularly report ",[33,34,35],"code",{},"3s"," or more at p75 on mobile. The reason is that a text element cannot paint until three things are true: the HTML containing it has arrived, every render-blocking stylesheet has loaded, and either its web font has loaded or the font-display policy allows a fallback to paint. If the text is rendered by JavaScript, add the time to download, parse and execute that too.",[15,38,39],{},[40,41,47,48,47,55,47,59,47,62,47,80,47,88,47,94,47,102,47,109,47,114,47,118,47,124,47,128,47,131,47,134,47,137,47,141,47,144,47,147,47,150,47,154,47,157,47,160,47,163,47,167,47,170,47,179,47,183,47,187,47,191,47],"svg",{"viewBox":42,"width":43,"role":44,"ariaLabel":45,"style":46},"0 0 760 175","100%","img","The chain of dependencies that must resolve before a heading can paint as the LCP element.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[49,50],"rect",{"className":51,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],"svg-canvas","0","#ffffff",[56,57,58],"title",{},"What a text LCP element waits for",[60,61,45],"desc",{},[63,64,65],"defs",{},[66,67,74],"marker",{"id":68,"viewBox":69,"refX":70,"refY":71,"markerWidth":72,"markerHeight":72,"orient":73},"fa8caa81b7","0 0 10 10","9","5","7","auto-start-reverse",[75,76],"path",{"d":77,"fill":78,"style":79},"M0 0 L10 5 L0 10 z","currentColor","fill-opacity:0.7",[49,81],{"x":82,"y":82,"width":83,"height":84,"rx":85,"fill":86,"stroke":78,"style":87},"1","758","173","10","none","stroke-opacity:0.18",[89,90,58],"text",{"x":91,"y":92,"fill":78,"style":93},"28.0","34.0","font-size:16px;font-weight:700",[49,95],{"x":91,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":100,"style":101},"56.0","108.8","71.0","6","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[89,103,108],{"x":104,"y":105,"fill":78,"style":106,"textAnchor":107},"82.4","78.0","font-size:13px;font-weight:700","middle","HTML arrives",[89,110,113],{"x":104,"y":111,"fill":78,"style":112,"textAnchor":107},"96.0","font-size:12px","TTFB +",[89,115,117],{"x":104,"y":116,"fill":78,"style":112,"textAnchor":107},"112.0","document",[49,119],{"x":120,"y":96,"width":97,"height":98,"rx":99,"fill":121,"stroke":122,"style":123},"176.8","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[89,125,127],{"x":126,"y":105,"fill":78,"style":106,"textAnchor":107},"231.2","Blocking CSS",[89,129,130],{"x":126,"y":111,"fill":78,"style":112,"textAnchor":107},"every stylesheet",[89,132,133],{"x":126,"y":116,"fill":78,"style":112,"textAnchor":107},"in head",[49,135],{"x":136,"y":96,"width":97,"height":98,"rx":99,"fill":121,"stroke":122,"style":123},"325.6",[89,138,140],{"x":139,"y":105,"fill":78,"style":106,"textAnchor":107},"380.0","Web font",[89,142,143],{"x":139,"y":111,"fill":78,"style":112,"textAnchor":107},"or fallback per",[89,145,146],{"x":139,"y":116,"fill":78,"style":112,"textAnchor":107},"font-display",[49,148],{"x":149,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":100,"style":101},"474.4",[89,151,153],{"x":152,"y":105,"fill":78,"style":106,"textAnchor":107},"528.8","JS render",[89,155,156],{"x":152,"y":111,"fill":78,"style":112,"textAnchor":107},"only if",[89,158,159],{"x":152,"y":116,"fill":78,"style":112,"textAnchor":107},"client-rendered",[49,161],{"x":162,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":100,"style":101},"623.2",[89,164,166],{"x":165,"y":105,"fill":78,"style":106,"textAnchor":107},"677.6","Text paints",[89,168,169],{"x":165,"y":111,"fill":78,"style":112,"textAnchor":107},"LCP recorded",[171,172],"line",{"x1":173,"y1":174,"x2":175,"y2":174,"stroke":78,"strokeWidth":176,"style":177,"markerEnd":178},"136.8","91.5","174.8","1.5","stroke-opacity:0.6","url(#fa8caa81b7)",[171,180],{"x1":181,"y1":174,"x2":182,"y2":174,"stroke":78,"strokeWidth":176,"style":177,"markerEnd":178},"285.6","323.6",[171,184],{"x1":185,"y1":174,"x2":186,"y2":174,"stroke":78,"strokeWidth":176,"style":177,"markerEnd":178},"434.4","472.4",[171,188],{"x1":189,"y1":174,"x2":190,"y2":174,"stroke":78,"strokeWidth":176,"style":177,"markerEnd":178},"583.2","621.2",[89,192,196],{"x":91,"y":193,"fill":194,"style":195},"153.0","#51617a","font-size:12.5px","Text has no resource load phase of its own, so its LCP is almost entirely TTFB plus render delay.",[198,199,201],"h2",{"id":200},"rapid-diagnosis","Rapid Diagnosis",[15,203,204],{},"Work through this checklist in DevTools with \"Fast 4G\" and 4x CPU throttling enabled.",[206,207,208,226,232,238,244],"ul",{},[209,210,211,215,216,218,219,221,222,225],"li",{},[212,213,214],"strong",{},"Confirm the element."," In the Performance panel, click the LCP marker in the Timings track; the summary shows the node. Hover it to highlight. If it is an ",[33,217,10],{},", ",[33,220,15],{}," or ",[33,223,224],{},"div"," containing text, this guide applies.",[209,227,228,231],{},[212,229,230],{},"Read the LCP breakdown."," The \"LCP by phase\" insight shows TTFB and render delay; for text there is no load delay or load time. If render delay is more than half of LCP, the problem is between HTML arrival and paint.",[209,233,234,237],{},[212,235,236],{},"Inspect the network waterfall before the LCP marker."," Every stylesheet that finishes before the marker and has \"Highest\" priority is a candidate blocker. Note any CSS file larger than ~50KB.",[209,239,240,243],{},[212,241,242],{},"Check the Fonts."," In the Network panel, filter by \"Font\". If the heading's font file finishes just before the LCP marker, the paint waited for it.",[209,245,246,249],{},[212,247,248],{},"View source."," If the heading text is not in the initial HTML response (search for it in the Response tab of the document request), the page is client-rendered and JavaScript is on the critical path.",[198,251,253],{"id":252},"root-cause-analysis","Root Cause Analysis",[15,255,256,259,260,263],{},[212,257,258],{},"1. Render-blocking CSS on a slow connection."," Every ",[33,261,262],{},"\u003Clink rel=\"stylesheet\">"," in the head blocks first render. A 180KB framework stylesheet over a mobile connection takes several hundred milliseconds even from a CDN, and the heading cannot paint until it finishes — even if only 4KB of it styles the heading.",[15,265,266,277],{},[212,267,268,269,272,273,276],{},"2. Web font blocking with ",[33,270,271],{},"font-display: block"," or the default ",[33,274,275],{},"auto","."," Many font setups hide text for up to three seconds while the font downloads (\"flash of invisible text\"). The heading is in the DOM and laid out, but invisible text does not count as painted. LCP is recorded when the font arrives — or when the block period ends.",[15,279,280,283],{},[212,281,282],{},"3. Client-side rendering of the heading."," In single-page apps without server rendering, the HTML is an empty shell. The heading only exists after the JavaScript bundle downloads, parses, executes and fetches data. Render delay then includes the entire bundle cost.",[15,285,286,289,290,293],{},[212,287,288],{},"4. Late-discovered CSS."," Stylesheets loaded via ",[33,291,292],{},"@import"," inside another stylesheet, or injected by JavaScript, are discovered late and form a waterfall: CSS A must download before the browser learns about CSS B.",[15,295,296],{},[40,297,47,300,47,303,47,306,47,308,47,311,47,313,47,320,47,327,47,332,47,336,47,341,47,345,47,349,47,353,47,357,47,361,47,365,47],{"viewBox":298,"width":43,"role":44,"ariaLabel":299,"style":46},"0 0 760 194","Bar chart of the phases of a 3.4 second text LCP, with blocking CSS and the web font taking most of the render delay.",[49,301],{"className":302,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,304,305],{},"Text LCP breakdown on a slow article page",[60,307,299],{},[49,309],{"x":82,"y":82,"width":83,"height":310,"rx":85,"fill":86,"stroke":78,"style":87},"192",[89,312,305],{"x":91,"y":92,"fill":78,"style":93},[89,314,319],{"x":315,"y":316,"fill":78,"style":317,"textAnchor":318},"161.5","70.0","font-size:13px","end","TTFB",[49,321],{"x":322,"y":96,"width":323,"height":324,"rx":325,"fill":100,"stroke":100,"style":326},"173.5","247.3","19","3","fill-opacity:0.55;stroke-opacity:0.9",[89,328,331],{"x":329,"y":316,"fill":78,"style":330},"426.7","font-size:12px;font-weight:600","620ms",[89,333,335],{"x":315,"y":334,"fill":78,"style":317,"textAnchor":318},"101.0","Blocking CSS (2 files)",[49,337],{"x":322,"y":338,"width":339,"height":324,"rx":325,"fill":121,"stroke":122,"style":340},"87.0","458.6","fill-opacity:0.7;stroke-opacity:0.9",[89,342,344],{"x":343,"y":334,"fill":78,"style":330},"638.1","1150ms",[89,346,348],{"x":315,"y":347,"fill":78,"style":317,"textAnchor":318},"132.0","Web font (block period)",[49,350],{"x":322,"y":351,"width":352,"height":324,"rx":325,"fill":121,"stroke":122,"style":340},"118.0","494.5",[89,354,356],{"x":355,"y":347,"fill":78,"style":330},"674.0","1240ms",[89,358,360],{"x":315,"y":359,"fill":78,"style":317,"textAnchor":318},"163.0","Layout + paint",[49,362],{"x":322,"y":363,"width":364,"height":324,"rx":325,"fill":100,"stroke":100,"style":326},"149.0","155.5",[89,366,368],{"x":367,"y":359,"fill":78,"style":330},"335.0","390ms",[198,370,372],{"id":371},"step-by-step-resolution","Step-by-Step Resolution",[374,375,377],"h3",{"id":376},"_1-inline-critical-css-and-defer-the-rest","1. Inline critical CSS and defer the rest",[15,379,380],{},"Extract the CSS needed for above-the-fold content, inline it in the head, and load the full stylesheet without blocking render. The heading can then paint as soon as the HTML arrives.",[382,383,388],"pre",{"className":384,"code":385,"language":386,"meta":387,"style":387},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Chead>\n  \u003Cstyle>\u002F* ~8-14KB of critical rules: layout shell, header, h1, hero text *\u002F\u003C\u002Fstyle>\n  \u003Clink rel=\"preload\" href=\"\u002Fcss\u002Fsite.4f2a.css\" as=\"style\">\n  \u003Clink rel=\"stylesheet\" href=\"\u002Fcss\u002Fsite.4f2a.css\" media=\"print\" onload=\"this.media='all'\">\n  \u003Cnoscript>\u003Clink rel=\"stylesheet\" href=\"\u002Fcss\u002Fsite.4f2a.css\">\u003C\u002Fnoscript>\n\u003C\u002Fhead>\n\u003C!-- trade-off: inlined CSS is re-downloaded with every HTML response and\n     cannot be cached separately. Keep it under ~14KB (one TCP round trip's\n     worth of compressed bytes) and only for templates where text is LCP. -->\n","html","",[33,389,390,405,428,465,517,549,558,564,570],{"__ignoreMap":387},[391,392,394,398,402],"span",{"class":171,"line":393},1,[391,395,397],{"class":396},"saISM","\u003C",[391,399,401],{"class":400},"sZBmE","head",[391,403,404],{"class":396},">\n",[391,406,408,411,414,417,421,424,426],{"class":171,"line":407},2,[391,409,410],{"class":396},"  \u003C",[391,412,413],{"class":400},"style",[391,415,416],{"class":396},">",[391,418,420],{"class":419},"sjfSM","\u002F* ~8-14KB of critical rules: layout shell, header, h1, hero text *\u002F",[391,422,423],{"class":396},"\u003C\u002F",[391,425,413],{"class":400},[391,427,404],{"class":396},[391,429,431,433,436,440,443,447,450,452,455,458,460,463],{"class":171,"line":430},3,[391,432,410],{"class":396},[391,434,435],{"class":400},"link",[391,437,439],{"class":438},"sPXB4"," rel",[391,441,442],{"class":396},"=",[391,444,446],{"class":445},"sZ8jY","\"preload\"",[391,448,449],{"class":438}," href",[391,451,442],{"class":396},[391,453,454],{"class":445},"\"\u002Fcss\u002Fsite.4f2a.css\"",[391,456,457],{"class":438}," as",[391,459,442],{"class":396},[391,461,462],{"class":445},"\"style\"",[391,464,404],{"class":396},[391,466,468,470,472,474,476,479,481,483,485,488,490,493,496,498,501,504,506,509,512,515],{"class":171,"line":467},4,[391,469,410],{"class":396},[391,471,435],{"class":400},[391,473,439],{"class":438},[391,475,442],{"class":396},[391,477,478],{"class":445},"\"stylesheet\"",[391,480,449],{"class":438},[391,482,442],{"class":396},[391,484,454],{"class":445},[391,486,487],{"class":438}," media",[391,489,442],{"class":396},[391,491,492],{"class":445},"\"print\"",[391,494,495],{"class":438}," onload",[391,497,442],{"class":396},[391,499,500],{"class":445},"\"",[391,502,503],{"class":438},"this",[391,505,276],{"class":445},[391,507,508],{"class":396},"media",[391,510,442],{"class":511},"sPARh",[391,513,514],{"class":445},"'all'\"",[391,516,404],{"class":396},[391,518,520,522,525,528,530,532,534,536,538,540,542,545,547],{"class":171,"line":519},5,[391,521,410],{"class":396},[391,523,524],{"class":400},"noscript",[391,526,527],{"class":396},">\u003C",[391,529,435],{"class":400},[391,531,439],{"class":438},[391,533,442],{"class":396},[391,535,478],{"class":445},[391,537,449],{"class":438},[391,539,442],{"class":396},[391,541,454],{"class":445},[391,543,544],{"class":396},">\u003C\u002F",[391,546,524],{"class":400},[391,548,404],{"class":396},[391,550,552,554,556],{"class":171,"line":551},6,[391,553,423],{"class":396},[391,555,401],{"class":400},[391,557,404],{"class":396},[391,559,561],{"class":171,"line":560},7,[391,562,563],{"class":419},"\u003C!-- trade-off: inlined CSS is re-downloaded with every HTML response and\n",[391,565,567],{"class":171,"line":566},8,[391,568,569],{"class":419},"     cannot be cached separately. Keep it under ~14KB (one TCP round trip's\n",[391,571,573],{"class":171,"line":572},9,[391,574,575],{"class":419},"     worth of compressed bytes) and only for templates where text is LCP. -->\n",[15,577,578,579,276],{},"Expected outcome: render delay falls by the stylesheet download time, typically 300–900ms on mobile. The full technique, including build tooling, is in ",[19,580,582],{"href":581},"\u002Frendering-css-performance\u002Fcritical-css-and-render-blocking-resources\u002Fextracting-critical-css-at-build-time\u002F","extracting critical CSS at build time",[374,584,586],{"id":585},"_2-let-the-heading-paint-in-a-fallback-font","2. Let the heading paint in a fallback font",[15,588,589,590,593,594,597],{},"Use ",[33,591,592],{},"font-display: swap"," (or ",[33,595,596],{},"optional"," for body text where a swap would be jarring) so the heading paints immediately in a fallback face, and pair it with metric overrides so the swap does not shift layout.",[382,599,603],{"className":600,"code":601,"language":602,"meta":387,"style":387},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","@font-face {\n  font-family: \"Brand Serif\";\n  src: url(\"\u002Ffonts\u002Fbrand-serif-700.woff2\") format(\"woff2\");\n  font-weight: 700;\n  font-display: swap;\n}\n@font-face {                       \u002F* metric-matched fallback: no shift on swap *\u002F\n  font-family: \"Brand Serif Fallback\";\n  src: local(\"Georgia\");\n  size-adjust: 104%;\n  ascent-override: 92%;\n}\nh1 { font-family: \"Brand Serif\", \"Brand Serif Fallback\", serif; }\n\u002F* trade-off: with swap, LCP is recorded at the FALLBACK paint, then possibly\n   again if the swapped text is larger. Matching metrics keeps the second\n   candidate the same size so it does not replace the first. *\u002F\n","css",[33,604,605,613,627,657,669,681,686,696,707,723,739,754,759,786,792,798],{"__ignoreMap":387},[391,606,607,610],{"class":171,"line":393},[391,608,609],{"class":511},"@font-face",[391,611,612],{"class":396}," {\n",[391,614,615,618,621,624],{"class":171,"line":407},[391,616,617],{"class":438},"  font-family",[391,619,620],{"class":396},": ",[391,622,623],{"class":445},"\"Brand Serif\"",[391,625,626],{"class":396},";\n",[391,628,629,632,634,637,640,643,646,649,651,654],{"class":171,"line":430},[391,630,631],{"class":438},"  src",[391,633,620],{"class":396},[391,635,636],{"class":438},"url",[391,638,639],{"class":396},"(",[391,641,642],{"class":445},"\"\u002Ffonts\u002Fbrand-serif-700.woff2\"",[391,644,645],{"class":396},") ",[391,647,648],{"class":438},"format",[391,650,639],{"class":396},[391,652,653],{"class":445},"\"woff2\"",[391,655,656],{"class":396},");\n",[391,658,659,662,664,667],{"class":171,"line":467},[391,660,661],{"class":438},"  font-weight",[391,663,620],{"class":396},[391,665,666],{"class":438},"700",[391,668,626],{"class":396},[391,670,671,674,676,679],{"class":171,"line":519},[391,672,673],{"class":438},"  font-display",[391,675,620],{"class":396},[391,677,678],{"class":438},"swap",[391,680,626],{"class":396},[391,682,683],{"class":171,"line":551},[391,684,685],{"class":396},"}\n",[391,687,688,690,693],{"class":171,"line":560},[391,689,609],{"class":511},[391,691,692],{"class":396}," {                       ",[391,694,695],{"class":419},"\u002F* metric-matched fallback: no shift on swap *\u002F\n",[391,697,698,700,702,705],{"class":171,"line":566},[391,699,617],{"class":438},[391,701,620],{"class":396},[391,703,704],{"class":445},"\"Brand Serif Fallback\"",[391,706,626],{"class":396},[391,708,709,711,713,716,718,721],{"class":171,"line":572},[391,710,631],{"class":438},[391,712,620],{"class":396},[391,714,715],{"class":438},"local",[391,717,639],{"class":396},[391,719,720],{"class":445},"\"Georgia\"",[391,722,656],{"class":396},[391,724,726,729,731,734,737],{"class":171,"line":725},10,[391,727,728],{"class":438},"  size-adjust",[391,730,620],{"class":396},[391,732,733],{"class":438},"104",[391,735,736],{"class":511},"%",[391,738,626],{"class":396},[391,740,742,745,747,750,752],{"class":171,"line":741},11,[391,743,744],{"class":438},"  ascent-override",[391,746,620],{"class":396},[391,748,749],{"class":438},"92",[391,751,736],{"class":511},[391,753,626],{"class":396},[391,755,757],{"class":171,"line":756},12,[391,758,685],{"class":396},[391,760,762,764,767,770,772,774,776,778,780,783],{"class":171,"line":761},13,[391,763,10],{"class":400},[391,765,766],{"class":396}," { ",[391,768,769],{"class":438},"font-family",[391,771,620],{"class":396},[391,773,623],{"class":445},[391,775,218],{"class":396},[391,777,704],{"class":445},[391,779,218],{"class":396},[391,781,782],{"class":438},"serif",[391,784,785],{"class":396},"; }\n",[391,787,789],{"class":171,"line":788},14,[391,790,791],{"class":419},"\u002F* trade-off: with swap, LCP is recorded at the FALLBACK paint, then possibly\n",[391,793,795],{"class":171,"line":794},15,[391,796,797],{"class":419},"   again if the swapped text is larger. Matching metrics keeps the second\n",[391,799,801],{"class":171,"line":800},16,[391,802,803],{"class":419},"   candidate the same size so it does not replace the first. *\u002F\n",[15,805,806,807,811],{},"Expected outcome: LCP is recorded at the first fallback paint; on slow connections this removes 500ms–2s. See ",[19,808,810],{"href":809},"\u002Fcore-web-vitals-measurement\u002Ffont-loading-and-text-rendering-performance\u002Ffont-display-swap-vs-optional-for-lcp\u002F","font-display swap vs optional for LCP"," for when each is the better choice.",[374,813,815],{"id":814},"_3-preload-the-one-font-the-heading-uses","3. Preload the one font the heading uses",[15,817,818],{},"If you want the real font to win the race rather than swap in later, preload exactly the weight and style used by the LCP heading — not the whole family.",[382,820,822],{"className":384,"code":821,"language":386,"meta":387,"style":387},"\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Fbrand-serif-700.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin>\n\u003C!-- trade-off: preloaded fonts compete for bandwidth with CSS and the LCP\n     image (if any). Preload one, at most two, font files. Preloading four\n     weights usually makes LCP worse, not better. -->\n",[33,823,824,862,867,872],{"__ignoreMap":387},[391,825,826,828,830,832,834,836,838,840,842,844,846,849,852,854,857,860],{"class":171,"line":393},[391,827,397],{"class":396},[391,829,435],{"class":400},[391,831,439],{"class":438},[391,833,442],{"class":396},[391,835,446],{"class":445},[391,837,449],{"class":438},[391,839,442],{"class":396},[391,841,642],{"class":445},[391,843,457],{"class":438},[391,845,442],{"class":396},[391,847,848],{"class":445},"\"font\"",[391,850,851],{"class":438}," type",[391,853,442],{"class":396},[391,855,856],{"class":445},"\"font\u002Fwoff2\"",[391,858,859],{"class":438}," crossorigin",[391,861,404],{"class":396},[391,863,864],{"class":171,"line":407},[391,865,866],{"class":419},"\u003C!-- trade-off: preloaded fonts compete for bandwidth with CSS and the LCP\n",[391,868,869],{"class":171,"line":430},[391,870,871],{"class":419},"     image (if any). Preload one, at most two, font files. Preloading four\n",[391,873,874],{"class":171,"line":467},[391,875,876],{"class":419},"     weights usually makes LCP worse, not better. -->\n",[15,878,879,880,883,884,888],{},"Expected outcome: the font arrives in parallel with CSS rather than after it, often allowing the first paint to use the real face at no LCP cost. The ",[33,881,882],{},"crossorigin"," attribute is required even for same-origin fonts — ",[19,885,887],{"href":886},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Fpreloading-web-fonts-with-crossorigin\u002F","preloading web fonts with crossorigin"," explains why.",[374,890,892],{"id":891},"_4-server-render-the-heading","4. Server-render the heading",[15,894,895],{},"If the heading is client-rendered, no CSS or font fix will help as much as putting it in the HTML. Server-side render or statically generate at least the above-the-fold content.",[382,897,901],{"className":898,"code":899,"language":900,"meta":387,"style":387},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Next.js App Router: a server component renders the heading into the HTML.\nexport default async function Article({ params }) {\n  const post = await getPost(params.slug);          \u002F\u002F runs on the server\n  return \u003Ch1 className=\"article-title\">{post.title}\u003C\u002Fh1>;\n}\n\u002F\u002F trade-off: server rendering moves work to TTFB. If getPost() is slow, TTFB\n\u002F\u002F grows and LCP may not improve. Cache the data or stream the shell first.\n","javascript",[33,902,903,908,933,956,992,996,1001],{"__ignoreMap":387},[391,904,905],{"class":171,"line":393},[391,906,907],{"class":419},"\u002F\u002F Next.js App Router: a server component renders the heading into the HTML.\n",[391,909,910,913,916,919,922,926,930],{"class":171,"line":407},[391,911,912],{"class":511},"export",[391,914,915],{"class":511}," default",[391,917,918],{"class":511}," async",[391,920,921],{"class":511}," function",[391,923,925],{"class":924},"smZ65"," Article",[391,927,929],{"class":928},"sQw3B","({ params }) ",[391,931,932],{"class":396},"{\n",[391,934,935,938,941,944,947,950,953],{"class":171,"line":430},[391,936,937],{"class":511},"  const",[391,939,940],{"class":438}," post",[391,942,943],{"class":511}," =",[391,945,946],{"class":511}," await",[391,948,949],{"class":924}," getPost",[391,951,952],{"class":396},"(params.slug);          ",[391,954,955],{"class":419},"\u002F\u002F runs on the server\n",[391,957,958,961,964,966,969,971,974,976,979,982,985,987,989],{"class":171,"line":467},[391,959,960],{"class":511},"  return",[391,962,963],{"class":396}," \u003C",[391,965,10],{"class":400},[391,967,968],{"class":438}," className",[391,970,442],{"class":511},[391,972,973],{"class":445},"\"article-title\"",[391,975,416],{"class":396},[391,977,978],{"class":511},"{",[391,980,981],{"class":396},"post.title",[391,983,984],{"class":511},"}",[391,986,423],{"class":396},[391,988,10],{"class":400},[391,990,991],{"class":396},">;\n",[391,993,994],{"class":171,"line":519},[391,995,685],{"class":396},[391,997,998],{"class":171,"line":551},[391,999,1000],{"class":419},"\u002F\u002F trade-off: server rendering moves work to TTFB. If getPost() is slow, TTFB\n",[391,1002,1003],{"class":171,"line":560},[391,1004,1005],{"class":419},"\u002F\u002F grows and LCP may not improve. Cache the data or stream the shell first.\n",[15,1007,1008],{},"Expected outcome: render delay drops by the full JavaScript cost — commonly 1–2s on mid-tier mobile for SPA shells.",[15,1010,1011],{},[40,1012,47,1015,47,1018,47,1021,47,1023,47,1026,47,1028,47,1032,47,1038,47,1043,47,1047,47,1049,47,1052,47,1055,47,1058,47,1061,47,1065,47,1067,47,1071,47,1073,47,1076,47,1078,47],{"viewBox":1013,"width":43,"role":44,"ariaLabel":1014,"style":46},"0 0 760 204","Comparison of a slow text LCP setup with blocking CSS and FOIT against an optimised setup with inline critical CSS, swap with metric overrides and a server-rendered heading.",[49,1016],{"className":1017,"x":53,"y":53,"width":43,"height":43,"fill":54},[52],[56,1019,1020],{},"Before and after on a typical article template",[60,1022,1014],{},[49,1024],{"x":82,"y":82,"width":83,"height":1025,"rx":85,"fill":86,"stroke":78,"style":87},"202",[89,1027,1020],{"x":91,"y":92,"fill":78,"style":93},[49,1029],{"x":91,"y":96,"width":1030,"height":1031,"rx":99,"fill":121,"stroke":122,"style":123},"340.0","126.0",[89,1033,1037],{"x":1034,"y":1035,"fill":78,"style":1036},"42.0","82.0","font-size:14px;font-weight:700","Before: 3.4s LCP",[89,1039,1042],{"x":1034,"y":1040,"fill":78,"style":1041},"108.0","font-size:12.5px;font-weight:700","•",[89,1044,1046],{"x":96,"y":1040,"fill":78,"style":195,"textAnchor":1045},"start","Two blocking stylesheets, 210KB",[89,1048,1042],{"x":1034,"y":347,"fill":78,"style":1041},[89,1050,1051],{"x":96,"y":347,"fill":78,"style":195,"textAnchor":1045},"font-display auto (invisible text)",[89,1053,1042],{"x":1034,"y":1054,"fill":78,"style":1041},"156.0",[89,1056,1057],{"x":96,"y":1054,"fill":78,"style":195,"textAnchor":1045},"Heading rendered after hydration",[49,1059],{"x":1060,"y":96,"width":1030,"height":1031,"rx":99,"fill":100,"stroke":100,"style":101},"392.0",[89,1062,1064],{"x":1063,"y":1035,"fill":78,"style":1036},"406.0","After: 1.6s LCP",[89,1066,1042],{"x":1063,"y":1040,"fill":78,"style":1041},[89,1068,1070],{"x":1069,"y":1040,"fill":78,"style":195,"textAnchor":1045},"420.0","12KB inline critical CSS, rest async",[89,1072,1042],{"x":1063,"y":347,"fill":78,"style":1041},[89,1074,1075],{"x":1069,"y":347,"fill":78,"style":195,"textAnchor":1045},"swap with metric-matched fallback",[89,1077,1042],{"x":1063,"y":1054,"fill":78,"style":1041},[89,1079,1080],{"x":1069,"y":1054,"fill":78,"style":195,"textAnchor":1045},"Heading in server HTML",[198,1082,1084],{"id":1083},"verification","Verification",[15,1086,1087,1088,1092],{},"Record the page again with the same throttling. The LCP marker should now sit close to FCP — for text LCP they are often identical, because the first contentful paint ",[1089,1090,1091],"em",{},"is"," the heading. Check that render delay is now a small fraction of LCP and that no stylesheet or font finishes immediately before the marker.",[15,1094,1095],{},"Lock it in with Lighthouse CI so a new blocking stylesheet does not quietly return:",[382,1097,1099],{"className":898,"code":1098,"language":900,"meta":387,"style":387},"\u002F\u002F lighthouserc.js\nmodule.exports = {\n  ci: {\n    assert: {\n      assertions: {\n        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],\n        'render-blocking-resources': ['warn', { maxLength: 0 }],\n        'font-display': 'error',\n      },\n    },\n  },\n};\n\u002F\u002F trade-off: maxLength 0 on render-blocking resources is strict — one small\n\u002F\u002F blocking stylesheet can be acceptable. Use 'warn' so it informs rather than\n\u002F\u002F blocks, and rely on the LCP assertion as the hard gate.\n",[33,1100,1101,1106,1120,1125,1130,1135,1155,1172,1184,1189,1194,1199,1204,1209,1214],{"__ignoreMap":387},[391,1102,1103],{"class":171,"line":393},[391,1104,1105],{"class":419},"\u002F\u002F lighthouserc.js\n",[391,1107,1108,1111,1113,1116,1118],{"class":171,"line":407},[391,1109,1110],{"class":438},"module",[391,1112,276],{"class":396},[391,1114,1115],{"class":438},"exports",[391,1117,943],{"class":511},[391,1119,612],{"class":396},[391,1121,1122],{"class":171,"line":430},[391,1123,1124],{"class":396},"  ci: {\n",[391,1126,1127],{"class":171,"line":467},[391,1128,1129],{"class":396},"    assert: {\n",[391,1131,1132],{"class":171,"line":519},[391,1133,1134],{"class":396},"      assertions: {\n",[391,1136,1137,1140,1143,1146,1149,1152],{"class":171,"line":551},[391,1138,1139],{"class":445},"        'largest-contentful-paint'",[391,1141,1142],{"class":396},": [",[391,1144,1145],{"class":445},"'error'",[391,1147,1148],{"class":396},", { maxNumericValue: ",[391,1150,1151],{"class":438},"2500",[391,1153,1154],{"class":396}," }],\n",[391,1156,1157,1160,1162,1165,1168,1170],{"class":171,"line":560},[391,1158,1159],{"class":445},"        'render-blocking-resources'",[391,1161,1142],{"class":396},[391,1163,1164],{"class":445},"'warn'",[391,1166,1167],{"class":396},", { maxLength: ",[391,1169,53],{"class":438},[391,1171,1154],{"class":396},[391,1173,1174,1177,1179,1181],{"class":171,"line":566},[391,1175,1176],{"class":445},"        'font-display'",[391,1178,620],{"class":396},[391,1180,1145],{"class":445},[391,1182,1183],{"class":396},",\n",[391,1185,1186],{"class":171,"line":572},[391,1187,1188],{"class":396},"      },\n",[391,1190,1191],{"class":171,"line":725},[391,1192,1193],{"class":396},"    },\n",[391,1195,1196],{"class":171,"line":741},[391,1197,1198],{"class":396},"  },\n",[391,1200,1201],{"class":171,"line":756},[391,1202,1203],{"class":396},"};\n",[391,1205,1206],{"class":171,"line":761},[391,1207,1208],{"class":419},"\u002F\u002F trade-off: maxLength 0 on render-blocking resources is strict — one small\n",[391,1210,1211],{"class":171,"line":788},[391,1212,1213],{"class":419},"\u002F\u002F blocking stylesheet can be acceptable. Use 'warn' so it informs rather than\n",[391,1215,1216],{"class":171,"line":794},[391,1217,1218],{"class":419},"\u002F\u002F blocks, and rely on the LCP assertion as the hard gate.\n",[15,1220,1221,1222,1225,1226,1229],{},"In the field, confirm the LCP element type in your RUM (",[33,1223,1224],{},"attribution.lcpEntry.element.tagName"," from the ",[33,1227,1228],{},"web-vitals"," attribution build) and compare p75 for text-LCP page views before and after the release.",[198,1231,1233],{"id":1232},"edge-cases-specific-to-text-lcp","Edge Cases Specific to Text LCP",[15,1235,1236,1239,1240,1242,1243,1246],{},[212,1237,1238],{},"The LCP element changes after the font swap."," If the web font is wider than the fallback, a heading that wraps onto three lines in the real font but two in the fallback becomes a larger element after swap and generates a new, later LCP candidate. Metric-matched fallbacks prevent this; without them, ",[33,1241,678],{}," can make LCP ",[1089,1244,1245],{},"later"," than expected.",[15,1248,1249,1252,1253,1256,1257,1259],{},[212,1250,1251],{},"Text inside a hidden-then-revealed container."," Hero headings that fade in with an ",[33,1254,1255],{},"opacity: 0"," → ",[33,1258,82],{}," animation do not count as painted while invisible, and Chromium ignores opacity-zero elements as candidates until they become visible. A 600ms entrance animation adds 600ms to LCP. Start the animation from a visible state or drop it from the LCP element.",[15,1261,1262,1265,1266,1270],{},[212,1263,1264],{},"A cookie banner becomes the LCP."," On small screens, a consent banner's paragraph can be larger than the heading. It then becomes the LCP element, and its timing — often injected by a third-party script — defines your metric. Server-render the banner markup or constrain its text size; see ",[19,1267,1269],{"href":1268},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Ffixing-cls-from-cookie-consent-banners\u002F","fixing CLS from cookie consent banners"," for the layout side of the same problem.",[198,1272,1274],{"id":1273},"faq","FAQ",[1276,1277,1280,1284],"details",{"className":1278},[1279],"faq-item",[1281,1282,1283],"summary",{},"Is text LCP always faster than image LCP?",[15,1285,1286],{},"Not inherently. Text skips the resource download, but it depends on CSS and fonts that images often do not. A page with an optimised, preloaded hero image and a lean stylesheet can beat a text-LCP page that blocks on 200KB of CSS and two font files. The advantage of text LCP is that it is entirely within your control — no image pipeline to tune.",[1276,1288,1290,1293],{"className":1289},[1279],[1281,1291,1292],{},"Why does my LCP equal FCP after the fix?",[15,1294,1295],{},"Because the first content the browser painted was also the largest. For text-hero pages that is the ideal outcome: there is nothing left to wait for after the first paint. If LCP still lags FCP, something larger painted later — usually an image that loaded after the heading, or a heading whose font swapped to a larger size.",[1276,1297,1299,1302],{"className":1298},[1279],[1281,1300,1301],{},"Should I use system fonts for headings to fix LCP?",[15,1303,1304,1305,1307],{},"It is the most reliable fix and worth considering for body text, but it is a design decision, not just a performance one. With a well-matched fallback and ",[33,1306,678],{},", a custom heading font costs almost nothing in LCP. Use system fonts where the brand allows; otherwise get the fallback metrics right.",[198,1309,1311],{"id":1310},"related","Related",[206,1313,1314,1321,1328],{},[209,1315,1316,1320],{},[19,1317,1319],{"href":1318},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-render-delay-from-render-blocking-css\u002F","Fixing LCP render delay from render-blocking CSS"," — the CSS half of text LCP in more depth.",[209,1322,1323,1327],{},[19,1324,1326],{"href":1325},"\u002Fcore-web-vitals-measurement\u002Ffont-loading-and-text-rendering-performance\u002Fpreloading-google-fonts-without-blocking-render\u002F","Preloading Google Fonts without blocking render"," — the font half for third-party font hosts.",[209,1329,1330,1334],{},[19,1331,1333],{"href":1332},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fwhy-the-lcp-element-changes-between-loads\u002F","Why the LCP element changes between loads"," — when text and image compete for the candidate.",[1336,1337,1339],"script",{"type":1338},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Fix Slow LCP When the H1 (or Any Text Block) Is the LCP Element\",\n  \"description\": \"Text LCP is governed by render-blocking CSS, web font loading and client rendering. How to find which one is holding your heading back.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Inline critical CSS and defer the rest\",\n      \"text\": \"Extract the CSS needed for above-the-fold content, inline it in the head, and load the full stylesheet without blocking render.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Let the heading paint in a fallback font\",\n      \"text\": \"Use font-display: swap (or optional for body text where a swap would be jarring) so the heading paints immediately in a fallback face, and pair it with metric overrides so the swap does not shift layout.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Preload the one font the heading uses\",\n      \"text\": \"If you want the real font to win the race rather than swap in later, preload exactly the weight and style used by the LCP heading — not the whole family.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Server-render the heading\",\n      \"text\": \"If the heading is client-rendered, no CSS or font fix will help as much as putting it in the HTML.\"\n    }\n  ]\n}\n",[1336,1341,1342],{"type":1338},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Fix Slow LCP When the H1 (or Any Text Block) Is the LCP Element\",\n  \"description\": \"Text LCP is governed by render-blocking CSS, web font loading and client rendering. How to find which one is holding your heading back.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element\u002F\"\n  }\n}\n",[1336,1344,1345],{"type":1338},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Core Web Vitals & Measurement\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Measuring LCP with Chrome DevTools\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Fixing LCP When the H1 Is the LCP Element\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element\u002F\"\n    }\n  ]\n}\n",[413,1347,1348],{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}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":387,"searchDepth":407,"depth":407,"links":1350},[1351,1352,1353,1359,1360,1361,1362],{"id":200,"depth":407,"text":201},{"id":252,"depth":407,"text":253},{"id":371,"depth":407,"text":372,"children":1354},[1355,1356,1357,1358],{"id":376,"depth":430,"text":377},{"id":585,"depth":430,"text":586},{"id":814,"depth":430,"text":815},{"id":891,"depth":430,"text":892},{"id":1083,"depth":407,"text":1084},{"id":1232,"depth":407,"text":1233},{"id":1273,"depth":407,"text":1274},{"id":1310,"depth":407,"text":1311},"Text LCP is governed by render-blocking CSS, web font loading and client rendering. How to find which one is holding your heading back.","md",{"slug":1366,"type":1367,"breadcrumb":1368,"datePublished":1376,"dateModified":1376},"fixing-lcp-when-the-h1-is-the-lcp-element","article",[1369,1372,1373,1374],{"name":1370,"url":1371},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1375},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element\u002F","2026-10-06",true,"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element",{"title":1380,"description":1381},"Fixing Slow LCP When a Text Heading Is the LCP Element","When the LCP element is a heading or paragraph, the bottleneck is fonts, CSS and render delay — not image bytes. Diagnose and fix text LCP over 2.5s.","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-when-the-h1-is-the-lcp-element\u002Findex","YA1ddhm73dPqVD2Bd4J0dpNUdBOyOEwgPid5fNE6Wb8",[1385,1389],{"title":1386,"path":1387,"stem":1388},"Fixing LCP Render Delay from Render-Blocking CSS","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-render-delay-from-render-blocking-css","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-lcp-render-delay-from-render-blocking-css\u002Findex",{"title":1390,"path":1391,"stem":1392},"Fixing Slow LCP in Vue and Nuxt Apps","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-slow-lcp-in-vue-and-nuxt-apps","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-slow-lcp-in-vue-and-nuxt-apps\u002Findex",1791308078330]