[{"data":1,"prerenderedAt":925},["ShallowReactive",2],{"content:\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002F":3,"surroundings:\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002F":917},{"id":4,"title":5,"body":6,"description":910,"extension":911,"meta":912,"navigation":270,"path":913,"seo":914,"stem":915,"__hash__":916},"content\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Findex.md","Reducing Cumulative Layout Shift (CLS)",{"type":7,"value":8,"toc":876},"minimark",[9,13,23,28,33,36,40,48,69,73,81,85,89,112,116,140,144,155,159,163,170,328,341,345,356,481,492,496,515,519,523,534,538,548,552,579,583,587,590,594,612,616,638,642,646,653,764,768,775,779,785,789,825,829,842,855,866,872],[10,11,5],"h1",{"id":12},"reducing-cumulative-layout-shift-cls",[14,15,16,17,22],"p",{},"Cumulative Layout Shift (CLS) quantifies the visual instability of a page as it loads, hydrates, and renders dynamic content. For frontend engineers, reducing CLS requires a systematic approach that bridges CSS architecture, asynchronous data handling, and framework hydration patterns. This guide provides a diagnostic-first methodology for identifying shift sources, implementing deterministic layout strategies, and enforcing guardrails in CI\u002FCD pipelines. While foundational concepts are covered in ",[18,19,21],"a",{"href":20},"\u002Fcore-web-vitals-measurement\u002F","Core Web Vitals & Measurement",", this document focuses exclusively on engineering workflows, explicit thresholds, and production-ready configurations to maintain CLS below the 0.1 benchmark.",[24,25,27],"h2",{"id":26},"cls-calculation-mechanics-explicit-thresholds","CLS Calculation Mechanics & Explicit Thresholds",[29,30,32],"h3",{"id":31},"session-window-logic","Session Window Logic",[14,34,35],{},"The browser calculates CLS by grouping layout shifts into discrete session windows. A window opens when the first unexpected shift occurs and closes after 1 second of inactivity. The maximum window duration is capped at 5 seconds. If multiple shifts occur within a window, their scores are summed. Only the highest-scoring window contributes to the final CLS metric for that page visit. This design prevents transient, rapid-fire shifts from disproportionately penalizing the score while capturing sustained instability.",[29,37,39],{"id":38},"impact-fraction-vs-distance-fraction","Impact Fraction vs Distance Fraction",[14,41,42,43,47],{},"Each individual shift is scored using the formula: ",[44,45,46],"code",{},"Shift Score = Impact Fraction × Distance Fraction",".",[49,50,51,59],"ul",{},[52,53,54,58],"li",{},[55,56,57],"strong",{},"Impact Fraction"," measures the percentage of the viewport occupied by the union of all unstable elements' bounding boxes across the shift.",[52,60,61,64,65,68],{},[55,62,63],{},"Distance Fraction"," calculates the maximum displacement of any unstable element relative to the viewport's largest dimension (width or height).\nA shift where a 20% viewport element moves 10% of the viewport height yields a score of ",[44,66,67],{},"0.20 × 0.10 = 0.02",". Understanding this multiplication is critical for prioritizing fixes: large elements moving short distances often score higher than small elements moving far.",[29,70,72],{"id":71},"the-01-benchmark","The 0.1 Benchmark",[14,74,75,76,80],{},"Google defines a \"Good\" CLS threshold as ≤ 0.1, \"Needs Improvement\" as 0.1–0.25, and \"Poor\" as > 0.25. These thresholds are evaluated against the 75th percentile (p75) of real-user field data, not isolated lab runs. For detailed percentile breakdowns and regional variance analysis, consult ",[18,77,79],{"href":78},"\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002F","Understanding Core Web Vitals Thresholds",". Crucially, the browser automatically excludes shifts triggered within 500ms of explicit user input (e.g., tapping a hamburger menu or expanding an accordion), provided the input is intentional and not a side effect of a scroll or hover.",[24,82,84],{"id":83},"diagnostic-workflows-for-shift-source-identification","Diagnostic Workflows for Shift Source Identification",[29,86,88],{"id":87},"chrome-devtools-performance-panel","Chrome DevTools Performance Panel",[14,90,91,92,95,96,99,100,103,104,107,108,111],{},"To isolate shift culprits, open Chrome DevTools and navigate to the Performance tab. Disable cache, enable CPU throttling (4x slowdown), and record a page load. In the resulting flame chart, filter by ",[44,93,94],{},"LayoutShift",". Each entry exposes ",[44,97,98],{},"sources"," containing ",[44,101,102],{},"node"," references, ",[44,105,106],{},"previousRect",", and ",[44,109,110],{},"currentRect",". Cross-reference these timestamps with DOM mutation events in the Main thread to pinpoint the exact script or network response triggering the reflow.",[29,113,115],{"id":114},"layout-shifts-overlay-trace","Layout Shifts Overlay & Trace",[14,117,118,119,122,123,126,127,130,131,134,135,139],{},"For visual debugging, open the Rendering panel (",[44,120,121],{},"Ctrl+Shift+P"," → ",[44,124,125],{},"Show Rendering",") and enable ",[44,128,129],{},"Layout Shift Regions",". Reload the page; unstable elements will flash with a yellow border proportional to their shift magnitude. Combine this with the ",[44,132,133],{},"Layout Shift"," trace in the Performance panel to correlate visual displacement with specific CSS recalculations or JavaScript execution blocks. The methodology mirrors resource-blocking analysis; while ",[18,136,138],{"href":137},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Measuring LCP with Chrome DevTools"," focuses on render-blocking assets, the same timeline correlation techniques apply directly to isolating CLS culprits.",[29,141,143],{"id":142},"field-vs-lab-data-correlation","Field vs Lab Data Correlation",[14,145,146,147,150,151,154],{},"Lab diagnostics (Lighthouse, WebPageTest) simulate controlled environments and often miss third-party latency or network-dependent content shifts. Always cross-validate lab findings with Real User Monitoring (RUM) data. Deploy a ",[44,148,149],{},"PerformanceObserver"," in production to capture ",[44,152,153],{},"layout-shift"," events. If RUM p75 CLS exceeds lab scores, investigate dynamic content injection, CDN cache misses, or user-specific viewport breakpoints that lab emulators fail to replicate.",[24,156,158],{"id":157},"css-media-stabilization-architectures","CSS & Media Stabilization Architectures",[29,160,162],{"id":161},"intrinsic-sizing-with-aspect-ratio","Intrinsic Sizing with aspect-ratio",[14,164,165,166,169],{},"Explicit dimensions prevent layout shifts by reserving viewport space before resource fetch. Modern CSS ",[44,167,168],{},"aspect-ratio"," eliminates the need for padding-hack wrappers. Apply it directly to media containers to guarantee deterministic space allocation across responsive breakpoints.",[171,172,177],"pre",{"className":173,"code":174,"language":175,"meta":176,"style":176},"language-css shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast",".media-container {\n aspect-ratio: 16 \u002F 9;\n width: 100%;\n max-width: 800px;\n background: #f0f0f0;\n}\n\n.media-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n","css","",[44,178,179,192,213,230,246,259,265,272,283,296,310,323],{"__ignoreMap":176},[180,181,184,188],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"s5hCx",".media-container",[180,189,191],{"class":190},"s3sCt"," {\n",[180,193,195,198,201,204,207,210],{"class":182,"line":194},2,[180,196,197],{"class":186}," aspect-ratio",[180,199,200],{"class":190},": ",[180,202,203],{"class":186},"16",[180,205,206],{"class":190}," \u002F ",[180,208,209],{"class":186},"9",[180,211,212],{"class":190},";\n",[180,214,216,219,221,224,228],{"class":182,"line":215},3,[180,217,218],{"class":186}," width",[180,220,200],{"class":190},[180,222,223],{"class":186},"100",[180,225,227],{"class":226},"sCJTb","%",[180,229,212],{"class":190},[180,231,233,236,238,241,244],{"class":182,"line":232},4,[180,234,235],{"class":186}," max-width",[180,237,200],{"class":190},[180,239,240],{"class":186},"800",[180,242,243],{"class":226},"px",[180,245,212],{"class":190},[180,247,249,252,254,257],{"class":182,"line":248},5,[180,250,251],{"class":186}," background",[180,253,200],{"class":190},[180,255,256],{"class":186},"#f0f0f0",[180,258,212],{"class":190},[180,260,262],{"class":182,"line":261},6,[180,263,264],{"class":190},"}\n",[180,266,268],{"class":182,"line":267},7,[180,269,271],{"emptyLinePlaceholder":270},true,"\n",[180,273,275,277,281],{"class":182,"line":274},8,[180,276,187],{"class":186},[180,278,280],{"class":279},"sj_b3"," img",[180,282,191],{"class":190},[180,284,286,288,290,292,294],{"class":182,"line":285},9,[180,287,218],{"class":186},[180,289,200],{"class":190},[180,291,223],{"class":186},[180,293,227],{"class":226},[180,295,212],{"class":190},[180,297,299,302,304,306,308],{"class":182,"line":298},10,[180,300,301],{"class":186}," height",[180,303,200],{"class":190},[180,305,223],{"class":186},[180,307,227],{"class":226},[180,309,212],{"class":190},[180,311,313,316,318,321],{"class":182,"line":312},11,[180,314,315],{"class":186}," object-fit",[180,317,200],{"class":190},[180,319,320],{"class":186},"cover",[180,322,212],{"class":190},[180,324,326],{"class":182,"line":325},12,[180,327,264],{"class":190},[14,329,330,333,334,336,337,340],{},[55,331,332],{},"Trade-off:"," ",[44,335,168],{}," is widely supported but requires explicit width\u002Fheight fallbacks for legacy browsers. Pair with ",[44,338,339],{},"object-fit: cover"," to maintain visual fidelity without triggering reflows when the intrinsic image ratio differs from the container.",[29,342,344],{"id":343},"font-loading-fallback-metrics","Font Loading & Fallback Metrics",[14,346,347,348,351,352,355],{},"Font swaps cause vertical layout shifts when fallback and web font metrics (ascent, descent, cap height) diverge. Use ",[44,349,350],{},"font-display: swap"," for performance, but mitigate FOUT-induced shifts by aligning fallback metrics. Define ",[44,353,354],{},"@font-face"," overrides:",[171,357,359],{"className":173,"code":358,"language":175,"meta":176,"style":176},"@font-face {\n font-family: 'CustomWebFont';\n src: url('\u002Ffonts\u002Fcustom.woff2') format('woff2');\n font-display: swap;\n size-adjust: 100%;\n ascent-override: 95%;\n descent-override: 25%;\n line-gap-override: 0%;\n}\n",[44,360,361,367,380,410,422,435,449,463,477],{"__ignoreMap":176},[180,362,363,365],{"class":182,"line":183},[180,364,354],{"class":226},[180,366,191],{"class":190},[180,368,369,372,374,378],{"class":182,"line":194},[180,370,371],{"class":186}," font-family",[180,373,200],{"class":190},[180,375,377],{"class":376},"sJdzJ","'CustomWebFont'",[180,379,212],{"class":190},[180,381,382,385,387,390,393,396,399,402,404,407],{"class":182,"line":215},[180,383,384],{"class":186}," src",[180,386,200],{"class":190},[180,388,389],{"class":186},"url",[180,391,392],{"class":190},"(",[180,394,395],{"class":376},"'\u002Ffonts\u002Fcustom.woff2'",[180,397,398],{"class":190},") ",[180,400,401],{"class":186},"format",[180,403,392],{"class":190},[180,405,406],{"class":376},"'woff2'",[180,408,409],{"class":190},");\n",[180,411,412,415,417,420],{"class":182,"line":232},[180,413,414],{"class":186}," font-display",[180,416,200],{"class":190},[180,418,419],{"class":186},"swap",[180,421,212],{"class":190},[180,423,424,427,429,431,433],{"class":182,"line":248},[180,425,426],{"class":186}," size-adjust",[180,428,200],{"class":190},[180,430,223],{"class":186},[180,432,227],{"class":226},[180,434,212],{"class":190},[180,436,437,440,442,445,447],{"class":182,"line":261},[180,438,439],{"class":186}," ascent-override",[180,441,200],{"class":190},[180,443,444],{"class":186},"95",[180,446,227],{"class":226},[180,448,212],{"class":190},[180,450,451,454,456,459,461],{"class":182,"line":267},[180,452,453],{"class":186}," descent-override",[180,455,200],{"class":190},[180,457,458],{"class":186},"25",[180,460,227],{"class":226},[180,462,212],{"class":190},[180,464,465,468,470,473,475],{"class":182,"line":274},[180,466,467],{"class":186}," line-gap-override",[180,469,200],{"class":190},[180,471,472],{"class":186},"0",[180,474,227],{"class":226},[180,476,212],{"class":190},[180,478,479],{"class":182,"line":285},[180,480,264],{"class":190},[14,482,483,333,485,488,489,491],{},[55,484,332],{},[44,486,487],{},"font-display: optional"," prevents shifts entirely but may never load the custom font on slow connections. ",[44,490,419],{}," prioritizes typography at the cost of potential layout movement if metrics aren't overridden.",[29,493,495],{"id":494},"container-query-stability","Container Query Stability",[14,497,498,499,502,503,506,507,510,511,514],{},"CSS Container Queries (",[44,500,501],{},"@container",") trigger layout recalculations when parent dimensions change. If a container's width is derived from async content or JS-driven state, it can cascade shifts to child elements. Mitigate by setting explicit ",[44,504,505],{},"min-width","\u002F",[44,508,509],{},"max-width"," bounds on containers and avoiding ",[44,512,513],{},"width: auto"," on query-dependent layouts.",[24,516,518],{"id":517},"dynamic-content-third-party-injection-mitigation","Dynamic Content & Third-Party Injection Mitigation",[29,520,522],{"id":521},"reserved-placeholder-slots","Reserved Placeholder Slots",[14,524,525,526,529,530,533],{},"Async DOM insertions (e.g., comment sections, recommendation feeds) are primary CLS drivers. Never append nodes to the document flow without pre-allocated space. Use CSS ",[44,527,528],{},"min-height"," or fixed-height containers with ",[44,531,532],{},"overflow: hidden"," until data resolves. Reserve the exact pixel height required for the expected payload.",[29,535,537],{"id":536},"skeleton-ui-implementation","Skeleton UI Implementation",[14,539,540,541,543,544,547],{},"Skeleton screens improve perceived performance but can worsen CLS if their dimensions don't match the final content. Implement skeletons using the same ",[44,542,168],{}," and grid structures as the resolved UI. Animate opacity (",[44,545,546],{},"@keyframes pulse",") rather than dimensions to avoid triggering layout recalculations during the loading state.",[29,549,551],{"id":550},"ad-widget-slot-allocation","Ad & Widget Slot Allocation",[14,553,554,555,558,559,561,562,565,566,570,571,574,575,578],{},"Third-party scripts frequently inject iframes or banners post-",[44,556,557],{},"DOMContentLoaded",". For monetized sites, implement strict slot reservation using ",[44,560,528],{}," and ",[44,563,564],{},"max-height"," constraints. Consult ",[18,567,569],{"href":568},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Fdebugging-cls-caused-by-dynamic-ad-injection\u002F","Debugging CLS caused by dynamic ad injection"," to implement lazy-loading boundaries and ",[44,572,573],{},"loading=\"lazy\""," on ad containers. Always wrap third-party embeds in a fixed-dimension wrapper with ",[44,576,577],{},"contain: layout style"," to isolate their DOM mutations from the main document flow.",[24,580,582],{"id":581},"framework-hydration-state-driven-layout-shifts","Framework Hydration & State-Driven Layout Shifts",[29,584,586],{"id":585},"ssrssg-hydration-mismatches","SSR\u002FSSG Hydration Mismatches",[14,588,589],{},"When server-rendered HTML dimensions differ from client-calculated values (e.g., missing viewport width during SSR), hydration triggers layout thrashing. Ensure server-side templates use identical CSS constraints as the client bundle. Avoid conditional rendering that alters DOM structure during hydration.",[29,591,593],{"id":592},"client-side-routing-transitions","Client-Side Routing Transitions",[14,595,596,597,600,601,604,605,561,608,611],{},"SPA route transitions often cause content jumping when new data fetches after navigation. Implement route-level skeleton loaders that match the target layout's grid structure. Defer non-critical data fetching until ",[44,598,599],{},"requestIdleCallback"," or after ",[44,602,603],{},"first-contentful-paint",". Use CSS transitions exclusively on ",[44,606,607],{},"transform",[44,609,610],{},"opacity"," to avoid synchronous reflow during route changes.",[29,613,615],{"id":614},"state-driven-visibility-toggles","State-Driven Visibility Toggles",[14,617,618,619,206,622,625,626,629,630,633,634,637],{},"Toggling UI elements via ",[44,620,621],{},"display: none",[44,623,624],{},"display: block"," forces layout recalculation. Prefer ",[44,627,628],{},"visibility: hidden"," or ",[44,631,632],{},"opacity: 0"," combined with ",[44,635,636],{},"position: absolute"," to remove elements from the layout flow without triggering reflow. For complex state-driven layouts, align hydration timing with layout stability by reviewing Optimizing React hydration for faster interactivity to defer non-essential component mounting until after the initial paint stabilizes.",[24,639,641],{"id":640},"cicd-guardrails-automated-threshold-enforcement","CI\u002FCD Guardrails & Automated Threshold Enforcement",[29,643,645],{"id":644},"lighthouse-ci-configuration","Lighthouse CI Configuration",[14,647,648,649,652],{},"Integrate CLS validation into pull request workflows using Lighthouse CI. Define strict budgets in ",[44,650,651],{},"lighthouserc.json"," to block merges that regress performance.",[171,654,658],{"className":655,"code":656,"language":657,"meta":176,"style":176},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"ci\": {\n \"collect\": {\n \"settings\": {\n \"preset\": \"desktop\"\n }\n },\n \"assert\": {\n \"assertions\": {\n \"cumulative-layout-shift\": [\"error\", { \"maxNumericValue\": 0.1 }]\n }\n }\n }\n}\n","json",[44,659,660,665,673,680,687,697,702,707,714,721,746,750,754,759],{"__ignoreMap":176},[180,661,662],{"class":182,"line":183},[180,663,664],{"class":190},"{\n",[180,666,667,670],{"class":182,"line":194},[180,668,669],{"class":279}," \"ci\"",[180,671,672],{"class":190},": {\n",[180,674,675,678],{"class":182,"line":215},[180,676,677],{"class":279}," \"collect\"",[180,679,672],{"class":190},[180,681,682,685],{"class":182,"line":232},[180,683,684],{"class":279}," \"settings\"",[180,686,672],{"class":190},[180,688,689,692,694],{"class":182,"line":248},[180,690,691],{"class":279}," \"preset\"",[180,693,200],{"class":190},[180,695,696],{"class":376},"\"desktop\"\n",[180,698,699],{"class":182,"line":261},[180,700,701],{"class":190}," }\n",[180,703,704],{"class":182,"line":267},[180,705,706],{"class":190}," },\n",[180,708,709,712],{"class":182,"line":274},[180,710,711],{"class":279}," \"assert\"",[180,713,672],{"class":190},[180,715,716,719],{"class":182,"line":285},[180,717,718],{"class":279}," \"assertions\"",[180,720,672],{"class":190},[180,722,723,726,729,732,735,738,740,743],{"class":182,"line":298},[180,724,725],{"class":279}," \"cumulative-layout-shift\"",[180,727,728],{"class":190},": [",[180,730,731],{"class":376},"\"error\"",[180,733,734],{"class":190},", { ",[180,736,737],{"class":279},"\"maxNumericValue\"",[180,739,200],{"class":190},[180,741,742],{"class":186},"0.1",[180,744,745],{"class":190}," }]\n",[180,747,748],{"class":182,"line":312},[180,749,701],{"class":190},[180,751,752],{"class":182,"line":325},[180,753,701],{"class":190},[180,755,757],{"class":182,"line":756},13,[180,758,701],{"class":190},[180,760,762],{"class":182,"line":761},14,[180,763,264],{"class":190},[29,765,767],{"id":766},"playwrightlighthouse-integration","Playwright\u002FLighthouse Integration",[14,769,770,771,774],{},"Automate multi-viewport CLS testing using Playwright. Inject the ",[44,772,773],{},"web-vitals"," library into the page context to capture real-time metrics across different network throttling profiles. Run tests against staging environments with production-like CDN caching to catch environment-specific shifts.",[29,776,778],{"id":777},"rum-alerting-pipelines","RUM Alerting Pipelines",[14,780,781,782,784],{},"Deploy a lightweight ",[44,783,149],{}," to aggregate CLS in production. Pipe telemetry to Datadog or New Relic and configure p75 alerts for CLS regressions > 0.15. For applications rendering large lists or infinite scrolls, implement virtualization to prevent DOM bloat and maintain stable scroll positions. Reference Implementing virtual scrolling for large datasets for complementary strategies that reduce memory pressure and eliminate scroll-driven layout shifts.",[24,786,788],{"id":787},"common-mistakes","Common Mistakes",[49,790,791,804,807,816,819,822],{},[52,792,793,794,561,797,800,801,803],{},"Relying solely on ",[44,795,796],{},"width",[44,798,799],{},"height"," attributes without CSS ",[44,802,168],{}," for responsive breakpoints",[52,805,806],{},"Ignoring font fallback metrics, causing FOUT-induced vertical shifts",[52,808,809,810,812,813,815],{},"Using ",[44,811,628],{}," instead of ",[44,814,632],{}," for async content, triggering layout recalculation",[52,817,818],{},"Injecting DOM nodes without reserved container space or skeleton placeholders",[52,820,821],{},"Blocking the main thread during hydration, delaying layout stabilization",[52,823,824],{},"Treating lab Lighthouse scores as absolute truth without correlating with RUM p75 data",[24,826,828],{"id":827},"faq","FAQ",[14,830,831,834,835,838,839,841],{},[55,832,833],{},"How do I exclude user-initiated shifts from CLS calculations?","\nThe browser automatically excludes shifts triggered by user input (e.g., clicks, taps) if they occur within 500ms of the interaction. Use ",[44,836,837],{},"entry.hadRecentInput"," in the ",[44,840,149],{}," to filter these out in custom telemetry.",[14,843,844,851,852,854],{},[55,845,846,847,850],{},"Does ",[44,848,849],{},"will-change"," prevent layout shifts?","\nNo. ",[44,853,849],{}," only hints at upcoming compositing or paint changes for GPU acceleration. It does not reserve layout space or prevent DOM tree mutations from shifting surrounding elements.",[14,856,857,860,861,561,863,865],{},[55,858,859],{},"How should I handle CLS during single-page app route transitions?","\nImplement route-level skeleton loaders, pre-fetch critical layout dimensions, and use CSS transitions that operate on ",[44,862,607],{},[44,864,610],{}," rather than properties that trigger reflow. Defer non-critical data fetching until after the initial paint.",[14,867,868,871],{},[55,869,870],{},"What is the difference between CLS and layout thrashing?","\nCLS measures the cumulative visual displacement of elements across the page lifecycle. Layout thrashing is a synchronous JavaScript anti-pattern where alternating DOM reads and writes force repeated style recalculations, which can indirectly cause CLS but is primarily a CPU bottleneck.",[873,874,875],"style",{},"html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}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 .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}",{"title":176,"searchDepth":194,"depth":194,"links":877},[878,883,888,893,898,903,908,909],{"id":26,"depth":194,"text":27,"children":879},[880,881,882],{"id":31,"depth":215,"text":32},{"id":38,"depth":215,"text":39},{"id":71,"depth":215,"text":72},{"id":83,"depth":194,"text":84,"children":884},[885,886,887],{"id":87,"depth":215,"text":88},{"id":114,"depth":215,"text":115},{"id":142,"depth":215,"text":143},{"id":157,"depth":194,"text":158,"children":889},[890,891,892],{"id":161,"depth":215,"text":162},{"id":343,"depth":215,"text":344},{"id":494,"depth":215,"text":495},{"id":517,"depth":194,"text":518,"children":894},[895,896,897],{"id":521,"depth":215,"text":522},{"id":536,"depth":215,"text":537},{"id":550,"depth":215,"text":551},{"id":581,"depth":194,"text":582,"children":899},[900,901,902],{"id":585,"depth":215,"text":586},{"id":592,"depth":215,"text":593},{"id":614,"depth":215,"text":615},{"id":640,"depth":194,"text":641,"children":904},[905,906,907],{"id":644,"depth":215,"text":645},{"id":766,"depth":215,"text":767},{"id":777,"depth":215,"text":778},{"id":787,"depth":194,"text":788},{"id":827,"depth":194,"text":828},"Cumulative Layout Shift (CLS) quantifies the visual instability of a page as it loads, hydrates, and renders dynamic content. For frontend engineers, reducing CLS requires a systematic approach that bridges CSS architecture, asynchronous data handling, and framework hydration patterns. This guide provides a diagnostic-first methodology for identifying shift sources, implementing deterministic layout strategies, and enforcing guardrails in CI\u002FCD pipelines. While foundational concepts are covered in Core Web Vitals & Measurement, this document focuses exclusively on engineering workflows, explicit thresholds, and production-ready configurations to maintain CLS below the 0.1 benchmark.","md",{},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls",{"title":5,"description":910},"core-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Findex","mVYl8iLH-xWFtHMMFEoWPoav7L2GPt5ZglMrsJMgf_c",[918,922],{"title":919,"path":920,"stem":921,"children":-1},"Improving INP for Complex Single Page Applications","\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Fimproving-inp-for-complex-single-page-applications","core-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Fimproving-inp-for-complex-single-page-applications\u002Findex",{"title":569,"path":923,"stem":924,"children":-1},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Fdebugging-cls-caused-by-dynamic-ad-injection","core-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Fdebugging-cls-caused-by-dynamic-ad-injection\u002Findex",1777925998163]