[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"term-l\u002Flcp":3,"related-l\u002Flcp":168},{"id":4,"title":5,"acronym":5,"body":6,"category":147,"description":148,"difficulty":149,"extension":150,"letter":151,"meta":152,"navigation":153,"path":154,"related":155,"seo":161,"sitemap":162,"stem":165,"subcategory":166,"__hash__":167},"terms\u002Fterms\u002Fl\u002Flcp.md","LCP",{"type":7,"value":8,"toc":141},"minimark",[9,14,18,22,25,29,130,134,137],[10,11,13],"h2",{"id":12},"eli5-the-vibe-check","ELI5 — The Vibe Check",[15,16,17],"p",{},"LCP measures how long it takes for the biggest thing on your page to appear. Usually it's a hero image or a big headline. If your LCP is slow, users are staring at a blank or half-loaded screen. Good LCP is under 2.5 seconds. Yes, seconds.",[10,19,21],{"id":20},"real-talk","Real Talk",[15,23,24],{},"Largest Contentful Paint (LCP) measures the time from when the page starts loading to when the largest image or text block in the viewport is rendered. It is a Core Web Vital with a 'Good' threshold of ≤2.5s. Optimizations include preloading hero images, using responsive images, and optimizing server response times (TTFB).",[10,26,28],{"id":27},"show-me-the-code","Show Me The Code",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Preload the LCP image to improve score -->\n\u003Clink\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\u002Fhero.webp\"\n  fetchpriority=\"high\"\n\u002F>\n","html","",[37,38,39,48,59,79,94,109,124],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u003C!-- Preload the LCP image to improve score -->\n",[40,49,51,55],{"class":42,"line":50},2,[40,52,54],{"class":53},"sMK4o","\u003C",[40,56,58],{"class":57},"swJcz","link\n",[40,60,62,66,69,72,76],{"class":42,"line":61},3,[40,63,65],{"class":64},"spNyl","  rel",[40,67,68],{"class":53},"=",[40,70,71],{"class":53},"\"",[40,73,75],{"class":74},"sfazB","preload",[40,77,78],{"class":53},"\"\n",[40,80,82,85,87,89,92],{"class":42,"line":81},4,[40,83,84],{"class":64},"  as",[40,86,68],{"class":53},[40,88,71],{"class":53},[40,90,91],{"class":74},"image",[40,93,78],{"class":53},[40,95,97,100,102,104,107],{"class":42,"line":96},5,[40,98,99],{"class":64},"  href",[40,101,68],{"class":53},[40,103,71],{"class":53},[40,105,106],{"class":74},"\u002Fhero.webp",[40,108,78],{"class":53},[40,110,112,115,117,119,122],{"class":42,"line":111},6,[40,113,114],{"class":64},"  fetchpriority",[40,116,68],{"class":53},[40,118,71],{"class":53},[40,120,121],{"class":74},"high",[40,123,78],{"class":53},[40,125,127],{"class":42,"line":126},7,[40,128,129],{"class":53},"\u002F>\n",[10,131,133],{"id":132},"when-youll-hear-this","When You'll Hear This",[15,135,136],{},"Our LCP was 4.8s — the hero image wasn't preloaded.,After adding fetchpriority='high', LCP dropped to 1.9s.,LCP is usually caused by a slow hero image or render-blocking scripts.",[138,139,140],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--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);}",{"title":35,"searchDepth":50,"depth":50,"links":142},[143,144,145,146],{"id":12,"depth":50,"text":13},{"id":20,"depth":50,"text":21},{"id":27,"depth":50,"text":28},{"id":132,"depth":50,"text":133},"frontend","LCP measures how long it takes for the biggest thing on your page to appear. Usually it's a hero image or a big headline.","intermediate","md","l",{},true,"\u002Fterms\u002Fl\u002Flcp",[156,157,158,159,160],"Core Web Vitals","Web Vitals","CLS","INP","Lazy Loading",{"title":5,"description":148},{"changefreq":163,"priority":164},"weekly",0.7,"terms\u002Fl\u002Flcp",null,"5Iwv3yZjCnYep2Hyz9tePqeyR02pJP2hJMHXFViUFzs",[169,172,175,178,182],{"title":158,"path":170,"acronym":158,"category":147,"difficulty":149,"description":171},"\u002Fterms\u002Fc\u002Fcls","CLS measures how much your page randomly jumps around while loading.",{"title":156,"path":173,"acronym":166,"category":147,"difficulty":149,"description":174},"\u002Fterms\u002Fc\u002Fcore-web-vitals","Core Web Vitals are the three most important Web Vitals that Google actually uses as ranking signals.",{"title":159,"path":176,"acronym":159,"category":147,"difficulty":149,"description":177},"\u002Fterms\u002Fi\u002Finp","INP measures how snappy your website feels every time you interact with it — not just the first click, but every button press, dropdown open, and form subm...",{"title":160,"path":179,"acronym":166,"category":180,"difficulty":149,"description":181},"\u002Fterms\u002Fl\u002Flazy-loading","database","Lazy loading waits until you actually access related data before fetching it. Access post.author and only then does it query the database.",{"title":157,"path":183,"acronym":166,"category":147,"difficulty":149,"description":184},"\u002Fterms\u002Fw\u002Fweb-vitals","Web Vitals are Google's report card for how good your website feels to use. They measure things like 'how fast does the main content load?",1776518291118]