[{"data":1,"prerenderedAt":156},["ShallowReactive",2],{"term-c\u002Fcls":3,"related-c\u002Fcls":143},{"id":4,"title":5,"acronym":5,"body":6,"category":123,"description":124,"difficulty":125,"extension":126,"letter":127,"meta":128,"navigation":129,"path":130,"related":131,"seo":136,"sitemap":137,"stem":140,"subcategory":141,"__hash__":142},"terms\u002Fterms\u002Fc\u002Fcls.md","CLS",{"type":7,"value":8,"toc":117},"minimark",[9,14,18,22,25,29,106,110,113],[10,11,13],"h2",{"id":12},"eli5-the-vibe-check","ELI5 — The Vibe Check",[15,16,17],"p",{},"CLS measures how much your page randomly jumps around while loading. You know when you're about to click a button and suddenly an ad loads above it and you click the wrong thing? That's a CLS nightmare. Good CLS is basically zero jumping.",[10,19,21],{"id":20},"real-talk","Real Talk",[15,23,24],{},"Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual instability — the sum of all unexpected layout shift scores during the page's lifecycle. Each shift is scored based on the fraction of the viewport affected and the distance elements move. A 'Good' CLS score is ≤0.1. Common causes: images without dimensions, late-loading ads, dynamically injected content.",[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-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Fix CLS: always define image dimensions *\u002F\nimg {\n  width: 100%;\n  aspect-ratio: 16 \u002F 9; \u002F* prevents layout shift *\u002F\n}\n","css","",[37,38,39,48,59,76,100],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u002F* Fix CLS: always define image dimensions *\u002F\n",[40,49,51,55],{"class":42,"line":50},2,[40,52,54],{"class":53},"sBMFI","img",[40,56,58],{"class":57},"sMK4o"," {\n",[40,60,62,66,69,73],{"class":42,"line":61},3,[40,63,65],{"class":64},"sqsOY","  width",[40,67,68],{"class":57},":",[40,70,72],{"class":71},"sbssI"," 100%",[40,74,75],{"class":57},";\n",[40,77,79,82,84,87,91,94,97],{"class":42,"line":78},4,[40,80,81],{"class":64},"  aspect-ratio",[40,83,68],{"class":57},[40,85,86],{"class":71}," 16",[40,88,90],{"class":89},"sTEyZ"," \u002F ",[40,92,93],{"class":71},"9",[40,95,96],{"class":57},";",[40,98,99],{"class":46}," \u002F* prevents layout shift *\u002F\n",[40,101,103],{"class":42,"line":102},5,[40,104,105],{"class":57},"}\n",[10,107,109],{"id":108},"when-youll-hear-this","When You'll Hear This",[15,111,112],{},"The late-loading banner ad was causing our CLS to spike.,Always set width and height on images to prevent CLS.,Our CLS score went from 0.45 to 0.03 after reserving space for ads.",[114,115,116],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":118},[119,120,121,122],{"id":12,"depth":50,"text":13},{"id":20,"depth":50,"text":21},{"id":27,"depth":50,"text":28},{"id":108,"depth":50,"text":109},"frontend","CLS measures how much your page randomly jumps around while loading.","intermediate","md","c",{},true,"\u002Fterms\u002Fc\u002Fcls",[132,133,134,135],"Core Web Vitals","Web Vitals","LCP","INP",{"title":5,"description":124},{"changefreq":138,"priority":139},"weekly",0.7,"terms\u002Fc\u002Fcls",null,"5ttSSw_mWCH80v0OV8d2Womg7ZS_wQCwG5KS3yCs0T8",[144,147,150,153],{"title":132,"path":145,"acronym":141,"category":123,"difficulty":125,"description":146},"\u002Fterms\u002Fc\u002Fcore-web-vitals","Core Web Vitals are the three most important Web Vitals that Google actually uses as ranking signals.",{"title":135,"path":148,"acronym":135,"category":123,"difficulty":125,"description":149},"\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":134,"path":151,"acronym":134,"category":123,"difficulty":125,"description":152},"\u002Fterms\u002Fl\u002Flcp","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.",{"title":133,"path":154,"acronym":141,"category":123,"difficulty":125,"description":155},"\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?",1776518262629]