[{"data":1,"prerenderedAt":822},["ShallowReactive",2],{"content:\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002F":3,"surroundings:\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002F":814},{"id":4,"title":5,"body":6,"description":806,"extension":807,"meta":808,"navigation":809,"path":810,"seo":811,"stem":812,"__hash__":813},"content\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Findex.md","Understanding Core Web Vitals Thresholds",{"type":7,"value":8,"toc":796},"minimark",[9,13,23,28,36,43,48,76,80,83,110,125,133,137,145,168,173,217,221,232,255,258,263,310,314,317,324,550,558,564,595,599,602,620,625,722,725,729,761,765,771,780,786,792],[10,11,5],"h1",{"id":12},"understanding-core-web-vitals-thresholds",[14,15,16,17,22],"p",{},"A deep dive into the exact numerical thresholds for Core Web Vitals, bridging the gap between Google's published benchmarks and real-world engineering implementation. This guide provides diagnostic workflows, CI\u002FCD configuration patterns, and actionable optimization strategies to keep LCP, INP, and CLS within \"Good\" ranges across diverse network conditions. 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 threshold calibration, automated enforcement, and metric-specific engineering targets.",[24,25,27],"h2",{"id":26},"threshold-architecture-field-data-vs-lab-benchmarks","Threshold Architecture: Field Data vs. Lab Benchmarks",[14,29,30,31,35],{},"Core Web Vitals thresholds are not arbitrary targets; they are statistically derived from the Chrome User Experience Report (CrUX) dataset. Google defines the \"Good\" threshold at the ",[32,33,34],"strong",{},"75th percentile"," of real-user monitoring (RUM) data. This means 75% of page loads across all tracked devices, networks, and geographic regions must fall below the specified limit to qualify for optimal search ranking signals. The 75th percentile is deliberately chosen to account for device fragmentation and network variability without penalizing edge cases that skew the median.",[14,37,38,39,42],{},"Field data (CrUX) and lab data (Lighthouse, WebPageTest) operate on fundamentally different measurement models. Lab environments run on deterministic, high-performance hardware with simulated network throttling, yielding reproducible but often optimistic results. Field data captures unthrottled, real-world execution where background tabs, competing processes, and fluctuating cellular signals introduce variance. A common engineering pitfall is treating lab scores as production guarantees. To align lab and field thresholds, you must calculate a ",[32,40,41],{},"performance budget"," that targets the 60th–65th percentile in lab environments, leaving a 10–15% buffer for real-world degradation.",[14,44,45],{},[32,46,47],{},"Diagnostic Workflow for Threshold Divergence:",[49,50,51,55,58,70,73],"ol",{},[52,53,54],"li",{},"Export your origin-level CrUX data via the BigQuery public dataset or PageSpeed Insights API.",[52,56,57],{},"Calculate the 75th percentile for LCP, INP, and CLS across mobile and desktop form factors.",[52,59,60,61,65,66,69],{},"Run a controlled Lighthouse audit with ",[62,63,64],"code",{},"--throttling.cpuSlowdownMultiplier=4"," and ",[62,67,68],{},"--throttling.rttMs=150"," to simulate mid-tier mobile conditions.",[52,71,72],{},"Compare lab metrics against field distributions. If lab LCP is \u003C1.8s but field LCP is >2.8s, investigate server response variability, third-party script execution, or regional CDN routing gaps.",[52,74,75],{},"Adjust your internal performance budget to target the lower bound of the field distribution, ensuring CI gates fail before production thresholds are breached.",[24,77,79],{"id":78},"largest-contentful-paint-lcp-sub-25s-engineering-targets","Largest Contentful Paint (LCP): Sub-2.5s Engineering Targets",[14,81,82],{},"The 2.5s LCP threshold represents the maximum acceptable time for the primary content element to render. LCP is not a monolithic metric; it decomposes into four sequential phases: Time to First Byte (TTFB), Resource Load Delay, Resource Load Duration, and Element Render Delay. To guarantee aggregate compliance, you must enforce sub-thresholds for each phase:",[84,85,86,92,98,104],"ul",{},[52,87,88,91],{},[32,89,90],{},"TTFB:"," ≤ 0.8s (server processing + network latency)",[52,93,94,97],{},[32,95,96],{},"Resource Load Delay:"," ≤ 0.1s (critical rendering path blocking)",[52,99,100,103],{},[32,101,102],{},"Resource Load Duration:"," ≤ 1.2s (asset transfer + parsing)",[52,105,106,109],{},[32,107,108],{},"Element Render Delay:"," ≤ 0.4s (DOM construction + layout calculation)",[14,111,112,113,116,117,120,121,124],{},"Optimizing LCP requires aggressive resource prioritization. Apply ",[62,114,115],{},"fetchpriority=\"high\""," to the hero image or critical font files, and use ",[62,118,119],{},"\u003Clink rel=\"preload\" as=\"image\" fetchpriority=\"high\">"," for above-the-fold assets. When supported by your infrastructure, implement HTTP 103 Early Hints to initiate resource fetching during the TLS handshake. For JavaScript-heavy frameworks, defer hydration of non-critical components using ",[62,122,123],{},"requestIdleCallback"," or streaming SSR to prevent render-blocking delays.",[14,126,127,128,132],{},"Isolate bottlenecks using the Performance panel in Chrome. Navigate to the ",[18,129,131],{"href":130},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Measuring LCP with Chrome DevTools"," workflow to capture the exact LCP element, trace its network waterfall, and identify main-thread contention. If TTFB dominates the budget, optimize database queries, enable edge caching, or implement static generation. If Resource Load Duration is the culprit, compress assets (Brotli\u002FWebP), implement HTTP\u002F2 multiplexing, or split large bundles. Consistently hitting sub-2.0s in lab environments typically translates to stable 75th percentile compliance in production.",[24,134,136],{"id":135},"interaction-to-next-paint-inp-the-200ms-main-thread-budget","Interaction to Next Paint (INP): The 200ms Main Thread Budget",[14,138,139,140,144],{},"INP replaced FID as the official interactivity metric because it evaluates the responsiveness of ",[141,142,143],"em",{},"all"," user interactions throughout the page lifecycle, not just the first tap. The 200ms threshold applies to the 90th percentile of interaction durations across a session. Unlike FID, which only measured input delay, INP captures the entire processing time: input delay, event handler execution, and presentation delay. This makes the 200ms budget significantly tighter and requires strict main thread management.",[14,146,147,148,152,153,156,157,160,161,164,165,167],{},"Legacy patterns from ",[18,149,151],{"href":150},"\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002F","Optimizing First Input Delay (FID)"," remain relevant but must be scaled. The core strategy is task splitting and yielding. Break synchronous operations exceeding 50ms into smaller chunks using ",[62,154,155],{},"setTimeout",", ",[62,158,159],{},"MessageChannel",", or the modern ",[62,162,163],{},"scheduler.yield()"," API. The ",[62,166,163],{}," method allows the browser to process pending user interactions and render updates between microtasks, preventing long tasks from monopolizing the main thread.",[14,169,170],{},[32,171,172],{},"Diagnostic Workflow for INP Violations:",[49,174,175,186,193,196,210],{},[52,176,177,178,181,182,185],{},"Enable the Long Tasks API (",[62,179,180],{},"PerformanceObserver"," with ",[62,183,184],{},"entryType: 'longtask'",") in production RUM.",[52,187,188,189,192],{},"Filter for tasks >50ms and correlate their ",[62,190,191],{},"name"," with the originating script or framework hook.",[52,194,195],{},"Use Chrome's Performance tab to record an interaction. Look for \"Long Task\" markers in the main thread track.",[52,197,198,199,156,202,205,206,209],{},"Identify blocking scripts (e.g., analytics, ad tech, heavy DOM mutations) and apply ",[62,200,201],{},"async",[62,203,204],{},"defer",", or dynamic ",[62,207,208],{},"import()"," to push them off the critical path.",[52,211,212,213,216],{},"Refactor heavy event handlers by moving non-UI logic to Web Workers or deferring DOM updates until after ",[62,214,215],{},"requestAnimationFrame",".\nTargeting a 150ms average interaction duration in lab tests provides a reliable buffer against field variability, ensuring the 200ms threshold remains intact during peak traffic.",[24,218,220],{"id":219},"cumulative-layout-shift-cls-enforcing-the-01-stability-boundary","Cumulative Layout Shift (CLS): Enforcing the 0.1 Stability Boundary",[14,222,223,224,227,228,231],{},"The 0.1 CLS threshold mandates that visual stability remains intact during the page lifecycle. CLS is calculated by multiplying the ",[32,225,226],{},"impact fraction"," (percentage of viewport affected) by the ",[32,229,230],{},"distance fraction"," (percentage of viewport the shifting element moves). A single shift of 0.1 is considered \"Poor,\" meaning multiple smaller shifts can quickly breach the threshold. The metric tracks the sum of all unexpected layout shifts, excluding user-initiated interactions.",[14,233,234,235,238,239,242,243,246,247,250,251,254],{},"Engineering compliance requires explicit space reservation. Never rely on implicit image sizing or dynamic content injection without predefined dimensions. Use CSS ",[62,236,237],{},"aspect-ratio"," for media containers, enforce ",[62,240,241],{},"min-height"," on dynamic ad slots, and reserve space for third-party embeds using placeholder divs. Web fonts are a common CLS trigger; mitigate this by using ",[62,244,245],{},"font-display: optional"," or ",[62,248,249],{},"swap",", and preload critical font files with ",[62,252,253],{},"\u003Clink rel=\"preload\" as=\"font\" crossorigin>",".",[14,256,257],{},"Implementing Implementing skeleton screens for perceived performance directly mitigates layout shifts during async content hydration. Skeletons reserve exact DOM dimensions before data arrives, preventing the layout from reflowing when real content replaces placeholders.",[14,259,260],{},[32,261,262],{},"CLS Audit Workflow via Performance API:",[49,264,265,278,285,292,303],{},[52,266,267,268,270,271,274,275,254],{},"Attach a ",[62,269,180],{}," for ",[62,272,273],{},"layout-shift"," entries with ",[62,276,277],{},"buffered: true",[52,279,280,281,284],{},"Filter out shifts where ",[62,282,283],{},"hadRecentInput: true"," (user-initiated shifts don't count toward CLS).",[52,286,287,288,291],{},"Log ",[62,289,290],{},"entry.sources"," to identify the exact DOM nodes causing the shift.",[52,293,294,295,298,299,302],{},"Cross-reference with your CSS to verify missing ",[62,296,297],{},"width","\u002F",[62,300,301],{},"height"," attributes or dynamically injected elements.",[52,304,305,306,309],{},"Apply ",[62,307,308],{},"contain: layout"," to isolated components to prevent cascading reflows.\nMaintaining CLS ≤ 0.05 in lab environments ensures field compliance, as real-world network jitter rarely triggers additional shifts if the DOM structure is statically reserved.",[24,311,313],{"id":312},"cicd-threshold-gating-automated-enforcement","CI\u002FCD Threshold Gating & Automated Enforcement",[14,315,316],{},"Thresholds must be enforced programmatically to prevent regression. Hardcoding Core Web Vitals limits into your CI pipeline blocks merges that degrade performance, shifting optimization left in the development lifecycle. Lighthouse CI provides a robust assertion engine that evaluates metrics against predefined budgets before deployment.",[14,318,319,320,323],{},"Configure ",[62,321,322],{},"lighthouserc.json"," to enforce strict thresholds on every pull request. The following configuration blocks builds that exceed the 2.5s\u002F200ms\u002F0.1 limits:",[325,326,331],"pre",{"className":327,"code":328,"language":329,"meta":330,"style":330},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"ci\": {\n \"collect\": {\n \"url\": [\"https:\u002F\u002Fexample.com\"],\n \"settings\": {\n \"preset\": \"desktop\",\n \"throttlingMethod\": \"devtools\"\n }\n },\n \"assert\": {\n \"assertions\": {\n \"categories:performance\": [\"error\", { \"minScore\": 0.90 }],\n \"lcp\": [\"error\", { \"maxNumericValue\": 2500 }],\n \"inp\": [\"error\", { \"maxNumericValue\": 200 }],\n \"cls\": [\"error\", { \"maxNumericValue\": 0.1 }]\n }\n }\n }\n}\n","json","",[62,332,333,342,352,360,376,384,399,410,416,422,430,438,464,486,507,529,534,539,544],{"__ignoreMap":330},[334,335,338],"span",{"class":336,"line":337},"line",1,[334,339,341],{"class":340},"s3sCt","{\n",[334,343,345,349],{"class":336,"line":344},2,[334,346,348],{"class":347},"sj_b3"," \"ci\"",[334,350,351],{"class":340},": {\n",[334,353,355,358],{"class":336,"line":354},3,[334,356,357],{"class":347}," \"collect\"",[334,359,351],{"class":340},[334,361,363,366,369,373],{"class":336,"line":362},4,[334,364,365],{"class":347}," \"url\"",[334,367,368],{"class":340},": [",[334,370,372],{"class":371},"sJdzJ","\"https:\u002F\u002Fexample.com\"",[334,374,375],{"class":340},"],\n",[334,377,379,382],{"class":336,"line":378},5,[334,380,381],{"class":347}," \"settings\"",[334,383,351],{"class":340},[334,385,387,390,393,396],{"class":336,"line":386},6,[334,388,389],{"class":347}," \"preset\"",[334,391,392],{"class":340},": ",[334,394,395],{"class":371},"\"desktop\"",[334,397,398],{"class":340},",\n",[334,400,402,405,407],{"class":336,"line":401},7,[334,403,404],{"class":347}," \"throttlingMethod\"",[334,406,392],{"class":340},[334,408,409],{"class":371},"\"devtools\"\n",[334,411,413],{"class":336,"line":412},8,[334,414,415],{"class":340}," }\n",[334,417,419],{"class":336,"line":418},9,[334,420,421],{"class":340}," },\n",[334,423,425,428],{"class":336,"line":424},10,[334,426,427],{"class":347}," \"assert\"",[334,429,351],{"class":340},[334,431,433,436],{"class":336,"line":432},11,[334,434,435],{"class":347}," \"assertions\"",[334,437,351],{"class":340},[334,439,441,444,446,449,452,455,457,461],{"class":336,"line":440},12,[334,442,443],{"class":347}," \"categories:performance\"",[334,445,368],{"class":340},[334,447,448],{"class":371},"\"error\"",[334,450,451],{"class":340},", { ",[334,453,454],{"class":347},"\"minScore\"",[334,456,392],{"class":340},[334,458,460],{"class":459},"s5hCx","0.90",[334,462,463],{"class":340}," }],\n",[334,465,467,470,472,474,476,479,481,484],{"class":336,"line":466},13,[334,468,469],{"class":347}," \"lcp\"",[334,471,368],{"class":340},[334,473,448],{"class":371},[334,475,451],{"class":340},[334,477,478],{"class":347},"\"maxNumericValue\"",[334,480,392],{"class":340},[334,482,483],{"class":459},"2500",[334,485,463],{"class":340},[334,487,489,492,494,496,498,500,502,505],{"class":336,"line":488},14,[334,490,491],{"class":347}," \"inp\"",[334,493,368],{"class":340},[334,495,448],{"class":371},[334,497,451],{"class":340},[334,499,478],{"class":347},[334,501,392],{"class":340},[334,503,504],{"class":459},"200",[334,506,463],{"class":340},[334,508,510,513,515,517,519,521,523,526],{"class":336,"line":509},15,[334,511,512],{"class":347}," \"cls\"",[334,514,368],{"class":340},[334,516,448],{"class":371},[334,518,451],{"class":340},[334,520,478],{"class":347},[334,522,392],{"class":340},[334,524,525],{"class":459},"0.1",[334,527,528],{"class":340}," }]\n",[334,530,532],{"class":336,"line":531},16,[334,533,415],{"class":340},[334,535,537],{"class":336,"line":536},17,[334,538,415],{"class":340},[334,540,542],{"class":336,"line":541},18,[334,543,415],{"class":340},[334,545,547],{"class":336,"line":546},19,[334,548,549],{"class":340},"}\n",[14,551,552,553,557],{},"Integrate this configuration using the ",[18,554,556],{"href":555},"\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Fbest-lighthouse-ci-setup-for-frontend-pipelines\u002F","Best Lighthouse CI setup for frontend pipelines"," to automate threshold validation across staging environments. Run audits on multiple URLs to capture routing-specific bottlenecks.",[14,559,560,563],{},[32,561,562],{},"Troubleshooting Flaky Lab Results:","\nLab environments suffer from non-deterministic factors: background OS processes, variable CPU scheduling, and network jitter. To stabilize CI gates:",[84,565,566,579,582,592],{},[52,567,568,569,572,573,575,576,254],{},"Use ",[62,570,571],{},"--throttlingMethod=provided"," with a fixed ",[62,574,64],{}," instead of ",[62,577,578],{},"devtools",[52,580,581],{},"Run audits 3–5 times per commit and calculate the median score.",[52,583,584,585,65,588,591],{},"Exclude third-party scripts via ",[62,586,587],{},"--disable-third-party-cookies",[62,589,590],{},"--ignore-skip-request"," to isolate first-party performance.",[52,593,594],{},"Set assertion thresholds 10–15% stricter than production targets to account for CI environment overhead.",[24,596,598],{"id":597},"network-adaptive-threshold-calibration-fallback-strategies","Network-Adaptive Threshold Calibration & Fallback Strategies",[14,600,601],{},"Static thresholds fail under constrained network conditions. While 2.5s LCP and 200ms INP are baseline targets for broadband, 3G\u002F4G and edge networks require adaptive strategies to maintain acceptable UX without compromising functionality. Network-aware resource loading dynamically adjusts asset quality, defers non-critical scripts, and implements connection-based routing.",[14,603,604,605,608,609,246,612,615,616,619],{},"Implement Implementing progressive enhancement for slow networks to serve lightweight HTML shells first, then hydrate interactivity based on ",[62,606,607],{},"navigator.connection.effectiveType",". For users on ",[62,610,611],{},"slow-2g",[62,613,614],{},"2g",", disable heavy animations, serve compressed images, and prioritize text rendering. Use ",[62,617,618],{},"save-data"," header detection to bypass non-essential telemetry and third-party widgets.",[14,621,622],{},[32,623,624],{},"Diagnostic Matrix for Regional CrUX Calibration:",[626,627,628,650],"table",{},[629,630,631],"thead",{},[632,633,634,638,641,644,647],"tr",{},[635,636,637],"th",{},"Network Tier",[635,639,640],{},"Target LCP",[635,642,643],{},"Target INP",[635,645,646],{},"Target CLS",[635,648,649],{},"Fallback Strategy",[651,652,653,671,688,705],"tbody",{},[632,654,655,659,662,665,668],{},[656,657,658],"td",{},"Broadband (≥50Mbps)",[656,660,661],{},"≤ 1.8s",[656,663,664],{},"≤ 150ms",[656,666,667],{},"≤ 0.05",[656,669,670],{},"Full hydration, high-res assets",[632,672,673,676,679,682,685],{},[656,674,675],{},"4G\u002FLTE (10–50Mbps)",[656,677,678],{},"≤ 2.2s",[656,680,681],{},"≤ 180ms",[656,683,684],{},"≤ 0.08",[656,686,687],{},"Deferred JS, medium-res media",[632,689,690,693,696,699,702],{},[656,691,692],{},"3G\u002FSlow (≤5Mbps)",[656,694,695],{},"≤ 2.8s",[656,697,698],{},"≤ 250ms",[656,700,701],{},"≤ 0.10",[656,703,704],{},"Text-first, skeleton UI, disable heavy frameworks",[632,706,707,710,713,716,719],{},[656,708,709],{},"Edge\u002F2G",[656,711,712],{},"≤ 3.5s",[656,714,715],{},"≤ 300ms",[656,717,718],{},"≤ 0.12",[656,720,721],{},"Static HTML, critical CSS only, async hydration",[14,723,724],{},"Monitor regional CrUX distributions via the BigQuery dataset. If a specific geography consistently breaches thresholds despite optimization, implement CDN edge routing, localized asset caching, or region-specific performance budgets. Threshold calibration is not about lowering standards; it's about delivering predictable, measurable performance across the entire user base.",[24,726,728],{"id":727},"common-mistakes","Common Mistakes",[84,730,731,737,743,749,755],{},[52,732,733,736],{},[32,734,735],{},"Confusing the 50th percentile (median) with the required 75th percentile threshold",", leading to overly optimistic performance targets that fail in production.",[52,738,739,742],{},[32,740,741],{},"Relying exclusively on lab data thresholds without validating against CrUX field distributions",", causing false passes in CI while real users experience degradation.",[52,744,745,748],{},[32,746,747],{},"Ignoring mobile CPU throttling during local testing",", which artificially lowers INP and CLS scores compared to real user devices.",[52,750,751,754],{},[32,752,753],{},"Hardcoding static thresholds without implementing network-aware fallbacks",", resulting in poor UX on 3G\u002Fedge networks.",[52,756,757,760],{},[32,758,759],{},"Over-optimizing INP by deferring critical rendering work",", inadvertently pushing LCP past the 2.5s threshold due to delayed hydration.",[24,762,764],{"id":763},"frequently-asked-questions","Frequently Asked Questions",[14,766,767,770],{},[32,768,769],{},"Why does Google use the 75th percentile for Core Web Vitals thresholds?","\nThe 75th percentile ensures that at least 75% of real-user visits meet the \"Good\" threshold, accounting for device fragmentation, network variability, and geographic distribution. It prevents optimization efforts from being skewed by outlier experiences while maintaining a high baseline for the majority of users.",[14,772,773,776,777,779],{},[32,774,775],{},"How do I handle threshold violations in legacy browsers that don't support INP?","\nImplement a fallback measurement strategy using FID for browsers lacking INP support, while maintaining the 100ms FID threshold. Use feature detection to conditionally load the ",[62,778,180],{}," for INP, and route legacy metrics through a unified analytics pipeline that normalizes thresholds before reporting.",[14,781,782,785],{},[32,783,784],{},"Can I set custom thresholds for enterprise or internal applications?","\nYes, internal applications can define stricter or relaxed thresholds based on user expectations and infrastructure constraints. However, for public-facing sites, adhering to Google's 2.5s\u002F200ms\u002F0.1 standards is critical for search ranking eligibility and user retention. Custom thresholds should be documented in your internal performance budget.",[14,787,788,791],{},[32,789,790],{},"What's the difference between INP and FID thresholds?","\nFID measured only the delay of the first interaction (threshold: 100ms), while INP measures the responsiveness of all interactions throughout the page lifecycle (threshold: 200ms). INP provides a more accurate representation of overall interactivity, capturing long tasks that occur after initial load, making the 200ms threshold more comprehensive and user-centric.",[793,794,795],"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);}",{"title":330,"searchDepth":344,"depth":344,"links":797},[798,799,800,801,802,803,804,805],{"id":26,"depth":344,"text":27},{"id":78,"depth":344,"text":79},{"id":135,"depth":344,"text":136},{"id":219,"depth":344,"text":220},{"id":312,"depth":344,"text":313},{"id":597,"depth":344,"text":598},{"id":727,"depth":344,"text":728},{"id":763,"depth":344,"text":764},"A deep dive into the exact numerical thresholds for Core Web Vitals, bridging the gap between Google's published benchmarks and real-world engineering implementation. This guide provides diagnostic workflows, CI\u002FCD configuration patterns, and actionable optimization strategies to keep LCP, INP, and CLS within \"Good\" ranges across diverse network conditions. While foundational concepts are covered in Core Web Vitals & Measurement, this document focuses exclusively on threshold calibration, automated enforcement, and metric-specific engineering targets.","md",{},true,"\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds",{"title":5,"description":806},"core-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Findex","Sh1edMMXxcscmowFxTSUDz2nJLart3WafVB0TpHsv5c",[815,819],{"title":816,"path":817,"stem":818,"children":-1},"Debugging CLS caused by dynamic ad injection","\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",{"title":556,"path":820,"stem":821,"children":-1},"\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Fbest-lighthouse-ci-setup-for-frontend-pipelines","core-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Fbest-lighthouse-ci-setup-for-frontend-pipelines\u002Findex",1777925998162]