[{"data":1,"prerenderedAt":1282},["ShallowReactive",2],{"content:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002F":3,"surroundings:\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002F":1274},{"id":4,"title":5,"body":6,"description":1267,"extension":1268,"meta":1269,"navigation":724,"path":1270,"seo":1271,"stem":1272,"__hash__":1273},"content\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Findex.md","HTTP Cache-Control Headers Explained",{"type":7,"value":8,"toc":1256},"minimark",[9,13,22,27,45,71,86,133,147,151,154,232,240,249,254,353,358,578,582,595,603,620,647,652,772,785,789,796,802,811,950,969,973,990,997,1002,1014,1018,1035,1048,1066,1082,1086,1153,1157,1188,1207,1227,1243,1247,1252],[10,11,5],"h1",{"id":12},"http-cache-control-headers-explained",[14,15,16,17,21],"p",{},"Define the engineering scope: precise directive syntax, browser\u002FCDN parsing precedence, and measurable impact on Core Web Vitals. This guide prioritizes actionable configuration over theoretical definitions, establishing diagnostic workflows and explicit performance thresholds for frontend asset delivery. ",[18,19,20],"code",{},"Cache-Control"," operates as the single source of truth for cache lifecycle management across origin servers, edge networks, and client browsers. Misconfiguration directly degrades Time to First Byte (TTFB), inflates bandwidth costs, and introduces cache poisoning vectors. The following sections provide production-ready templates, validation scripts, and metric-driven optimization targets.",[23,24,26],"h2",{"id":25},"directive-architecture-and-browser-parsing-precedence","Directive Architecture and Browser Parsing Precedence",[14,28,29,30,32,33,36,37,40,41,44],{},"The ",[18,31,20],{}," header uses a comma-separated list of directives that dictate how intermediaries and user agents store, validate, and serve responses. Modern browsers resolve conflicting instructions through a strict precedence hierarchy: ",[18,34,35],{},"no-store"," overrides all caching, ",[18,38,39],{},"private"," restricts storage to the local browser, and ",[18,42,43],{},"public"," permits shared caching across CDNs and proxies.",[14,46,47,50,51,54,55,57,58,61,62,64,65,70],{},[18,48,49],{},"max-age"," defines the freshness lifetime in seconds relative to the response timestamp. ",[18,52,53],{},"s-maxage"," overrides ",[18,56,49],{}," exclusively for shared caches, allowing you to serve highly personalized content to users while aggressively caching identical payloads at the edge. ",[18,59,60],{},"must-revalidate"," forces the browser to contact the origin once ",[18,63,49],{}," expires, preventing stale content delivery during offline transitions. Understanding how these directives propagate through multi-tier architectures is critical for maintaining consistency across ",[66,67,69],"a",{"href":68},"\u002Fadvanced-caching-strategies-cdn-architecture\u002F","Advanced Caching Strategies & CDN Architecture"," implementations.",[14,72,73,77,78,81,82,85],{},[74,75,76],"strong",{},"Diagnostic Workflow:"," Use the DevTools Network panel to compare response headers across initial load and hard-reload states. Verify directive precedence using ",[18,79,80],{},"curl -I"," with explicit ",[18,83,84],{},"Accept"," headers to simulate different client profiles.",[87,88,93],"pre",{"className":89,"code":90,"language":91,"meta":92,"style":92},"language-bash shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","curl -I -H \"Accept: text\u002Fhtml\" https:\u002F\u002Fyour-domain.com\u002F\ncurl -I -H \"Accept: application\u002Fjson\" https:\u002F\u002Fyour-domain.com\u002Fapi\u002Fdata\n","bash","",[18,94,95,118],{"__ignoreMap":92},[96,97,100,104,108,111,115],"span",{"class":98,"line":99},"line",1,[96,101,103],{"class":102},"spFnL","curl",[96,105,107],{"class":106},"s5hCx"," -I",[96,109,110],{"class":106}," -H",[96,112,114],{"class":113},"sJdzJ"," \"Accept: text\u002Fhtml\"",[96,116,117],{"class":113}," https:\u002F\u002Fyour-domain.com\u002F\n",[96,119,121,123,125,127,130],{"class":98,"line":120},2,[96,122,103],{"class":102},[96,124,107],{"class":106},[96,126,110],{"class":106},[96,128,129],{"class":113}," \"Accept: application\u002Fjson\"",[96,131,132],{"class":113}," https:\u002F\u002Fyour-domain.com\u002Fapi\u002Fdata\n",[14,134,135,138,139,142,143,146],{},[74,136,137],{},"Performance Thresholds:"," Target ",[18,140,141],{},"\u003C50ms"," TTFB for cached static assets. Enforce ",[18,144,145],{},"max-age >= 31536000"," (1 year) for immutable resources to eliminate validation overhead.",[23,148,150],{"id":149},"asset-specific-configuration-templates","Asset-Specific Configuration Templates",[14,152,153],{},"Cache directives must align with asset volatility and delivery patterns. Applying uniform headers across all routes guarantees either stale content delivery or unnecessary origin hits. Implement route-level middleware or server configuration blocks to inject precise combinations.",[155,156,157,173],"table",{},[158,159,160],"thead",{},[161,162,163,167,170],"tr",{},[164,165,166],"th",{},"Asset Type",[164,168,169],{},"Recommended Directive",[164,171,172],{},"Rationale",[174,175,176,190,203,216],"tbody",{},[161,177,178,182,187],{},[179,180,181],"td",{},"HTML Documents",[179,183,184],{},[18,185,186],{},"max-age=0, must-revalidate, no-cache",[179,188,189],{},"Ensures navigation always checks for updated DOM structure and routing logic.",[161,191,192,195,200],{},[179,193,194],{},"Hashed JS\u002FCSS",[179,196,197],{},[18,198,199],{},"max-age=31536000, public, immutable",[179,201,202],{},"Content-hashed filenames guarantee uniqueness. Browsers skip validation entirely.",[161,204,205,208,213],{},[179,206,207],{},"Unhashed Images",[179,209,210],{},[18,211,212],{},"max-age=2592000, public",[179,214,215],{},"30-day TTL balances freshness with CDN edge efficiency for media assets.",[161,217,218,221,226],{},[179,219,220],{},"API JSON",[179,222,223],{},[18,224,225],{},"max-age=300, private, no-transform",[179,227,228,229,231],{},"Short TTL for dynamic data; ",[18,230,39],{}," prevents shared caching of user-specific payloads.",[14,233,234,235,239],{},"When detailing versioned static asset strategies, align build-time hashing with ",[66,236,238],{"href":237},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Fsetting-up-immutable-cache-headers-for-hashed-assets\u002F","Setting up immutable cache headers for hashed assets"," to prevent stale bundle delivery.",[14,241,242,244,245,248],{},[74,243,76],{}," Audit your build pipeline output to verify filename hashing matches ",[18,246,247],{},"immutable"," flags. Run automated header checks against staging environments before promotion.",[14,250,251],{},[74,252,253],{},"Vite\u002FWebpack Configuration (JSON):",[87,255,259],{"className":256,"code":257,"language":258,"meta":92,"style":92},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"build\": {\n \"rollupOptions\": {\n \"output\": {\n \"assetFileNames\": \"assets\u002F[name]-[hash][extname]\",\n \"chunkFileNames\": \"assets\u002F[name]-[hash].js\",\n \"entryFileNames\": \"assets\u002F[name]-[hash].js\"\n }\n }\n }\n}\n","json",[18,260,261,267,276,284,292,307,320,331,337,342,347],{"__ignoreMap":92},[96,262,263],{"class":98,"line":99},[96,264,266],{"class":265},"s3sCt","{\n",[96,268,269,273],{"class":98,"line":120},[96,270,272],{"class":271},"sj_b3"," \"build\"",[96,274,275],{"class":265},": {\n",[96,277,279,282],{"class":98,"line":278},3,[96,280,281],{"class":271}," \"rollupOptions\"",[96,283,275],{"class":265},[96,285,287,290],{"class":98,"line":286},4,[96,288,289],{"class":271}," \"output\"",[96,291,275],{"class":265},[96,293,295,298,301,304],{"class":98,"line":294},5,[96,296,297],{"class":271}," \"assetFileNames\"",[96,299,300],{"class":265},": ",[96,302,303],{"class":113},"\"assets\u002F[name]-[hash][extname]\"",[96,305,306],{"class":265},",\n",[96,308,310,313,315,318],{"class":98,"line":309},6,[96,311,312],{"class":271}," \"chunkFileNames\"",[96,314,300],{"class":265},[96,316,317],{"class":113},"\"assets\u002F[name]-[hash].js\"",[96,319,306],{"class":265},[96,321,323,326,328],{"class":98,"line":322},7,[96,324,325],{"class":271}," \"entryFileNames\"",[96,327,300],{"class":265},[96,329,330],{"class":113},"\"assets\u002F[name]-[hash].js\"\n",[96,332,334],{"class":98,"line":333},8,[96,335,336],{"class":265}," }\n",[96,338,340],{"class":98,"line":339},9,[96,341,336],{"class":265},[96,343,345],{"class":98,"line":344},10,[96,346,336],{"class":265},[96,348,350],{"class":98,"line":349},11,[96,351,352],{"class":265},"}\n",[14,354,355],{},[74,356,357],{},"Express.js Middleware (JavaScript):",[87,359,363],{"className":360,"code":361,"language":362,"meta":92,"style":92},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","app.use((req, res, next) => {\n const path = req.path;\n if (\u002F\\.[a-f0-9]{8,}\\.(js|css)$\u002F.test(path)) {\n res.set('Cache-Control', 'public, max-age=31536000, immutable');\n } else if (path.startsWith('\u002Fapi\u002F')) {\n res.set('Cache-Control', 'private, max-age=300, no-transform');\n } else if (path.endsWith('.html')) {\n res.set('Cache-Control', 'no-cache, must-revalidate');\n }\n next();\n});\n","javascript",[18,364,365,401,415,461,483,507,524,544,561,565,573],{"__ignoreMap":92},[96,366,367,370,374,377,380,383,386,388,391,394,398],{"class":98,"line":99},[96,368,369],{"class":265},"app.",[96,371,373],{"class":372},"sGhOu","use",[96,375,376],{"class":265},"((",[96,378,379],{"class":102},"req",[96,381,382],{"class":265},", ",[96,384,385],{"class":102},"res",[96,387,382],{"class":265},[96,389,390],{"class":102},"next",[96,392,393],{"class":265},") ",[96,395,397],{"class":396},"sCJTb","=>",[96,399,400],{"class":265}," {\n",[96,402,403,406,409,412],{"class":98,"line":120},[96,404,405],{"class":396}," const",[96,407,408],{"class":106}," path",[96,410,411],{"class":396}," =",[96,413,414],{"class":265}," req.path;\n",[96,416,417,420,423,426,430,433,436,438,441,444,447,450,452,455,458],{"class":98,"line":278},[96,418,419],{"class":396}," if",[96,421,422],{"class":265}," (",[96,424,425],{"class":113},"\u002F",[96,427,429],{"class":428},"s1o6E","\\.",[96,431,432],{"class":106},"[a-f0-9]",[96,434,435],{"class":396},"{8,}",[96,437,429],{"class":428},[96,439,440],{"class":113},"(js",[96,442,443],{"class":396},"|",[96,445,446],{"class":113},"css)",[96,448,449],{"class":396},"$",[96,451,425],{"class":113},[96,453,454],{"class":265},".",[96,456,457],{"class":372},"test",[96,459,460],{"class":265},"(path)) {\n",[96,462,463,466,469,472,475,477,480],{"class":98,"line":286},[96,464,465],{"class":265}," res.",[96,467,468],{"class":372},"set",[96,470,471],{"class":265},"(",[96,473,474],{"class":113},"'Cache-Control'",[96,476,382],{"class":265},[96,478,479],{"class":113},"'public, max-age=31536000, immutable'",[96,481,482],{"class":265},");\n",[96,484,485,488,491,493,496,499,501,504],{"class":98,"line":294},[96,486,487],{"class":265}," } ",[96,489,490],{"class":396},"else",[96,492,419],{"class":396},[96,494,495],{"class":265}," (path.",[96,497,498],{"class":372},"startsWith",[96,500,471],{"class":265},[96,502,503],{"class":113},"'\u002Fapi\u002F'",[96,505,506],{"class":265},")) {\n",[96,508,509,511,513,515,517,519,522],{"class":98,"line":309},[96,510,465],{"class":265},[96,512,468],{"class":372},[96,514,471],{"class":265},[96,516,474],{"class":113},[96,518,382],{"class":265},[96,520,521],{"class":113},"'private, max-age=300, no-transform'",[96,523,482],{"class":265},[96,525,526,528,530,532,534,537,539,542],{"class":98,"line":322},[96,527,487],{"class":265},[96,529,490],{"class":396},[96,531,419],{"class":396},[96,533,495],{"class":265},[96,535,536],{"class":372},"endsWith",[96,538,471],{"class":265},[96,540,541],{"class":113},"'.html'",[96,543,506],{"class":265},[96,545,546,548,550,552,554,556,559],{"class":98,"line":333},[96,547,465],{"class":265},[96,549,468],{"class":372},[96,551,471],{"class":265},[96,553,474],{"class":113},[96,555,382],{"class":265},[96,557,558],{"class":113},"'no-cache, must-revalidate'",[96,560,482],{"class":265},[96,562,563],{"class":98,"line":339},[96,564,336],{"class":265},[96,566,567,570],{"class":98,"line":344},[96,568,569],{"class":372}," next",[96,571,572],{"class":265},"();\n",[96,574,575],{"class":98,"line":349},[96,576,577],{"class":265},"});\n",[23,579,581],{"id":580},"cdn-and-reverse-proxy-interaction-models","CDN and Reverse Proxy Interaction Models",[14,583,584,585,587,588,591,592,594],{},"CDNs (Cloudflare, Fastly, AWS CloudFront) and reverse proxies (Nginx, HAProxy) interpret ",[18,586,20],{}," directives but often apply their own override rules. By default, many CDNs strip ",[18,589,590],{},"Set-Cookie"," and ignore caching for responses containing authentication headers. To enforce origin directives at the edge, explicitly configure cache keys, disable dashboard TTL overrides, and leverage ",[18,593,53],{}," for shared cache control.",[14,596,597,598,602],{},"When mapping origin directives to edge cache keys, TTL overrides, and bypass rules for authenticated routes, reference ",[66,599,601],{"href":600},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002F","CDN Edge Caching Configuration"," for architecture-specific tuning.",[14,604,605,607,608,611,612,615,616,619],{},[74,606,76],{}," Compare origin vs edge response headers using ",[18,609,610],{},"X-Cache-Status"," or ",[18,613,614],{},"CF-Cache-Status",". Test cache bypass triggers by appending query strings or modifying ",[18,617,618],{},"Vary"," headers to ensure deterministic routing.",[87,621,623],{"className":89,"code":622,"language":91,"meta":92,"style":92},"curl -sI https:\u002F\u002Fyour-domain.com\u002Fstatic\u002Fapp-abc123.js | grep -E \"Cache-Control|CF-Cache-Status|Age\"\n",[18,624,625],{"__ignoreMap":92},[96,626,627,629,632,635,638,641,644],{"class":98,"line":99},[96,628,103],{"class":102},[96,630,631],{"class":106}," -sI",[96,633,634],{"class":113}," https:\u002F\u002Fyour-domain.com\u002Fstatic\u002Fapp-abc123.js",[96,636,637],{"class":396}," |",[96,639,640],{"class":102}," grep",[96,642,643],{"class":106}," -E",[96,645,646],{"class":113}," \"Cache-Control|CF-Cache-Status|Age\"\n",[14,648,649],{},[74,650,651],{},"Nginx Configuration:",[87,653,657],{"className":654,"code":655,"language":656,"meta":92,"style":92},"language-nginx shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","location ~* \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {\n expires 1y;\n add_header Cache-Control \"public, max-age=31536000, immutable\";\n add_header Vary \"Accept-Encoding\";\n access_log off;\n}\n\nlocation \u002Fapi\u002F {\n proxy_pass http:\u002F\u002Fbackend;\n proxy_cache_valid 200 5m;\n add_header Cache-Control \"private, max-age=300, no-transform\";\n}\n","nginx",[18,658,659,672,680,694,706,716,720,726,735,743,756,767],{"__ignoreMap":92},[96,660,661,664,667,670],{"class":98,"line":99},[96,662,663],{"class":396},"location",[96,665,666],{"class":396}," ~*",[96,668,669],{"class":113}," \\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ ",[96,671,266],{"class":265},[96,673,674,677],{"class":98,"line":120},[96,675,676],{"class":396}," expires ",[96,678,679],{"class":265},"1y;\n",[96,681,682,685,688,691],{"class":98,"line":278},[96,683,684],{"class":396}," add_header ",[96,686,687],{"class":265},"Cache-Control ",[96,689,690],{"class":113},"\"public, max-age=31536000, immutable\"",[96,692,693],{"class":265},";\n",[96,695,696,698,701,704],{"class":98,"line":286},[96,697,684],{"class":396},[96,699,700],{"class":265},"Vary ",[96,702,703],{"class":113},"\"Accept-Encoding\"",[96,705,693],{"class":265},[96,707,708,711,714],{"class":98,"line":294},[96,709,710],{"class":396}," access_log ",[96,712,713],{"class":106},"off",[96,715,693],{"class":265},[96,717,718],{"class":98,"line":309},[96,719,352],{"class":265},[96,721,722],{"class":98,"line":322},[96,723,725],{"emptyLinePlaceholder":724},true,"\n",[96,727,728,730,733],{"class":98,"line":333},[96,729,663],{"class":396},[96,731,732],{"class":102}," \u002Fapi\u002F ",[96,734,266],{"class":265},[96,736,737,740],{"class":98,"line":339},[96,738,739],{"class":396}," proxy_pass ",[96,741,742],{"class":265},"http:\u002F\u002Fbackend;\n",[96,744,745,748,751,754],{"class":98,"line":344},[96,746,747],{"class":396}," proxy_cache_valid ",[96,749,750],{"class":106},"200",[96,752,753],{"class":106}," 5m",[96,755,693],{"class":265},[96,757,758,760,762,765],{"class":98,"line":349},[96,759,684],{"class":396},[96,761,687],{"class":265},[96,763,764],{"class":113},"\"private, max-age=300, no-transform\"",[96,766,693],{"class":265},[96,768,770],{"class":98,"line":769},12,[96,771,352],{"class":265},[14,773,774,776,777,780,781,784],{},[74,775,137],{}," Maintain edge cache hit ratio ",[18,778,779],{},">85%"," for static assets. Achieve origin request reduction ",[18,782,783],{},">70%"," after directive alignment and proxy rule optimization.",[23,786,788],{"id":787},"diagnostic-workflows-and-cache-validation-testing","Diagnostic Workflows and Cache Validation Testing",[14,790,791,792,795],{},"Validation requires automated, repeatable checks integrated into CI\u002FCD pipelines. Manual inspection scales poorly across microservices and multi-region deployments. Implement scripts that parse response headers, flag missing directives, and validate ",[18,793,794],{},"Age"," header progression to confirm edge caching is active.",[14,797,798,799,801],{},"Cache state directly impacts resource hint efficacy and network queue prioritization. When ",[18,800,20],{}," forces revalidation, preloaded assets may compete with critical rendering paths. Review Using resource hints: prefetch vs prerender vs preconnect to align hint strategies with your cache lifecycle.",[14,803,804,806,807,810],{},[74,805,76],{}," Execute CI\u002FCD pipeline scripts that parse headers and simulate offline\u002Fairplane mode to test ",[18,808,809],{},"stale-while-revalidate"," fallback behavior.",[87,812,814],{"className":89,"code":813,"language":91,"meta":92,"style":92},"#!\u002Fbin\u002Fbash\n# cache-audit.sh\nURLS=(\"https:\u002F\u002Fexample.com\u002F\" \"https:\u002F\u002Fexample.com\u002Fstatic\u002Fmain.js\" \"https:\u002F\u002Fexample.com\u002Fapi\u002Fconfig\")\nfor url in \"${URLS[@]}\"; do\n HEADERS=$(curl -sI \"$url\")\n echo \"=== $url ===\"\n echo \"$HEADERS\" | grep -E \"Cache-Control|Age|X-Cache-Status|ETag\"\n echo \"\"\ndone\n",[18,815,816,822,827,849,880,905,918,938,945],{"__ignoreMap":92},[96,817,818],{"class":98,"line":99},[96,819,821],{"class":820},"sXJMR","#!\u002Fbin\u002Fbash\n",[96,823,824],{"class":98,"line":120},[96,825,826],{"class":820},"# cache-audit.sh\n",[96,828,829,832,835,837,840,843,846],{"class":98,"line":278},[96,830,831],{"class":265},"URLS",[96,833,834],{"class":396},"=",[96,836,471],{"class":265},[96,838,839],{"class":113},"\"https:\u002F\u002Fexample.com\u002F\"",[96,841,842],{"class":113}," \"https:\u002F\u002Fexample.com\u002Fstatic\u002Fmain.js\"",[96,844,845],{"class":113}," \"https:\u002F\u002Fexample.com\u002Fapi\u002Fconfig\"",[96,847,848],{"class":265},")\n",[96,850,851,854,857,860,863,865,868,871,874,877],{"class":98,"line":286},[96,852,853],{"class":396},"for",[96,855,856],{"class":265}," url ",[96,858,859],{"class":396},"in",[96,861,862],{"class":113}," \"${",[96,864,831],{"class":265},[96,866,867],{"class":113},"[",[96,869,870],{"class":396},"@",[96,872,873],{"class":113},"]}\"",[96,875,876],{"class":265},"; ",[96,878,879],{"class":396},"do\n",[96,881,882,885,887,890,892,894,897,900,903],{"class":98,"line":294},[96,883,884],{"class":265}," HEADERS",[96,886,834],{"class":396},[96,888,889],{"class":265},"$(",[96,891,103],{"class":102},[96,893,631],{"class":106},[96,895,896],{"class":113}," \"",[96,898,899],{"class":265},"$url",[96,901,902],{"class":113},"\"",[96,904,848],{"class":265},[96,906,907,910,913,915],{"class":98,"line":309},[96,908,909],{"class":106}," echo",[96,911,912],{"class":113}," \"=== ",[96,914,899],{"class":265},[96,916,917],{"class":113}," ===\"\n",[96,919,920,922,924,927,929,931,933,935],{"class":98,"line":322},[96,921,909],{"class":106},[96,923,896],{"class":113},[96,925,926],{"class":265},"$HEADERS",[96,928,902],{"class":113},[96,930,637],{"class":396},[96,932,640],{"class":102},[96,934,643],{"class":106},[96,936,937],{"class":113}," \"Cache-Control|Age|X-Cache-Status|ETag\"\n",[96,939,940,942],{"class":98,"line":333},[96,941,909],{"class":106},[96,943,944],{"class":113}," \"\"\n",[96,946,947],{"class":98,"line":339},[96,948,949],{"class":396},"done\n",[14,951,952,954,955,957,958,961,962,965,966,454],{},[74,953,137],{}," Zero cache-poisoning incidents (validated via ",[18,956,618],{}," header audit). Maintain ",[18,959,960],{},"\u003C200ms"," validation latency for conditional requests using ",[18,963,964],{},"If-None-Match"," \u002F ",[18,967,968],{},"If-Modified-Since",[23,970,972],{"id":971},"metric-optimization-thresholds-and-performance-budgets","Metric Optimization Thresholds and Performance Budgets",[14,974,975,976,978,979,982,983,986,987],{},"Cache configuration directly dictates bandwidth consumption and Core Web Vitals. Establish explicit targets: cache hit ratio ",[18,977,779],{},", TTFB ",[18,980,981],{},"\u003C100ms"," for cached assets, and Largest Contentful Paint (LCP) improvement ",[18,984,985],{},">=15%"," post-optimization. Calculate bandwidth savings using:\n",[18,988,989],{},"Savings (%) = (1 - (Cached_Requests \u002F Total_Requests)) * 100",[14,991,992,993,996],{},"Private scoping and cookie stripping significantly affect cacheability and request overhead. When ",[18,994,995],{},"Cache-Control: private"," is applied, intermediaries bypass storage, but reducing cookie payload size for faster requests](\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Freducing-cookie-payload-size-for-faster-requests\u002F) ensures that even dynamic endpoints minimize network latency and avoid unnecessary cache fragmentation.",[14,998,999,1001],{},[74,1000,76],{}," Correlate Real User Monitoring (RUM) data from CrUX and WebPageTest with cache configuration changes. Track LCP delta before and after directive optimization using Lighthouse CI.",[14,1003,1004,1006,1007,1009,1010,1013],{},[74,1005,137],{}," LCP improvement ",[18,1008,985],{}," post-optimization. Bandwidth cost reduction ",[18,1011,1012],{},">=40%"," via aggressive static asset caching and edge offloading.",[23,1015,1017],{"id":1016},"advanced-patterns-swr-immutable-and-invalidation","Advanced Patterns: SWR, Immutable, and Invalidation",[14,1019,1020,422,1022,1025,1026,1028,1029,1031,1032,454],{},[18,1021,809],{},[18,1023,1024],{},"swr",") decouples content delivery from freshness validation. The browser serves cached content instantly while fetching an updated version in the background. This pattern is critical for high-traffic marketing pages and dashboards where sub-second perceived latency outweighs strict consistency requirements. Pair ",[18,1027,1024],{}," with ",[18,1030,49],{}," to define the stale window: ",[18,1033,1034],{},"Cache-Control: public, max-age=3600, stale-while-revalidate=86400",[14,1036,29,1037,1039,1040,1042,1043,1047],{},[18,1038,247],{}," directive signals that the resource will never change during its freshness lifetime. Browser support is universal in modern engines, but it requires strict content-hashed filenames. When ",[18,1041,247],{}," conflicts with Service Worker fetch handlers, ensure your ",[66,1044,1046],{"href":1045},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002F","Service Worker Caching Strategies"," explicitly bypass network fallback for hashed routes to prevent double-fetching.",[14,1049,1050,1052,1053,1055,1056,425,1059,1062,1063,1065],{},[74,1051,76],{}," Test ",[18,1054,1024],{}," background fetch concurrency limits using Chrome DevTools > Network > Throttling. Verify cache invalidation via ",[18,1057,1058],{},"ETag",[18,1060,1061],{},"Last-Modified"," fallback when ",[18,1064,49],{}," expires.",[14,1067,1068,1070,1071,1073,1074,1077,1078,1081],{},[74,1069,137],{}," ",[18,1072,1024],{}," background fetch timeout ",[18,1075,1076],{},"\u003C=500ms",". Cache invalidation propagation ",[18,1079,1080],{},"\u003C2 seconds"," across edge nodes after origin purge.",[23,1083,1085],{"id":1084},"common-implementation-pitfalls","Common Implementation Pitfalls",[1087,1088,1089,1100,1117,1133,1142],"ul",{},[1090,1091,1092,1095,1096,1099],"li",{},[74,1093,1094],{},"Over-caching HTML\u002FAPIs:"," Applying ",[18,1097,1098],{},"max-age=31536000"," to HTML or dynamic JSON endpoints causes stale content delivery without revalidation, breaking routing and personalization.",[1090,1101,1102,1070,1111,1113,1114,1116],{},[74,1103,1104,1107,1108,1110],{},[18,1105,1106],{},"no-cache"," vs ",[18,1109,35],{}," Confusion:",[18,1112,1106],{}," stores the response but requires validation before reuse. ",[18,1115,35],{}," bypasses caching entirely. Misapplying these destroys performance budgets.",[1090,1118,1119,1125,1126,611,1129,1132],{},[74,1120,1121,1122,1124],{},"Missing ",[18,1123,618],{}," Headers:"," Omitting ",[18,1127,1128],{},"Vary: Accept-Encoding",[18,1130,1131],{},"Vary: User-Agent"," when serving compressed or device-specific content leads to cache poisoning and broken layouts.",[1090,1134,1135,1138,1139,1141],{},[74,1136,1137],{},"Dashboard TTL Overrides:"," Relying on CDN UI overrides without aligning origin ",[18,1140,20],{}," causes cache inconsistency across edge nodes and complicates debugging.",[1090,1143,1144,1149,1150,1152],{},[74,1145,1146,1148],{},[18,1147,247],{}," Without Hashing:"," Setting ",[18,1151,247],{}," on non-hashed filenames results in permanent delivery of outdated assets until manual cache purges are executed.",[23,1154,1156],{"id":1155},"frequently-asked-questions","Frequently Asked Questions",[14,1158,1159,1169,1170,1173,1174,1176,1177,1180,1181,1184,1185,1187],{},[74,1160,1161,1162,1165,1166,1168],{},"How does ",[18,1163,1164],{},"Cache-Control: max-age=0"," differ from ",[18,1167,1106],{},"?","\nBoth directives force revalidation, but ",[18,1171,1172],{},"max-age=0"," allows the browser to store the response and check freshness immediately on subsequent requests. ",[18,1175,1106],{}," explicitly requires origin validation before serving any cached copy. Use ",[18,1178,1179],{},"max-age=0, must-revalidate"," for HTML to enable conditional requests (",[18,1182,1183],{},"304 Not Modified","), and reserve ",[18,1186,1106],{}," for highly sensitive payloads where storage is permitted but validation is mandatory.",[14,1189,1190,1197,1198,1200,1201,1203,1204,1206],{},[74,1191,1192,1193,1196],{},"Can I safely use ",[18,1194,1195],{},"Cache-Control: immutable"," for all versioned assets?","\nYes, provided you enforce content-hashed filenames at build time. ",[18,1199,247],{}," tells the browser to skip validation entirely for the duration of ",[18,1202,49],{},". If a 404 occurs due to a broken hash reference, the browser will fallback to a network request. Pair ",[18,1205,247],{}," with strict build pipeline validation and automated 404 monitoring to prevent broken asset delivery.",[14,1208,1209,1215,1216,1219,1220,1223,1224,1226],{},[74,1210,1211,1212,1214],{},"Why is my CDN ignoring my origin ",[18,1213,20],{}," headers?","\nCDNs often apply default caching rules based on status codes, file extensions, or dashboard configurations. Verify that ",[18,1217,1218],{},"302"," redirects or ",[18,1221,1222],{},"4xx"," responses aren't being cached by default. Ensure ",[18,1225,618],{}," headers align with edge cache keys, disable automatic TTL overrides in your CDN dashboard, and confirm your origin isn't stripping headers via proxy middleware.",[14,1228,1229,1234,1236,1237,1239,1240,1242],{},[74,1230,1161,1231,1233],{},[18,1232,809],{}," impact LCP and TTFB?",[18,1235,1024],{}," serves cached content instantly, typically achieving sub-50ms TTFB while fetching fresh data asynchronously. This decouples perceived performance from network latency, directly improving LCP for above-the-fold assets. Apply ",[18,1238,1024],{}," when content volatility is low-to-medium and user session state doesn't require strict consistency. For highly dynamic data, prefer strict ",[18,1241,49],{}," with short TTLs and background polling.",[23,1244,1246],{"id":1245},"related-pages","Related Pages",[1087,1248,1249],{},[1090,1250,1251],{},"Reducing cookie payload size for faster requests",[1253,1254,1255],"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 .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 .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 .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 pre.shiki code .s1o6E, html code.shiki .s1o6E{--shiki-default:#72F088;--shiki-default-font-weight:bold;--shiki-dark:#72F088;--shiki-dark-font-weight:bold;--shiki-light:#024C1A;--shiki-light-font-weight:bold}html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}",{"title":92,"searchDepth":120,"depth":120,"links":1257},[1258,1259,1260,1261,1262,1263,1264,1265,1266],{"id":25,"depth":120,"text":26},{"id":149,"depth":120,"text":150},{"id":580,"depth":120,"text":581},{"id":787,"depth":120,"text":788},{"id":971,"depth":120,"text":972},{"id":1016,"depth":120,"text":1017},{"id":1084,"depth":120,"text":1085},{"id":1155,"depth":120,"text":1156},{"id":1245,"depth":120,"text":1246},"Define the engineering scope: precise directive syntax, browser\u002FCDN parsing precedence, and measurable impact on Core Web Vitals. This guide prioritizes actionable configuration over theoretical definitions, establishing diagnostic workflows and explicit performance thresholds for frontend asset delivery. Cache-Control operates as the single source of truth for cache lifecycle management across origin servers, edge networks, and client browsers. Misconfiguration directly degrades Time to First Byte (TTFB), inflates bandwidth costs, and introduces cache poisoning vectors. The following sections provide production-ready templates, validation scripts, and metric-driven optimization targets.","md",{},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained",{"title":5,"description":1267},"advanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Findex","lhV-Pj1XpuA1v6d8yGtQw0qN865rZvo8YLsCK_lInaI",[1275,1279],{"title":1276,"path":1277,"stem":1278,"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",{"title":238,"path":1280,"stem":1281,"children":-1},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Fsetting-up-immutable-cache-headers-for-hashed-assets","advanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Fsetting-up-immutable-cache-headers-for-hashed-assets\u002Findex",1777925998242]