[{"data":1,"prerenderedAt":1208},["ShallowReactive",2],{"content:\u002Fcore-web-vitals-measurement":3,"surroundings:\u002Fcore-web-vitals-measurement":1199},{"id":4,"title":5,"body":6,"description":16,"extension":1193,"meta":1194,"navigation":591,"path":1195,"seo":1196,"stem":1197,"__hash__":1198},"content\u002Fcore-web-vitals-measurement\u002Findex.md","Core Web Vitals & Measurement: Metric-Driven Architecture for Production",{"type":7,"value":8,"toc":1159},"minimark",[9,13,17,26,31,39,47,52,55,86,90,93,116,120,123,126,130,141,162,166,173,188,192,207,211,222,251,255,258,280,284,303,307,315,336,340,343,362,366,386,390,404,430,434,449,483,487,490,494,501,524,528,531,543,546,550,554,690,699,703,816,821,825,986,991,995,1067,1072,1074,1078,1101,1103,1107,1113,1119,1134,1140,1155],[10,11,5],"h1",{"id":12},"core-web-vitals-measurement-metric-driven-architecture-for-production",[14,15,16],"p",{},"Modern frontend architecture demands a metric-driven approach to user experience. Core Web Vitals & Measurement provide the standardized framework for quantifying load, interactivity, and visual stability. Production systems must enforce strict thresholds: Largest Contentful Paint (LCP) under 2.5 seconds, Interaction to Next Paint (INP) below 200 milliseconds, and Cumulative Layout Shift (CLS) capped at 0.1.",[14,18,19,20,25],{},"Achieving these targets requires moving beyond theoretical optimization into systematic diagnostic workflows, bundle analysis, and continuous field monitoring. For teams establishing baselines, ",[21,22,24],"a",{"href":23},"\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002F","Understanding Core Web Vitals Thresholds"," provides the foundational scoring criteria needed to align engineering sprints with user-centric performance budgets. This guide details production-ready patterns, diagnostic toolchains, and architectural decisions that directly impact field metrics.",[27,28,30],"h2",{"id":29},"diagnostic-workflows-field-vs-lab-data-synthesis","Diagnostic Workflows: Field vs. Lab Data Synthesis",[14,32,33,34,38],{},"Reliable performance engineering requires bridging synthetic lab environments with real-user monitoring (RUM). Lab tools isolate variables and provide reproducible baselines. Field data captures network variability, device fragmentation, and actual user behavior. Engineers must configure ",[35,36,37],"code",{},"PerformanceObserver"," to capture LCP, INP, and CLS in production. Cross-reference these with synthetic audits.",[14,40,41,42,46],{},"When isolating render-blocking resources, ",[21,43,45],{"href":44},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002F","Measuring LCP with Chrome DevTools"," enables precise timeline analysis of the critical rendering path, network waterfall, and main thread execution. Cross-cluster synthesis involves mapping lab-identified bottlenecks to field percentiles (p50, p75, p95). Prioritize fixes that impact the majority of users rather than edge cases.",[48,49,51],"h3",{"id":50},"rum-implementation-data-pipeline","RUM Implementation & Data Pipeline",[14,53,54],{},"Deploy lightweight beacon scripts using the Web Vitals library. Aggregate data via edge functions or analytics platforms. Ensure GDPR compliance and minimal payload overhead. Filter out background tabs and prerendered states to avoid metric skew.",[56,57,58,70,80],"ul",{},[59,60,61,65,66,69],"li",{},[62,63,64],"strong",{},"Trade-off:"," ",[35,67,68],{},"navigator.sendBeacon"," guarantees delivery during page unload but lacks response handling.",[59,71,72,75,76,79],{},[62,73,74],{},"Config:"," Set ",[35,77,78],{},"reportAllChanges: true"," for INP to capture worst-case latency across the session.",[59,81,82,85],{},[62,83,84],{},"Outcome:"," Establishes a continuous p75 baseline for CI budget assertions.",[48,87,89],{"id":88},"synthetic-audit-configuration","Synthetic Audit Configuration",[14,91,92],{},"Standardize Lighthouse CI runs with throttled CPU (4x slowdown) and Fast 3G network profiles. Integrate budget assertions into CI pipelines to block deployments that regress p75 metrics.",[56,94,95,111],{},[59,96,97,65,99,102,103,106,107,110],{},[62,98,74],{},[35,100,101],{},"lighthouse-ci"," with ",[35,104,105],{},"assertions"," targeting ",[35,108,109],{},"lcp: [\"error\", { maxNumericValue: 2500 }]",".",[59,112,113,115],{},[62,114,84],{}," Prevents metric regression before production deployment.",[27,117,119],{"id":118},"critical-rendering-path-server-side-delivery","Critical Rendering Path & Server-Side Delivery",[14,121,122],{},"Time to First Byte (TTFB) directly influences LCP. Optimizing server response times requires streamlining database queries, implementing edge caching, and adopting streaming SSR. When backend latency dominates, frontend optimizations yield diminishing returns.",[14,124,125],{},"Implementing Database Query Optimization for Server-Side Rendering ensures that HTML generation completes within the 200ms TTFB target. This allows the browser to begin parsing and painting immediately. Combine streaming responses with progressive hydration to deliver interactive components without blocking initial paint.",[48,127,129],{"id":128},"resource-hints-preloading-strategy","Resource Hints & Preloading Strategy",[14,131,132,133,136,137,140],{},"Use ",[35,134,135],{},"\u003Clink rel=\"preload\">"," for critical fonts and hero images. Implement ",[35,138,139],{},"\u003Clink rel=\"modulepreload\">"," for JavaScript chunks required for initial render. Avoid over-preloading, which competes for network bandwidth and delays non-critical assets.",[56,142,143,149,157],{},[59,144,145,148],{},[62,146,147],{},"Rule:"," Cap preloaded resources to 5-7 critical assets per viewport.",[59,150,151,65,153,156],{},[62,152,64],{},[35,154,155],{},"modulepreload"," fetches early but does not execute. Pair with dynamic imports to defer execution.",[59,158,159,161],{},[62,160,84],{}," Reduces LCP by 15-30% on constrained networks.",[48,163,165],{"id":164},"streaming-ssr-partial-hydration","Streaming SSR & Partial Hydration",[14,167,168,169,172],{},"Leverage React Server Components or framework-specific streaming APIs. Dehydrate non-essential UI islands. Hydrate them on demand using ",[35,170,171],{},"IntersectionObserver"," to preserve main thread availability.",[56,174,175,183],{},[59,176,177,75,179,182],{},[62,178,74],{},[35,180,181],{},"priority=\"low\""," on deferred hydration scripts.",[59,184,185,187],{},[62,186,84],{}," Maintains sub-200ms INP by deferring JS execution until user intent is detected.",[27,189,191],{"id":190},"bundle-analysis-code-splitting-architecture","Bundle Analysis & Code Splitting Architecture",[14,193,194,195,198,199,202,203,206],{},"JavaScript execution is the primary driver of INP degradation. Modern build tools require explicit configuration to prevent monolithic bundles. Analyze output with tools like ",[35,196,197],{},"rollup-plugin-visualizer"," or Webpack Bundle Analyzer to identify oversized dependencies. Implement route-based and component-level code splitting. Use dynamic imports with explicit chunk naming to control cache boundaries. Defer third-party scripts using ",[35,200,201],{},"async"," or ",[35,204,205],{},"defer"," attributes. Isolate heavy computations in Web Workers to prevent main thread starvation.",[48,208,210],{"id":209},"tree-shaking-dead-code-elimination","Tree-Shaking & Dead Code Elimination",[14,212,213,214,217,218,221],{},"Ensure ",[35,215,216],{},"sideEffects: false"," in ",[35,219,220],{},"package.json",". Use ES modules exclusively. Audit barrel exports that prevent static analysis. Replace heavy utility libraries with targeted native APIs or lightweight alternatives.",[56,223,224,237,246],{},[59,225,226,228,229,232,233,236],{},[62,227,74],{}," Enable ",[35,230,231],{},"treeshake: true"," in Rollup\u002FVite. Use ",[35,234,235],{},"--analyze"," flags during build.",[59,238,239,241,242,245],{},[62,240,64],{}," Barrel files (",[35,243,244],{},"index.ts",") break tree-shaking. Import directly from source files.",[59,247,248,250],{},[62,249,84],{}," Reduces initial JS payload by 20-40%, directly lowering INP.",[48,252,254],{"id":253},"vendor-chunk-isolation","Vendor Chunk Isolation",[14,256,257],{},"Separate stable dependencies (React, Vue, Angular) from application code to leverage long-term browser caching. Configure manual chunks in Vite or Rollup to prevent frequent cache invalidation when business logic changes.",[56,259,260,275],{},[59,261,262,264,265,268,269,268,272,110],{},[62,263,74],{}," Group by update frequency: ",[35,266,267],{},"framework",", ",[35,270,271],{},"vendor",[35,273,274],{},"app",[59,276,277,279],{},[62,278,84],{}," Maximizes cache hit rates for returning users.",[27,281,283],{"id":282},"main-thread-optimization-input-latency","Main Thread Optimization & Input Latency",[14,285,286,287,268,290,293,294,297,298,302],{},"INP measures the worst interaction latency across a page visit. Long tasks (>50ms) block user input and degrade responsiveness. Break synchronous operations into microtasks using ",[35,288,289],{},"requestIdleCallback",[35,291,292],{},"setTimeout",", or the modern ",[35,295,296],{},"scheduler.yield()"," API. Audit event handlers for expensive DOM queries and layout thrashing. Implement debouncing and throttling for scroll, resize, and input events. While legacy metrics focused on initial responsiveness, ",[21,299,301],{"href":300},"\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002F","Optimizing First Input Delay (FID)"," established the baseline for understanding main thread contention, which directly informs modern INP mitigation strategies.",[48,304,306],{"id":305},"long-task-detection-scheduling","Long Task Detection & Scheduling",[14,308,132,309,102,311,314],{},[35,310,37],{},[35,312,313],{},"entryType: 'longtask'"," to detect main thread blocking. Implement cooperative scheduling patterns to yield control back to the browser every 50ms. This ensures smooth input processing.",[56,316,317,322,331],{},[59,318,319,321],{},[62,320,147],{}," Never exceed 50ms of continuous synchronous execution.",[59,323,324,326,327,330],{},[62,325,74],{}," Wrap heavy loops with ",[35,328,329],{},"await scheduler.yield()"," (Chrome 115+).",[59,332,333,335],{},[62,334,84],{}," Eliminates input jank during data-heavy operations.",[48,337,339],{"id":338},"web-worker-offloading","Web Worker Offloading",[14,341,342],{},"Move data transformation, image processing, and complex calculations to dedicated workers. Use Comlink for simplified RPC communication. Ensure worker initialization is deferred until after initial paint.",[56,344,345,357],{},[59,346,347,349,350,202,353,356],{},[62,348,64],{}," Worker serialization adds overhead. Use ",[35,351,352],{},"SharedArrayBuffer",[35,354,355],{},"Transferable"," objects for large payloads.",[59,358,359,361],{},[62,360,84],{}," Frees main thread for rendering and input handling.",[27,363,365],{"id":364},"visual-stability-layout-shift-mitigation","Visual Stability & Layout Shift Mitigation",[14,367,368,369,372,373,376,377,380,381,385],{},"CLS quantifies unexpected layout movement during the page lifecycle. Shifts occur when dimensions are unknown, fonts swap, or dynamic content injects without reserved space. Enforce explicit width and height attributes on all media. Use ",[35,370,371],{},"aspect-ratio"," CSS to maintain proportional containers. Implement ",[35,374,375],{},"font-display: optional"," or fallback to prevent FOIT\u002FFOUT-induced shifts. Reserve space for ads, embeds, and async-loaded components using ",[35,378,379],{},"min-height"," placeholders. ",[21,382,384],{"href":383},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002F","Reducing Cumulative Layout Shift (CLS)"," requires proactive layout planning rather than reactive CSS patches, especially in component-driven architectures.",[48,387,389],{"id":388},"font-loading-swap-strategies","Font Loading & Swap Strategies",[14,391,392,393,396,397,202,400,403],{},"Preload critical font files. Use ",[35,394,395],{},"font-display: swap"," with fallback metrics matching. Implement ",[35,398,399],{},"size-adjust",[35,401,402],{},"ascent-override"," to prevent layout shifts during font substitution.",[56,405,406,413,425],{},[59,407,408,65,410],{},[62,409,74],{},[35,411,412],{},"@font-face { font-display: swap; size-adjust: 100%; }",[59,414,415,65,417,420,421,424],{},[62,416,64],{},[35,418,419],{},"swap"," causes FOUT. ",[35,422,423],{},"optional"," prevents shifts but may skip custom fonts on slow networks.",[59,426,427,429],{},[62,428,84],{}," Stabilizes CLS below 0.1 during font loading phases.",[48,431,433],{"id":432},"dynamic-content-animation-safety","Dynamic Content & Animation Safety",[14,435,436,437,440,441,444,445,448],{},"Avoid inserting content above existing elements. Use ",[35,438,439],{},"transform"," and ",[35,442,443],{},"opacity"," for animations instead of layout-triggering properties. Implement ",[35,446,447],{},"contain: layout"," CSS for isolated component rendering.",[56,450,451,469,478],{},[59,452,453,455,456,268,459,268,462,465,466,110],{},[62,454,147],{}," Never animate ",[35,457,458],{},"width",[35,460,461],{},"height",[35,463,464],{},"top",", or ",[35,467,468],{},"left",[59,470,471,473,474,477],{},[62,472,74],{}," Apply ",[35,475,476],{},"contain: layout style paint"," to dynamic UI islands.",[59,479,480,482],{},[62,481,84],{}," Prevents cascading reflows and layout thrashing.",[27,484,486],{"id":485},"caching-strategies-continuous-monitoring","Caching Strategies & Continuous Monitoring",[14,488,489],{},"Effective caching reduces repeat visit latency and stabilizes field metrics. Implement Service Workers with cache-first or stale-while-revalidate strategies for static assets. Configure immutable cache headers with content hashing. For dynamic content, use CDN edge caching with cache tags for precise invalidation. Monitor field metrics continuously. Set up alerting thresholds for metric regressions. Mobile networks introduce additional constraints, requiring aggressive compression, image optimization, and connection reuse. Performance Optimization for Mobile Web provides device-specific tuning guidelines that align caching and delivery strategies with constrained hardware profiles.",[48,491,493],{"id":492},"service-worker-lifecycle-cache-management","Service Worker Lifecycle & Cache Management",[14,495,496,497,500],{},"Version caches explicitly. Implement cleanup logic during ",[35,498,499],{},"activate"," events. Use Workbox for declarative routing and background sync. Avoid caching sensitive or highly dynamic endpoints.",[56,502,503,510,519],{},[59,504,505,65,507],{},[62,506,74],{},[35,508,509],{},"workbox.precaching.precacheAndRoute(self.__WB_MANIFEST)",[59,511,512,514,515,518],{},[62,513,64],{}," Cache-first improves speed but risks stale content. Pair with ",[35,516,517],{},"stale-while-revalidate"," for API responses.",[59,520,521,523],{},[62,522,84],{}," Achieves instant repeat visits while maintaining data freshness.",[48,525,527],{"id":526},"rum-alerting-regression-detection","RUM Alerting & Regression Detection",[14,529,530],{},"Configure percentile-based alerts for LCP, INP, and CLS. Correlate metric spikes with deployment timestamps and third-party script changes. Implement automated performance budgets in CI\u002FCD pipelines.",[56,532,533,538],{},[59,534,535,537],{},[62,536,74],{}," Alert on p75 crossing thresholds for 3 consecutive days.",[59,539,540,542],{},[62,541,84],{}," Enables rapid rollback and targeted debugging.",[544,545],"hr",{},[27,547,549],{"id":548},"reference-implementations","Reference Implementations",[48,551,553],{"id":552},"web-vitals-performanceobserver-implementation","Web Vitals PerformanceObserver Implementation",[555,556,561],"pre",{"className":557,"code":558,"language":559,"meta":560,"style":560},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","import { onLCP, onINP, onCLS } from 'web-vitals';\n\nfunction sendToAnalytics(metric) {\n const body = JSON.stringify(metric);\n navigator.sendBeacon('\u002Fanalytics', body);\n}\n\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonCLS(sendToAnalytics);\n","javascript","",[35,562,563,586,593,613,637,654,660,665,674,682],{"__ignoreMap":560},[564,565,568,572,576,579,583],"span",{"class":566,"line":567},"line",1,[564,569,571],{"class":570},"sCJTb","import",[564,573,575],{"class":574},"s3sCt"," { onLCP, onINP, onCLS } ",[564,577,578],{"class":570},"from",[564,580,582],{"class":581},"sJdzJ"," 'web-vitals'",[564,584,585],{"class":574},";\n",[564,587,589],{"class":566,"line":588},2,[564,590,592],{"emptyLinePlaceholder":591},true,"\n",[564,594,596,599,603,606,610],{"class":566,"line":595},3,[564,597,598],{"class":570},"function",[564,600,602],{"class":601},"sGhOu"," sendToAnalytics",[564,604,605],{"class":574},"(",[564,607,609],{"class":608},"spFnL","metric",[564,611,612],{"class":574},") {\n",[564,614,616,619,623,626,629,631,634],{"class":566,"line":615},4,[564,617,618],{"class":570}," const",[564,620,622],{"class":621},"s5hCx"," body",[564,624,625],{"class":570}," =",[564,627,628],{"class":621}," JSON",[564,630,110],{"class":574},[564,632,633],{"class":601},"stringify",[564,635,636],{"class":574},"(metric);\n",[564,638,640,643,646,648,651],{"class":566,"line":639},5,[564,641,642],{"class":574}," navigator.",[564,644,645],{"class":601},"sendBeacon",[564,647,605],{"class":574},[564,649,650],{"class":581},"'\u002Fanalytics'",[564,652,653],{"class":574},", body);\n",[564,655,657],{"class":566,"line":656},6,[564,658,659],{"class":574},"}\n",[564,661,663],{"class":566,"line":662},7,[564,664,592],{"emptyLinePlaceholder":591},[564,666,668,671],{"class":566,"line":667},8,[564,669,670],{"class":601},"onLCP",[564,672,673],{"class":574},"(sendToAnalytics);\n",[564,675,677,680],{"class":566,"line":676},9,[564,678,679],{"class":601},"onINP",[564,681,673],{"class":574},[564,683,685,688],{"class":566,"line":684},10,[564,686,687],{"class":601},"onCLS",[564,689,673],{"class":574},[14,691,692],{},[693,694,695,696,698],"em",{},"Deploy in production to capture real-user metrics without blocking the main thread. Use ",[35,697,645],{}," for reliable data transmission even during page unload.",[48,700,702],{"id":701},"vite-manual-chunks-configuration","Vite Manual Chunks Configuration",[555,704,706],{"className":557,"code":705,"language":559,"meta":560,"style":560},"export default defineConfig({\n build: {\n rollupOptions: {\n output: {\n manualChunks: {\n vendor: ['react', 'react-dom'],\n charts: ['chart.js', 'recharts'],\n utils: ['lodash-es', 'date-fns']\n }\n }\n }\n }\n});\n",[35,707,708,722,727,732,737,742,758,773,789,794,798,803,808],{"__ignoreMap":560},[564,709,710,713,716,719],{"class":566,"line":567},[564,711,712],{"class":570},"export",[564,714,715],{"class":570}," default",[564,717,718],{"class":601}," defineConfig",[564,720,721],{"class":608},"({\n",[564,723,724],{"class":566,"line":588},[564,725,726],{"class":574}," build: {\n",[564,728,729],{"class":566,"line":595},[564,730,731],{"class":574}," rollupOptions: {\n",[564,733,734],{"class":566,"line":615},[564,735,736],{"class":574}," output: {\n",[564,738,739],{"class":566,"line":639},[564,740,741],{"class":574}," manualChunks: {\n",[564,743,744,747,750,752,755],{"class":566,"line":656},[564,745,746],{"class":574}," vendor: [",[564,748,749],{"class":581},"'react'",[564,751,268],{"class":574},[564,753,754],{"class":581},"'react-dom'",[564,756,757],{"class":574},"],\n",[564,759,760,763,766,768,771],{"class":566,"line":662},[564,761,762],{"class":574}," charts: [",[564,764,765],{"class":581},"'chart.js'",[564,767,268],{"class":574},[564,769,770],{"class":581},"'recharts'",[564,772,757],{"class":574},[564,774,775,778,781,783,786],{"class":566,"line":667},[564,776,777],{"class":574}," utils: [",[564,779,780],{"class":581},"'lodash-es'",[564,782,268],{"class":574},[564,784,785],{"class":581},"'date-fns'",[564,787,788],{"class":574},"]\n",[564,790,791],{"class":566,"line":676},[564,792,793],{"class":574}," }\n",[564,795,796],{"class":566,"line":684},[564,797,793],{"class":574},[564,799,801],{"class":566,"line":800},11,[564,802,793],{"class":574},[564,804,806],{"class":566,"line":805},12,[564,807,793],{"class":574},[564,809,811,814],{"class":566,"line":810},13,[564,812,813],{"class":608},"})",[564,815,585],{"class":574},[14,817,818],{},[693,819,820],{},"Prevents monolithic bundle generation by isolating stable dependencies. Enables long-term caching and reduces cache invalidation frequency.",[48,822,824],{"id":823},"service-worker-cache-first-with-network-fallback","Service Worker Cache-First with Network Fallback",[555,826,828],{"className":557,"code":827,"language":559,"meta":560,"style":560},"import { registerRoute } from 'workbox-routing';\nimport { CacheFirst, NetworkFirst } from 'workbox-strategies';\nimport { ExpirationPlugin } from 'workbox-expiration';\n\nregisterRoute(\n ({ request }) => request.destination === 'image',\n new CacheFirst({\n cacheName: 'images-cache',\n plugins: [\n new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60 })\n ]\n })\n);\n",[35,829,830,844,858,872,876,884,910,920,930,935,972,977,981],{"__ignoreMap":560},[564,831,832,834,837,839,842],{"class":566,"line":567},[564,833,571],{"class":570},[564,835,836],{"class":574}," { registerRoute } ",[564,838,578],{"class":570},[564,840,841],{"class":581}," 'workbox-routing'",[564,843,585],{"class":574},[564,845,846,848,851,853,856],{"class":566,"line":588},[564,847,571],{"class":570},[564,849,850],{"class":574}," { CacheFirst, NetworkFirst } ",[564,852,578],{"class":570},[564,854,855],{"class":581}," 'workbox-strategies'",[564,857,585],{"class":574},[564,859,860,862,865,867,870],{"class":566,"line":595},[564,861,571],{"class":570},[564,863,864],{"class":574}," { ExpirationPlugin } ",[564,866,578],{"class":570},[564,868,869],{"class":581}," 'workbox-expiration'",[564,871,585],{"class":574},[564,873,874],{"class":566,"line":615},[564,875,592],{"emptyLinePlaceholder":591},[564,877,878,881],{"class":566,"line":639},[564,879,880],{"class":601},"registerRoute",[564,882,883],{"class":574},"(\n",[564,885,886,889,892,895,898,901,904,907],{"class":566,"line":656},[564,887,888],{"class":574}," ({ ",[564,890,891],{"class":608},"request",[564,893,894],{"class":574}," }) ",[564,896,897],{"class":570},"=>",[564,899,900],{"class":574}," request.destination ",[564,902,903],{"class":570},"===",[564,905,906],{"class":581}," 'image'",[564,908,909],{"class":574},",\n",[564,911,912,915,918],{"class":566,"line":662},[564,913,914],{"class":570}," new",[564,916,917],{"class":601}," CacheFirst",[564,919,721],{"class":574},[564,921,922,925,928],{"class":566,"line":667},[564,923,924],{"class":574}," cacheName: ",[564,926,927],{"class":581},"'images-cache'",[564,929,909],{"class":574},[564,931,932],{"class":566,"line":676},[564,933,934],{"class":574}," plugins: [\n",[564,936,937,939,942,945,948,951,954,957,960,962,965,967,969],{"class":566,"line":684},[564,938,914],{"class":570},[564,940,941],{"class":601}," ExpirationPlugin",[564,943,944],{"class":574},"({ maxEntries: ",[564,946,947],{"class":621},"50",[564,949,950],{"class":574},", maxAgeSeconds: ",[564,952,953],{"class":621},"30",[564,955,956],{"class":570}," *",[564,958,959],{"class":621}," 24",[564,961,956],{"class":570},[564,963,964],{"class":621}," 60",[564,966,956],{"class":570},[564,968,964],{"class":621},[564,970,971],{"class":574}," })\n",[564,973,974],{"class":566,"line":800},[564,975,976],{"class":574}," ]\n",[564,978,979],{"class":566,"line":805},[564,980,971],{"class":574},[564,982,983],{"class":566,"line":810},[564,984,985],{"class":574},");\n",[14,987,988],{},[693,989,990],{},"Optimizes repeat visits by serving cached assets instantly. Includes automatic eviction to prevent unbounded storage growth.",[48,992,994],{"id":993},"cooperative-scheduling-with-scheduleryield","Cooperative Scheduling with scheduler.yield()",[555,996,998],{"className":557,"code":997,"language":559,"meta":560,"style":560},"async function processHeavyData(items) {\n for (const item of items) {\n await scheduler.yield();\n transformItem(item);\n }\n}\n",[35,999,1000,1017,1037,1051,1059,1063],{"__ignoreMap":560},[564,1001,1002,1004,1007,1010,1012,1015],{"class":566,"line":567},[564,1003,201],{"class":570},[564,1005,1006],{"class":570}," function",[564,1008,1009],{"class":601}," processHeavyData",[564,1011,605],{"class":574},[564,1013,1014],{"class":608},"items",[564,1016,612],{"class":574},[564,1018,1019,1022,1025,1028,1031,1034],{"class":566,"line":588},[564,1020,1021],{"class":570}," for",[564,1023,1024],{"class":574}," (",[564,1026,1027],{"class":570},"const",[564,1029,1030],{"class":621}," item",[564,1032,1033],{"class":570}," of",[564,1035,1036],{"class":574}," items) {\n",[564,1038,1039,1042,1045,1048],{"class":566,"line":595},[564,1040,1041],{"class":570}," await",[564,1043,1044],{"class":574}," scheduler.",[564,1046,1047],{"class":601},"yield",[564,1049,1050],{"class":574},"();\n",[564,1052,1053,1056],{"class":566,"line":615},[564,1054,1055],{"class":601}," transformItem",[564,1057,1058],{"class":574},"(item);\n",[564,1060,1061],{"class":566,"line":639},[564,1062,793],{"class":574},[564,1064,1065],{"class":566,"line":656},[564,1066,659],{"class":574},[14,1068,1069],{},[693,1070,1071],{},"Yields control back to the browser every iteration, preventing long tasks and ensuring INP remains below 200ms during heavy processing.",[544,1073],{},[27,1075,1077],{"id":1076},"common-pitfalls","Common Pitfalls",[56,1079,1080,1083,1086,1089,1092,1095,1098],{},[59,1081,1082],{},"Relying exclusively on lab metrics without validating against field percentiles (p75)",[59,1084,1085],{},"Blocking the main thread with synchronous fetch\u002FXHR calls or heavy JSON parsing",[59,1087,1088],{},"Omitting explicit width\u002Fheight attributes on responsive images and embeds, causing CLS spikes",[59,1090,1091],{},"Overusing preload directives, which compete for bandwidth and delay critical resource fetching",[59,1093,1094],{},"Implementing aggressive caching without versioned filenames, leading to stale asset delivery",[59,1096,1097],{},"Ignoring third-party script impact on INP by loading analytics, chat, and ads synchronously",[59,1099,1100],{},"Failing to implement cache eviction policies in Service Workers, causing storage quota exhaustion",[544,1102],{},[27,1104,1106],{"id":1105},"faq","FAQ",[14,1108,1109,1112],{},[62,1110,1111],{},"How do I prioritize fixes when multiple Core Web Vitals metrics fail simultaneously?","\nPrioritize based on user impact and implementation complexity. Address LCP first if TTFB or render-blocking resources dominate, as it blocks initial visibility. Next, resolve INP regressions caused by main thread blocking or heavy JavaScript execution. Finally, fix CLS by reserving space for dynamic content and optimizing font loading. Use field data to identify which metric correlates most strongly with bounce rate or conversion drop.",[14,1114,1115,1118],{},[62,1116,1117],{},"Why does my Lighthouse score differ from Chrome UX Report data?","\nLighthouse runs in a controlled lab environment with simulated throttling, while CrUX aggregates real-user field data across diverse devices, networks, and geographic regions. Lab scores identify potential bottlenecks, but field data reflects actual user experience. Align engineering targets with p75 field metrics rather than lab scores to ensure production relevance.",[14,1120,1121,1124,1125,1127,1128,1130,1131,1133],{},[62,1122,1123],{},"How can I reduce INP without removing third-party scripts?","\nIsolate third-party scripts using iframes or Web Workers, defer execution until after first user interaction, and implement ",[35,1126,289],{}," for non-critical tracking. Use the ",[35,1129,201],{}," attribute and avoid inline scripts that block parsing. Monitor main thread contention with ",[35,1132,37],{}," and implement cooperative scheduling to yield control during heavy processing.",[14,1135,1136,1139],{},[62,1137,1138],{},"What is the most effective caching strategy for dynamic, personalized content?","\nImplement stale-while-revalidate (SWR) with CDN edge caching. Serve cached HTML instantly while fetching fresh data in the background. Use cache tags or surrogate keys for granular invalidation when user state changes. Combine with client-side hydration for personalized components to maintain fast TTFB without sacrificing dynamic accuracy.",[14,1141,1142,1145,1146,1148,1149,202,1151,1154],{},[62,1143,1144],{},"How do I prevent CLS when loading fonts asynchronously?","\nUse ",[35,1147,395],{}," with fallback metrics that match the target font's dimensions. Preload critical font files to reduce swap latency. Implement CSS ",[35,1150,399],{},[35,1152,1153],{},"@font-face ascent-override"," to ensure text containers maintain consistent height during font substitution. Avoid loading fonts after initial paint unless necessary for non-critical UI.",[1156,1157,1158],"style",{},"html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}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":560,"searchDepth":588,"depth":588,"links":1160},[1161,1165,1169,1173,1177,1181,1185,1191,1192],{"id":29,"depth":588,"text":30,"children":1162},[1163,1164],{"id":50,"depth":595,"text":51},{"id":88,"depth":595,"text":89},{"id":118,"depth":588,"text":119,"children":1166},[1167,1168],{"id":128,"depth":595,"text":129},{"id":164,"depth":595,"text":165},{"id":190,"depth":588,"text":191,"children":1170},[1171,1172],{"id":209,"depth":595,"text":210},{"id":253,"depth":595,"text":254},{"id":282,"depth":588,"text":283,"children":1174},[1175,1176],{"id":305,"depth":595,"text":306},{"id":338,"depth":595,"text":339},{"id":364,"depth":588,"text":365,"children":1178},[1179,1180],{"id":388,"depth":595,"text":389},{"id":432,"depth":595,"text":433},{"id":485,"depth":588,"text":486,"children":1182},[1183,1184],{"id":492,"depth":595,"text":493},{"id":526,"depth":595,"text":527},{"id":548,"depth":588,"text":549,"children":1186},[1187,1188,1189,1190],{"id":552,"depth":595,"text":553},{"id":701,"depth":595,"text":702},{"id":823,"depth":595,"text":824},{"id":993,"depth":595,"text":994},{"id":1076,"depth":588,"text":1077},{"id":1105,"depth":588,"text":1106},"md",{},"\u002Fcore-web-vitals-measurement",{"title":5,"description":16},"core-web-vitals-measurement\u002Findex","_jPTR2wXyDHSsnQpDesWx1O5Vto57-9ux3YZqXhi8Y0",[1200,1204],{"title":1201,"path":1202,"stem":1203,"children":-1},"Stale-While-Revalidate Implementation: A Production Blueprint for Frontend Performance","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation","advanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Findex",{"title":1205,"path":1206,"stem":1207,"children":-1},"Measuring LCP with Chrome DevTools: A Diagnostic Workflow for Frontend Engineers","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Findex",1777925997719]