[{"data":1,"prerenderedAt":1172},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture":1166},{"id":4,"title":5,"body":6,"description":16,"extension":1159,"meta":1160,"navigation":1161,"path":1162,"seo":1163,"stem":1164,"__hash__":1165},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Findex.md","Advanced Caching Strategies & CDN Architecture",{"type":7,"value":8,"toc":1150},"minimark",[9,13,17,26,31,34,42,48,99,104,115,120,143,147,155,163,168,199,463,467,478,482,504,508,511,518,523,610,615,738,742,753,757,771,775,778,781,786,813,817,828,832,846,850,856,859,864,1055,1059,1070,1074,1088,1092,1115,1119,1128,1134,1140,1146],[10,11,5],"h1",{"id":12},"advanced-caching-strategies-cdn-architecture",[14,15,16],"p",{},"Modern frontend delivery requires a metric-driven architecture that synchronizes origin servers, edge networks, and client-side runtimes. Achieving LCP \u003C 2.5s and INP \u003C 200ms demands more than basic asset expiration. It requires cross-cluster synthesis, deterministic cache hierarchies, and real-time diagnostic feedback loops.",[14,18,19,20,25],{},"This guide details production-ready caching architectures. It focuses on HTTP header orchestration, CDN edge routing, and client-side fallback mechanisms. By aligning ",[21,22,24],"a",{"href":23},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002F","HTTP Cache-Control Headers Explained"," with edge compute logic, engineering teams can eliminate redundant network hops. This directly reduces Time to First Byte (TTFB) and guarantees consistent performance across fragmented device ecosystems.",[27,28,30],"h2",{"id":29},"_1-metric-driven-cache-hierarchy-edge-routing","1. Metric-Driven Cache Hierarchy & Edge Routing",[14,32,33],{},"A robust caching architecture operates across three distinct layers: origin, edge, and client. Each layer must serve specific asset classes while respecting strict Core Web Vitals thresholds. Static assets (JS, CSS, fonts, images) require immutable caching with aggressive TTLs. Dynamic HTML and API responses demand granular invalidation strategies.",[14,35,36,37,41],{},"Implementing ",[21,38,40],{"href":39},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002F","CDN Edge Caching Configuration"," ensures cache misses are minimized at the network perimeter. This directly reduces LCP by serving critical rendering paths from geographically proximate nodes. Diagnostic workflows must track cache hit ratios per asset type. This identifies bottlenecks before they degrade user experience.",[14,43,44],{},[45,46,47],"strong",{},"Configuration Trade-offs:",[49,50,51,79,93],"ul",{},[52,53,54,57,58,62,63,66,67,70,71,74,75,78],"li",{},[45,55,56],{},"Static vs Dynamic Separation:"," Route ",[59,60,61],"code",{},"\u002Fstatic\u002F*"," to edge nodes with ",[59,64,65],{},"immutable"," flags. Route ",[59,68,69],{},"\u002Fapi\u002F*"," through origin with ",[59,72,73],{},"no-store"," or short ",[59,76,77],{},"max-age",".",[52,80,81,84,85,88,89,92],{},[45,82,83],{},"Vary Header Overhead:"," Use ",[59,86,87],{},"Vary: Accept-Encoding"," only. Avoid ",[59,90,91],{},"Vary: User-Agent"," as it fragments cache keys and increases miss rates.",[52,94,95,98],{},[45,96,97],{},"Edge Compute vs Static Caching:"," Reserve edge workers for auth validation and A\u002FB testing. Keep static asset routing purely declarative.",[14,100,101],{},[45,102,103],{},"Target Metrics:",[49,105,106,109,112],{},[52,107,108],{},"LCP \u003C 2.5s",[52,110,111],{},"Cache Hit Ratio > 90%",[52,113,114],{},"TTFB \u003C 0.8s",[14,116,117],{},[45,118,119],{},"Diagnostic Workflow:",[121,122,123,126,133,136],"ol",{},[52,124,125],{},"Run WebPageTest with cache-warm vs. cold states.",[52,127,128,129,132],{},"Analyze CDN logs for ",[59,130,131],{},"X-Cache-Status"," headers.",[52,134,135],{},"Correlate cache miss spikes with INP degradation.",[52,137,138,139,142],{},"Adjust edge TTLs and ",[59,140,141],{},"Vary"," headers based on device segmentation.",[27,144,146],{"id":145},"_2-client-side-orchestration-service-worker-fallbacks","2. Client-Side Orchestration & Service Worker Fallbacks",[14,148,149,150,154],{},"Edge caching alone cannot guarantee sub-200ms INP when network conditions fluctuate. Client-side orchestration via Service Workers bridges the gap between edge delivery and runtime execution. Implementing ",[21,151,153],{"href":152},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002F","Service Worker Caching Strategies"," allows developers to intercept fetch events, prioritize critical resources, and serve cached responses during offline or degraded connectivity.",[14,156,157,158,162],{},"The architecture must differentiate between navigation requests and static assets. Use network-first for HTML with a fallback to cached versions. Use cache-first for static bundles. To maintain freshness without blocking the main thread, integrate ",[21,159,161],{"href":160},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002F","Stale-While-Revalidate Implementation"," patterns. These serve cached payloads immediately while asynchronously updating the cache in the background.",[14,164,165],{},[45,166,167],{},"Implementation Considerations:",[49,169,170,183,193],{},[52,171,172,175,176,179,180,78],{},[45,173,174],{},"Fetch Interception Priority:"," Register ",[59,177,178],{},"fetch"," listeners early in the SW lifecycle. Avoid heavy routing logic that delays ",[59,181,182],{},"event.respondWith()",[52,184,185,188,189,192],{},[45,186,187],{},"Storage Quota Management:"," Implement LRU eviction policies. Monitor ",[59,190,191],{},"navigator.storage.estimate()"," to prevent quota exceeded errors.",[52,194,195,198],{},[45,196,197],{},"Background Sync Limits:"," Restrict background updates to non-critical telemetry. Never block critical render paths with sync queues.",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Service Worker Stale-While-Revalidate with Background Sync\nself.addEventListener('fetch', (event) => {\n if (event.request.url.includes('\u002Fstatic\u002F')) {\n event.respondWith(\n caches.match(event.request).then((cached) => {\n const fetchPromise = fetch(event.request).then((networkRes) => {\n if (networkRes.ok) {\n const clone = networkRes.clone();\n caches.open('v1-static').then((cache) => cache.put(event.request, clone));\n }\n return networkRes;\n });\n return cached || fetchPromise;\n })\n );\n }\n});\n","javascript","",[59,207,208,217,252,272,284,311,342,350,369,405,411,420,426,440,446,452,457],{"__ignoreMap":205},[209,210,213],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"sXJMR","\u002F\u002F Service Worker Stale-While-Revalidate with Background Sync\n",[209,218,220,224,228,231,235,238,242,245,249],{"class":211,"line":219},2,[209,221,223],{"class":222},"s3sCt","self.",[209,225,227],{"class":226},"sGhOu","addEventListener",[209,229,230],{"class":222},"(",[209,232,234],{"class":233},"sJdzJ","'fetch'",[209,236,237],{"class":222},", (",[209,239,241],{"class":240},"spFnL","event",[209,243,244],{"class":222},") ",[209,246,248],{"class":247},"sCJTb","=>",[209,250,251],{"class":222}," {\n",[209,253,255,258,261,264,266,269],{"class":211,"line":254},3,[209,256,257],{"class":247}," if",[209,259,260],{"class":222}," (event.request.url.",[209,262,263],{"class":226},"includes",[209,265,230],{"class":222},[209,267,268],{"class":233},"'\u002Fstatic\u002F'",[209,270,271],{"class":222},")) {\n",[209,273,275,278,281],{"class":211,"line":274},4,[209,276,277],{"class":222}," event.",[209,279,280],{"class":226},"respondWith",[209,282,283],{"class":222},"(\n",[209,285,287,290,293,296,299,302,305,307,309],{"class":211,"line":286},5,[209,288,289],{"class":222}," caches.",[209,291,292],{"class":226},"match",[209,294,295],{"class":222},"(event.request).",[209,297,298],{"class":226},"then",[209,300,301],{"class":222},"((",[209,303,304],{"class":240},"cached",[209,306,244],{"class":222},[209,308,248],{"class":247},[209,310,251],{"class":222},[209,312,314,317,321,324,327,329,331,333,336,338,340],{"class":211,"line":313},6,[209,315,316],{"class":247}," const",[209,318,320],{"class":319},"s5hCx"," fetchPromise",[209,322,323],{"class":247}," =",[209,325,326],{"class":226}," fetch",[209,328,295],{"class":222},[209,330,298],{"class":226},[209,332,301],{"class":222},[209,334,335],{"class":240},"networkRes",[209,337,244],{"class":222},[209,339,248],{"class":247},[209,341,251],{"class":222},[209,343,345,347],{"class":211,"line":344},7,[209,346,257],{"class":247},[209,348,349],{"class":222}," (networkRes.ok) {\n",[209,351,353,355,358,360,363,366],{"class":211,"line":352},8,[209,354,316],{"class":247},[209,356,357],{"class":319}," clone",[209,359,323],{"class":247},[209,361,362],{"class":222}," networkRes.",[209,364,365],{"class":226},"clone",[209,367,368],{"class":222},"();\n",[209,370,372,374,377,379,382,385,387,389,392,394,396,399,402],{"class":211,"line":371},9,[209,373,289],{"class":222},[209,375,376],{"class":226},"open",[209,378,230],{"class":222},[209,380,381],{"class":233},"'v1-static'",[209,383,384],{"class":222},").",[209,386,298],{"class":226},[209,388,301],{"class":222},[209,390,391],{"class":240},"cache",[209,393,244],{"class":222},[209,395,248],{"class":247},[209,397,398],{"class":222}," cache.",[209,400,401],{"class":226},"put",[209,403,404],{"class":222},"(event.request, clone));\n",[209,406,408],{"class":211,"line":407},10,[209,409,410],{"class":222}," }\n",[209,412,414,417],{"class":211,"line":413},11,[209,415,416],{"class":247}," return",[209,418,419],{"class":222}," networkRes;\n",[209,421,423],{"class":211,"line":422},12,[209,424,425],{"class":222}," });\n",[209,427,429,431,434,437],{"class":211,"line":428},13,[209,430,416],{"class":247},[209,432,433],{"class":222}," cached ",[209,435,436],{"class":247},"||",[209,438,439],{"class":222}," fetchPromise;\n",[209,441,443],{"class":211,"line":442},14,[209,444,445],{"class":222}," })\n",[209,447,449],{"class":211,"line":448},15,[209,450,451],{"class":222}," );\n",[209,453,455],{"class":211,"line":454},16,[209,456,410],{"class":222},[209,458,460],{"class":211,"line":459},17,[209,461,462],{"class":222},"});\n",[14,464,465],{},[45,466,103],{},[49,468,469,472,475],{},[52,470,471],{},"INP \u003C 200ms",[52,473,474],{},"SW Install\u002FActivate \u003C 1s",[52,476,477],{},"Offline Fallback \u003C 50ms",[14,479,480],{},[45,481,119],{},[121,483,484,487,498,501],{},[52,485,486],{},"Audit SW lifecycle events using Chrome DevTools Application panel.",[52,488,489,490,493,494,497],{},"Monitor ",[59,491,492],{},"cache.put()"," and ",[59,495,496],{},"cache.match()"," latency.",[52,499,500],{},"Validate background sync triggers for non-critical updates.",[52,502,503],{},"Measure main thread blocking time during SW fetch interception.",[27,505,507],{"id":506},"_3-asset-versioning-deterministic-cache-invalidation","3. Asset Versioning & Deterministic Cache Invalidation",[14,509,510],{},"Cache invalidation remains the most complex challenge in frontend architecture. Relying on manual purges or short TTLs introduces latency and increases origin load. The industry standard is content-addressable hashing. Filenames change only when content changes.",[14,512,513,514,517],{},"Deploying Cache Busting and Versioning Assets ensures that immutable assets safely use ",[59,515,516],{},"Cache-Control: public, max-age=31536000, immutable",". This eliminates stale deployment risks. Build pipelines must generate deterministic hashes, inject them into HTML references, and trigger atomic CDN purges only for the HTML entry point. This workflow guarantees zero-downtime deployments while maintaining maximum cache longevity.",[14,519,520],{},[45,521,522],{},"Origin Configuration:",[200,524,528],{"className":525,"code":526,"language":527,"meta":205,"style":205},"language-nginx shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","# Immutable Asset Caching with Vary & Security Headers\nlocation ~* \\.(js|css|woff2|png|jpg|svg)$ {\n expires 1y;\n add_header Cache-Control \"public, max-age=31536000, immutable\";\n add_header Vary \"Accept-Encoding\";\n add_header X-Content-Type-Options \"nosniff\";\n access_log off;\n}\n","nginx",[59,529,530,535,549,557,571,583,595,605],{"__ignoreMap":205},[209,531,532],{"class":211,"line":212},[209,533,534],{"class":215},"# Immutable Asset Caching with Vary & Security Headers\n",[209,536,537,540,543,546],{"class":211,"line":219},[209,538,539],{"class":247},"location",[209,541,542],{"class":247}," ~*",[209,544,545],{"class":233}," \\.(js|css|woff2|png|jpg|svg)$ ",[209,547,548],{"class":222},"{\n",[209,550,551,554],{"class":211,"line":254},[209,552,553],{"class":247}," expires ",[209,555,556],{"class":222},"1y;\n",[209,558,559,562,565,568],{"class":211,"line":274},[209,560,561],{"class":247}," add_header ",[209,563,564],{"class":222},"Cache-Control ",[209,566,567],{"class":233},"\"public, max-age=31536000, immutable\"",[209,569,570],{"class":222},";\n",[209,572,573,575,578,581],{"class":211,"line":286},[209,574,561],{"class":247},[209,576,577],{"class":222},"Vary ",[209,579,580],{"class":233},"\"Accept-Encoding\"",[209,582,570],{"class":222},[209,584,585,587,590,593],{"class":211,"line":313},[209,586,561],{"class":247},[209,588,589],{"class":222},"X-Content-Type-Options ",[209,591,592],{"class":233},"\"nosniff\"",[209,594,570],{"class":222},[209,596,597,600,603],{"class":211,"line":344},[209,598,599],{"class":247}," access_log ",[209,601,602],{"class":319},"off",[209,604,570],{"class":222},[209,606,607],{"class":211,"line":352},[209,608,609],{"class":222},"}\n",[14,611,612],{},[45,613,614],{},"Build Pipeline Setup:",[200,616,620],{"className":617,"code":618,"language":619,"meta":205,"style":205},"language-typescript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Vite Build Configuration for Deterministic Hashing\nimport { defineConfig } from 'vite';\nexport default defineConfig({\n build: {\n rollupOptions: {\n output: {\n entryFileNames: 'assets\u002F[name]-[hash].js',\n chunkFileNames: 'assets\u002F[name]-[hash].js',\n assetFileNames: 'assets\u002F[name]-[hash].[ext]'\n }\n },\n minify: 'terser',\n sourcemap: false\n }\n});\n","typescript",[59,621,622,627,643,657,662,667,672,683,692,700,704,709,719,727,731],{"__ignoreMap":205},[209,623,624],{"class":211,"line":212},[209,625,626],{"class":215},"\u002F\u002F Vite Build Configuration for Deterministic Hashing\n",[209,628,629,632,635,638,641],{"class":211,"line":219},[209,630,631],{"class":247},"import",[209,633,634],{"class":222}," { defineConfig } ",[209,636,637],{"class":247},"from",[209,639,640],{"class":233}," 'vite'",[209,642,570],{"class":222},[209,644,645,648,651,654],{"class":211,"line":254},[209,646,647],{"class":247},"export",[209,649,650],{"class":247}," default",[209,652,653],{"class":226}," defineConfig",[209,655,656],{"class":240},"({\n",[209,658,659],{"class":211,"line":274},[209,660,661],{"class":222}," build: {\n",[209,663,664],{"class":211,"line":286},[209,665,666],{"class":222}," rollupOptions: {\n",[209,668,669],{"class":211,"line":313},[209,670,671],{"class":222}," output: {\n",[209,673,674,677,680],{"class":211,"line":344},[209,675,676],{"class":222}," entryFileNames: ",[209,678,679],{"class":233},"'assets\u002F[name]-[hash].js'",[209,681,682],{"class":222},",\n",[209,684,685,688,690],{"class":211,"line":352},[209,686,687],{"class":222}," chunkFileNames: ",[209,689,679],{"class":233},[209,691,682],{"class":222},[209,693,694,697],{"class":211,"line":371},[209,695,696],{"class":222}," assetFileNames: ",[209,698,699],{"class":233},"'assets\u002F[name]-[hash].[ext]'\n",[209,701,702],{"class":211,"line":407},[209,703,410],{"class":222},[209,705,706],{"class":211,"line":413},[209,707,708],{"class":222}," },\n",[209,710,711,714,717],{"class":211,"line":422},[209,712,713],{"class":222}," minify: ",[209,715,716],{"class":233},"'terser'",[209,718,682],{"class":222},[209,720,721,724],{"class":211,"line":428},[209,722,723],{"class":222}," sourcemap: ",[209,725,726],{"class":319},"false\n",[209,728,729],{"class":211,"line":442},[209,730,410],{"class":222},[209,732,733,736],{"class":211,"line":448},[209,734,735],{"class":240},"})",[209,737,570],{"class":222},[14,739,740],{},[45,741,103],{},[49,743,744,747,750],{},[52,745,746],{},"Zero Stale Asset Delivery",[52,748,749],{},"Deployment Cache Purge \u003C 5s",[52,751,752],{},"Build Hash Determinism = 100%",[14,754,755],{},[45,756,119],{},[121,758,759,762,765,768],{},[52,760,761],{},"Verify build output filenames against git commit hashes.",[52,763,764],{},"Test HTML reference updates across multiple environments.",[52,766,767],{},"Monitor CDN purge propagation latency.",[52,769,770],{},"Validate that unchanged assets retain original cache keys post-deployment.",[27,772,774],{"id":773},"_4-data-layer-optimization-api-response-caching","4. Data Layer Optimization & API Response Caching",[14,776,777],{},"Frontend performance is heavily constrained by data fetching latency. Traditional REST endpoints often suffer from over-fetching, cache fragmentation, and unpredictable response shapes. Migrating to structured query patterns with GraphQL Query Batching and Caching reduces network round trips. It enables normalized client-side caching.",[14,779,780],{},"Implementing persisted queries at the edge allows CDNs to cache exact query-response pairs. This transforms dynamic API calls into cacheable static assets. Combine this with HTTP\u002F2 multiplexing and response compression to minimize payload size and accelerate hydration.",[14,782,783],{},[45,784,785],{},"Optimization Checklist:",[49,787,788,794,804],{},[52,789,790,793],{},[45,791,792],{},"Persisted Queries:"," Pre-register query hashes at build time. Reject unknown hashes at the edge to prevent cache poisoning.",[52,795,796,799,800,803],{},[45,797,798],{},"Response Compression:"," Enforce Brotli for text payloads. Verify ",[59,801,802],{},"Content-Encoding: br"," headers in CDN logs.",[52,805,806,809,810,78],{},[45,807,808],{},"Hydration Blocking:"," Defer non-essential data fetching until after ",[59,811,812],{},"window.requestIdleCallback()",[14,814,815],{},[45,816,103],{},[49,818,819,822,825],{},[52,820,821],{},"API TTFB \u003C 0.5s",[52,823,824],{},"Query Cache Hit > 85%",[52,826,827],{},"Payload Reduction > 40%",[14,829,830],{},[45,831,119],{},[121,833,834,837,840,843],{},[52,835,836],{},"Profile network waterfall for duplicate API calls.",[52,838,839],{},"Implement persisted query registry.",[52,841,842],{},"Configure edge cache keys based on query hash + auth scope.",[52,844,845],{},"Measure hydration blocking time before\u002Fafter batching.",[27,847,849],{"id":848},"_5-advanced-runtime-patterns-telemetry-integration","5. Advanced Runtime Patterns & Telemetry Integration",[14,851,852,853,384],{},"Production caching architectures require continuous validation against real user metrics. Static configurations degrade over time as traffic patterns shift. Deploying Advanced Service Worker Patterns enables runtime cache adaptation. The worker dynamically adjusts TTLs based on network quality (e.g., ",[59,854,855],{},"navigator.connection.effectiveType",[14,857,858],{},"Integrate Real User Monitoring (RUM) to track cache effectiveness per geographic region and device class. Use synthetic monitoring for regression testing. Establish alerting thresholds for cache miss rates exceeding 15% or INP degradation beyond 200ms.",[14,860,861],{},[45,862,863],{},"Telemetry Implementation:",[200,865,867],{"className":202,"code":866,"language":204,"meta":205,"style":205},"\u002F\u002F RUM Cache Hit\u002FMiss Telemetry Beacon\nconst observer = new PerformanceObserver((list) => {\n for (const entry of list.getEntries()) {\n const cacheStatus = entry.responseStatus || 'unknown';\n navigator.sendBeacon('\u002Fanalytics\u002Fcache-metrics', JSON.stringify({\n url: entry.name,\n cache: cacheStatus,\n lcp: performance.getEntriesByType('largest-contentful-paint')[0]?.startTime,\n inp: performance.getEntriesByType('interaction').length\n }));\n }\n});\nobserver.observe({ type: 'resource', buffered: true });\n",[59,868,869,874,901,926,945,971,976,981,1003,1020,1025,1029,1033],{"__ignoreMap":205},[209,870,871],{"class":211,"line":212},[209,872,873],{"class":215},"\u002F\u002F RUM Cache Hit\u002FMiss Telemetry Beacon\n",[209,875,876,879,882,884,887,890,892,895,897,899],{"class":211,"line":219},[209,877,878],{"class":247},"const",[209,880,881],{"class":319}," observer",[209,883,323],{"class":247},[209,885,886],{"class":247}," new",[209,888,889],{"class":226}," PerformanceObserver",[209,891,301],{"class":222},[209,893,894],{"class":240},"list",[209,896,244],{"class":222},[209,898,248],{"class":247},[209,900,251],{"class":222},[209,902,903,906,909,911,914,917,920,923],{"class":211,"line":254},[209,904,905],{"class":247}," for",[209,907,908],{"class":222}," (",[209,910,878],{"class":247},[209,912,913],{"class":319}," entry",[209,915,916],{"class":247}," of",[209,918,919],{"class":222}," list.",[209,921,922],{"class":226},"getEntries",[209,924,925],{"class":222},"()) {\n",[209,927,928,930,933,935,938,940,943],{"class":211,"line":274},[209,929,316],{"class":247},[209,931,932],{"class":319}," cacheStatus",[209,934,323],{"class":247},[209,936,937],{"class":222}," entry.responseStatus ",[209,939,436],{"class":247},[209,941,942],{"class":233}," 'unknown'",[209,944,570],{"class":222},[209,946,947,950,953,955,958,961,964,966,969],{"class":211,"line":286},[209,948,949],{"class":222}," navigator.",[209,951,952],{"class":226},"sendBeacon",[209,954,230],{"class":222},[209,956,957],{"class":233},"'\u002Fanalytics\u002Fcache-metrics'",[209,959,960],{"class":222},", ",[209,962,963],{"class":319},"JSON",[209,965,78],{"class":222},[209,967,968],{"class":226},"stringify",[209,970,656],{"class":222},[209,972,973],{"class":211,"line":313},[209,974,975],{"class":222}," url: entry.name,\n",[209,977,978],{"class":211,"line":344},[209,979,980],{"class":222}," cache: cacheStatus,\n",[209,982,983,986,989,991,994,997,1000],{"class":211,"line":352},[209,984,985],{"class":222}," lcp: performance.",[209,987,988],{"class":226},"getEntriesByType",[209,990,230],{"class":222},[209,992,993],{"class":233},"'largest-contentful-paint'",[209,995,996],{"class":222},")[",[209,998,999],{"class":319},"0",[209,1001,1002],{"class":222},"]?.startTime,\n",[209,1004,1005,1008,1010,1012,1015,1017],{"class":211,"line":371},[209,1006,1007],{"class":222}," inp: performance.",[209,1009,988],{"class":226},[209,1011,230],{"class":222},[209,1013,1014],{"class":233},"'interaction'",[209,1016,384],{"class":222},[209,1018,1019],{"class":319},"length\n",[209,1021,1022],{"class":211,"line":407},[209,1023,1024],{"class":222}," }));\n",[209,1026,1027],{"class":211,"line":413},[209,1028,410],{"class":222},[209,1030,1031],{"class":211,"line":422},[209,1032,462],{"class":222},[209,1034,1035,1038,1041,1044,1047,1050,1053],{"class":211,"line":428},[209,1036,1037],{"class":222},"observer.",[209,1039,1040],{"class":226},"observe",[209,1042,1043],{"class":222},"({ type: ",[209,1045,1046],{"class":233},"'resource'",[209,1048,1049],{"class":222},", buffered: ",[209,1051,1052],{"class":319},"true",[209,1054,425],{"class":222},[14,1056,1057],{},[45,1058,103],{},[49,1060,1061,1064,1067],{},[52,1062,1063],{},"RUM Data Coverage > 70%",[52,1065,1066],{},"Cache Adaptation Latency \u003C 100ms",[52,1068,1069],{},"Alert Response Time \u003C 5m",[14,1071,1072],{},[45,1073,119],{},[121,1075,1076,1079,1082,1085],{},[52,1077,1078],{},"Deploy RUM beacon with cache status metadata.",[52,1080,1081],{},"Aggregate metrics by CDN PoP and device tier.",[52,1083,1084],{},"Implement adaptive TTL logic in SW based on RTT.",[52,1086,1087],{},"Configure CI\u002FCD gates to block deployments with degraded cache performance.",[27,1089,1091],{"id":1090},"common-implementation-pitfalls","Common Implementation Pitfalls",[49,1093,1094,1100,1106,1109,1112],{},[52,1095,1096,1097,1099],{},"Setting uniform ",[59,1098,77],{}," across all asset types, causing stale HTML or bloated cache storage.",[52,1101,1102,1103,1105],{},"Omitting ",[59,1104,87],{}," headers, resulting in unoptimized gzip\u002Fbrotli delivery at the edge.",[52,1107,1108],{},"Implementing cache-first SW strategies without background revalidation, leading to permanent stale content.",[52,1110,1111],{},"Purging entire CDN directories instead of targeted URL invalidation, causing massive cache miss storms.",[52,1113,1114],{},"Ignoring INP impact from heavy main-thread execution during cache hydration and SW activation.",[27,1116,1118],{"id":1117},"frequently-asked-questions","Frequently Asked Questions",[14,1120,1121,1124,1125,1127],{},[45,1122,1123],{},"How do I balance CDN edge caching with Service Worker client caching?","\nTreat the CDN as the authoritative source for immutable assets and the SW as a runtime fallback. Configure ",[59,1126,516],{}," at the edge, then use SW cache-first for static bundles. For dynamic HTML, use network-first at the SW layer with a fallback to edge-cached versions. This prevents cache divergence while maintaining sub-200ms INP during network degradation.",[14,1129,1130,1133],{},[45,1131,1132],{},"What is the optimal cache invalidation workflow for zero-downtime deployments?","\nUse content-addressable hashing for all static assets, allowing infinite TTLs. Deploy new HTML entry points with updated asset references. Trigger a targeted CDN purge only for the HTML file. The SW will automatically fetch the new HTML, which references new hashed assets, while old assets remain cached until naturally evicted. This eliminates full-cache purges and prevents cache stampedes.",[14,1135,1136,1139],{},[45,1137,1138],{},"How does stale-while-revalidate impact Core Web Vitals?","\nSWR directly improves LCP and INP by serving cached payloads synchronously, eliminating network latency. The asynchronous background update ensures data freshness without blocking the main thread. However, improper implementation can cause layout shifts if cached and updated payloads differ significantly in size. Always reserve DOM space and use CSS containment to prevent CLS during background updates.",[14,1141,1142,1145],{},[45,1143,1144],{},"Why is INP degrading despite high CDN cache hit ratios?","\nHigh cache hit ratios only optimize network delivery. INP degradation typically stems from main-thread execution bottlenecks during hydration, SW activation, or heavy JavaScript parsing. Audit long tasks (>50ms), defer non-critical scripts, and implement code splitting. Ensure SW fetch handlers return cached responses immediately without blocking on background sync or complex routing logic.",[1147,1148,1149],"style",{},"html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}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":205,"searchDepth":219,"depth":219,"links":1151},[1152,1153,1154,1155,1156,1157,1158],{"id":29,"depth":219,"text":30},{"id":145,"depth":219,"text":146},{"id":506,"depth":219,"text":507},{"id":773,"depth":219,"text":774},{"id":848,"depth":219,"text":849},{"id":1090,"depth":219,"text":1091},{"id":1117,"depth":219,"text":1118},"md",{},true,"\u002Fadvanced-caching-strategies-cdn-architecture",{"title":5,"description":16},"advanced-caching-strategies-cdn-architecture\u002Findex","LGYtvkCNueNZRWVgmEZ90dTYXqcgLHNtyTnjj2B4liE",[1167,1168],null,{"title":1169,"path":1170,"stem":1171,"children":-1},"CDN Edge Caching Configuration: Frontend Asset Delivery & Performance Tuning","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration","advanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002Findex",1777925997719]