CINXE.COM

<!DOCTYPE html> <html lang=en-GB class="page page--post"> <script>performance.mark('headStart');</script> <meta charset=UTF-8> <meta name=viewport content="width=device-width, minimum-scale=1.0"> <title>What Is the Maximum max-age? – Harry Roberts – Web Performance Consultant</title> <link rel=preconnect href=https://res.cloudinary.com> <link rel=preconnect href=https://cdn.carbonads.com> <link rel=preconnect href=https://srv.carbonads.net> <link rel=preconnect href=https://cdn.syndication.twimg.com> <link rel=preconnect href=https://syndication.twitter.com> <link rel=preconnect href=https://csswizardry.com crossorigin> <script> LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)&&"function"===typeof(PerformanceLongTaskTiming)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({type:["longtask"]})}catch(e){}}; LUX = window.LUX || {}; LUX.samplerate = 100; LUX.label = 'Post'; </script> <script> (function(t,e,n,r){function a(){return e&&e.now?e.now():null}if(!n.version){n._events=[];n._errors=[];n._metadata={};n._urlGroup=null;window.RM=n;n.install=function(e){n._options=e;var a=t.createElement("script");a.async=true;a.crossOrigin="anonymous";a.src=r;var o=t.getElementsByTagName("script")[0];o.parentNode.insertBefore(a,o)};n.identify=function(t,e){n._userId=t;n._identifyOptions=e};n.sendEvent=function(t,e){n._events.push({eventName:t,metadata:e,time:a()})};n.setUrlGroup=function(t){n._urlGroup=t};n.track=function(t,e){n._errors.push({error:t,metadata:e,time:a()})};n.addMetadata=function(t){n._metadata=Object.assign(n._metadata,t)}}})(document,window.performance,window.RM||{},"https://cdn.requestmetrics.com/agent/current/rm.js"); RM.install({ token: "j5ss3vj:q7xf9tv" }); </script> <script>performance.mark('cssStart');</script> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,figure,table,th,td,caption,hr{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}u,ins{text-decoration:none}ins{border-bottom:1px solid}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}h1,h2,h3,h4,h5,h6,ul,ol,dl,blockquote,p,address,hr,table,fieldset,figure,pre,details,[open]>summary,.page-head,.promo__block{margin-bottom:24px;margin-bottom:1.5rem}ul,ol,dd{margin-left:48px;margin-left:3rem}html{font-size:1em;line-height:1.5;background-color:#f9f9f9;color:#333;overflow-y:scroll;min-height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@view-transition{navigation:auto}html{font-family:system-ui,sans-serif;font-weight:400;scroll-behavior:smooth}h1,.alpha{font-size:36px;font-size:2.25rem;line-height:1.333333333}h2,.beta{font-size:30px;font-size:1.875rem;line-height:1.6}h3,.gamma{font-size:24px;font-size:1.5rem;line-height:1}h4,.delta{font-size:20px;font-size:1.25rem;line-height:1.2}h5,.epsilon{font-size:16px;font-size:1rem;line-height:1.5}h6,.zeta{font-size:14px;font-size:.875rem;line-height:1.714285714}h1,h2,h3,h4,h5,h6{font-weight:300;color:#f43059;text-wrap:balance}@media screen and (min-width: 45em){h1{font-size:72px;font-size:4.5rem;line-height:1;font-weight:900;border-left:24px solid #f43059;border-radius:3px;margin-left:-36px;padding-left:12px}}h2:has(>img){line-height:1}.heading{display:block;font-size:22px;font-size:1.375rem;line-height:1.090909091;color:#f43059}.heading-sub{display:block;font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;margin-bottom:0;color:#333}a,strong,b,dt{font-weight:600}p{text-wrap:pretty}code,kbd,samp,output{color:#859900;font-family:"Operator Mono", Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;font-style:normal;word-break:break-word}a:hover code,a:active code,a:focus code,a:hover kbd,a:active kbd,a:focus kbd,a:hover samp,a:active samp,a:focus samp,a:hover output,a:active output,a:focus output{text-decoration:underline}pre{white-space:pre;word-wrap:normal;overflow:auto;padding:12px;background-color:#333;border-radius:3px}@media screen and (min-width: 45em){pre{margin-right:-12px;margin-left:-12px}}pre,pre code,pre kbd,pre samp{color:#fff;word-break:keep-all}li pre{margin-top:1.5rem}var{font-family:Hoefler Text, Georgia, serif;line-height:1;font-style:italic}figure{counter-increment:figure}@media screen and (min-width: 1380px){figure{margin-left:-128px}}figure>img{border-radius:3px}figcaption{font-size:12px;font-size:.75rem;line-height:2}@media screen and (min-width: 1380px){figcaption{margin-left:128px}}figcaption::before{content:"Fig. " counter(figure) ": ";font-weight:bold}hr{border:none;border-bottom:1px solid #ddd;margin-bottom:23px}pre mark{background:none;border-bottom:1px solid;color:inherit}.text-banner{text-align:center;text-wrap:balance}s,del{opacity:0.75}ins{border-bottom:none;background-color:#ffc}ol ol{list-style-type:lower-alpha}ol ol ol{list-style-type:lower-roman}ol ul{list-style-type:disc}a{text-decoration:none;color:#f43059;text-decoration-skip:ink}a:hover,a:active,a:focus{text-decoration:underline}.link-secret{color:inherit;font-weight:400}.link-secret:hover,.link-secret:active,.link-secret:focus{color:#f43059;text-decoration:none}@supports (position: sticky){@media screen and (min-height: 75em){:target{scroll-margin-top:120px}}}li>ul,li>ol{margin-bottom:0}img{max-width:100%;font-style:italic;vertical-align:middle;height:auto;background-repeat:no-repeat;background-size:cover;shape-margin:0.75rem}video{max-width:100%;vertical-align:middle}q{font-style:italic;quotes:"‘" "’" "“" "”"}q:before{content:open-quote}q:after{content:close-quote}blockquote{margin-right:48px;margin-left:48px;font-style:italic;quotes:"“" "”"}blockquote p{text-indent:-0.45em}blockquote p:before{content:open-quote}blockquote p:after{content:no-close-quote}blockquote p:last-of-type{margin-bottom:0}blockquote p:last-of-type:after{content:close-quote}blockquote q{quotes:"‘" "’"}blockquote q:before{content:open-quote}blockquote q:after{content:close-quote}label{font-size:12px;font-size:.75rem;line-height:2;font-weight:600;cursor:pointer}table{width:100%;font-size:12px;font-size:.75rem;line-height:2;font-variant-numeric:tabular-nums}@media screen and (min-width: 45em){table{font-size:16px;font-size:1rem;line-height:1.5}}th{font-weight:600;text-align:left}th,td{padding:6px}details+details{padding-top:24px;border-top:1px solid #ddd}summary{color:#f43059;font-weight:600;cursor:pointer;text-decoration:none}summary:hover,summary:focus,[open]>summary{text-decoration:underline}.wrapper{max-width:1100px;margin:0 auto;padding-right:12px;padding-left:12px}@media screen and (min-width: 45em){.wrapper{padding-right:24px;padding-left:24px}}.wrapper--wide{max-width:1280px}.wrapper--unconstrained{max-width:none}.btn{display:inline-block;vertical-align:middle;font:inherit;text-align:center;margin:0;cursor:pointer;overflow:visible;padding:10px 22px;background-color:#f43059;border:2px solid #f43059;border-radius:3px}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding:4px 10px}.btn--full{width:100%}.layout{list-style:none;margin:0;padding:0;margin-left:-24px}.layout__item{display:inline-block;padding-left:24px;vertical-align:top;width:100%}.layout--large{margin-left:-48px}.layout--large>.layout__item{padding-left:48px}.layout--middle>.layout__item{vertical-align:middle}.layout--bottom>.layout__item{vertical-align:bottom}.box{display:block;padding:24px}.box>:last-child{margin-bottom:0}.media{display:block}.media__img{float:left;margin-right:24px}.media__img>img{display:block}.media__body{overflow:hidden;display:block}.media__body,.media__body>:last-child{margin-bottom:0}.flag{display:table;width:100%}.flag__img,.flag__body{display:table-cell;vertical-align:middle}.flag__img{padding-right:24px}.flag__img>img{display:block;max-width:none}.flag__body{width:100%}.flag__body,.flag__body>:last-child{margin-bottom:0}.flag--rev{direction:rtl}.flag--rev>.flag__img,.flag--rev>.flag__body{direction:ltr}.flag--rev>.flag__img{padding-right:0;padding-left:24px}@media screen and (max-width: 479px){.flag--responsive{direction:ltr}.flag--responsive,.flag--responsive>.flag__img,.flag--responsive>.flag__body{display:block}.flag--responsive>.flag__img{padding-right:0;padding-left:0;margin-bottom:24px}}.flag__img{white-space:nowrap}.list-ui,.list-ui__item,.list-ui>li{border:0 solid #ddd}.list-ui{margin:0;padding:0;list-style:none;border-top-width:1px}.list-ui__item,.list-ui>li{padding:24px;border-bottom-width:1px}.list-ui--small>.list-ui__item,.list-ui.list-ui--small>li{padding:12px}.list-ui__title{display:block;font-size:12px;font-size:.75rem;line-height:2;font-weight:600;color:#999;margin-bottom:0}.o-list-inline{margin-left:0}.o-list-inline>li{display:inline-block}.o-list-inline--spaced>li{padding:0.75rem}.page-head{border-style:solid;border-width:6px 0 1px;border-top-color:#f43059;border-bottom-color:#f2f2f2;padding-top:12px;padding-bottom:12px;background-color:#fff}@media screen and (min-width: 45em){.page-head{padding-top:24px;padding-bottom:24px}}@supports (position: sticky){@media screen and (min-height: 75em){.page-head{position:sticky;top:0;background-color:rgba(255,255,255,0.95);z-index:2}}}.band{padding-top:24px;padding-bottom:24px;content-visibility:auto;contain-intrinsic-size:1px 1000px}@media screen and (min-width: 64em){.band{padding-top:48px;padding-bottom:48px}}.band--large{padding:48px}.band--highlight{background-color:#fff}.band--tint{background-color:#f2f2f2}.band--dark{background-color:#333}.band--dark,.band--dark a,.band--dark code{color:#fff}.band--attention{background-color:#f43059;color:#fff}.band__title{text-align:center;font-size:16px;font-size:1rem;line-height:1.5;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);-webkit-font-smoothing:auto}.promo{padding-bottom:0;text-align:center}@media screen and (min-width: 64em){.promo{padding-bottom:24px}}.promo__links{text-align:center}@media screen and (min-width: 45em){.promo__links-spacer{padding-right:1.5em;padding-left:1.5em}}.page-head--masthead .site-nav{position:absolute;top:0;right:12px;left:12px}@media screen and (min-width: 45em){.page-head--masthead .site-nav{top:0;right:24px;left:24px}}.site-nav__home-link{display:block;float:left;position:relative;z-index:3;will-change:transform}@media screen and (min-width: 45em){.site-nav__home-link{position:static}}.site-nav__logo{display:block}.site-nav__logo-fill{fill:#f43059;transition:fill 0.2s}.site-nav.is-open .site-nav__logo-fill{fill:#fff}.page-head--masthead .site-nav__logo-fill{fill:#fff}.site-nav__opener,.site-nav__closer{font-size:12px;font-size:.75rem;line-height:2;line-height:64px;text-transform:uppercase;font-weight:bold;padding:0;background:none;border:none}.site-nav__opener:hover,.site-nav__closer:hover,.site-nav__opener:focus,.site-nav__closer:focus{text-decoration:none}.site-nav__opener{color:#f43059;float:right}.page-head--masthead .site-nav__opener{color:#fff}@media screen and (min-width: 45em){.site-nav__opener{display:none}}.site-nav__list{margin:0;padding:0;list-style:none;position:fixed;top:54px;right:0;bottom:0;left:0;z-index:2;overflow:scroll;transform:translateX(100%);transition:0.2s;will-change:transform;background-color:#333;contain:layout;content-visibility:hidden}@supports (backdrop-filter: blur(5px)){.site-nav__list{background-color:rgba(51,51,51,0.8);backdrop-filter:blur(5px)}}.is-open .site-nav__list{content-visibility:visible;transform:none}@media screen and (min-width: 45em){.site-nav__list{content-visibility:visible;position:relative;top:auto;right:auto;bottom:auto;left:auto;float:right;background-color:transparent;overflow:visible;backdrop-filter:none;transform:none}}.site-nav__item{border-bottom:1px solid rgba(255,255,255,0.1)}.site-nav__item:last-child{border-bottom:none}@media screen and (min-width: 45em){.site-nav__item{position:relative;border-bottom:none;float:left}.site-nav__item.has-sub-menu>a{transition:0.2s}.site-nav__item.has-sub-menu:hover>a{transform:translateY(-2px)}.site-nav__sub-menu .site-nav__item{float:none}.site-nav__sub-menu .site-nav__item+.site-nav__item{border-top:1px solid #ddd}}.site-nav__item--closer{text-align:right}@media screen and (min-width: 45em){.site-nav__item--closer{display:none}}.site-nav__closer{width:100%;text-align:right}.site-nav__closer.site-nav__closer.site-nav__closer:hover,.site-nav__closer.site-nav__closer.site-nav__closer:active,.site-nav__closer.site-nav__closer.site-nav__closer:focus{text-decoration:none}.site-nav__sub-menu{list-style:none;margin-left:0;padding-left:24px}@media screen and (min-width: 45em){.site-nav__sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-10px);z-index:1;padding-left:0;text-align:center;white-space:nowrap;background-color:#fff;border-radius:3px;border:1px solid #ddd;box-shadow:3px 3px 0 rgba(0,0,0,0.1);visibility:hidden;opacity:0;transition:0.333s}.site-nav__item:hover .site-nav__sub-menu{opacity:1;visibility:visible;will-change:opacity;transform:translateX(-50%) translateY(0)}.site-nav__sub-menu:before,.site-nav__sub-menu:after{content:"";position:absolute;bottom:100%;left:50%}.site-nav__sub-menu:before{border:12px solid transparent;border-bottom-color:#ddd;margin-left:-12px}.site-nav__sub-menu:after{border:11px solid transparent;border-bottom-color:#fff;margin-left:-11px}}.site-nav__link{display:block;padding:12px;color:#fff}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{text-decoration:underline;color:#fff}@media screen and (min-width: 45em){.site-nav__link{line-height:64px;color:#333;padding-top:0;padding-bottom:0}.site-nav__link:hover,.site-nav__link:active,.site-nav__link:focus{color:#f43059;text-decoration:none}}.page-head--masthead .site-nav__link,.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{color:#fff}.page-head--masthead .site-nav__link:hover,.page-head--masthead .site-nav__link:active,.page-head--masthead .site-nav__link:focus{text-decoration:underline}.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#fff;text-decoration:underline}@media screen and (min-width: 45em){.page--about .site-nav__about,.page--case-studies .site-nav__case-studies,.page--speaking .site-nav__speaking,.page--services .site-nav__services,.page--contact .site-nav__contact{color:#f43059;position:relative;text-decoration:none}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before,.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{content:"";position:absolute;left:50%;pointer-events:none;border-style:solid;border-color:transparent}.page--about .site-nav__about:before,.page--case-studies .site-nav__case-studies:before,.page--speaking .site-nav__speaking:before,.page--services .site-nav__services:before,.page--contact .site-nav__contact:before{border-width:12px;border-bottom-color:#f2f2f2;margin-left:-12px;bottom:-24px}.page--about .site-nav__about:after,.page--case-studies .site-nav__case-studies:after,.page--speaking .site-nav__speaking:after,.page--services .site-nav__services:after,.page--contact .site-nav__contact:after{border-width:11px;border-bottom-color:#f9f9f9;margin-left:-11px;bottom:-25px}}.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:underline}@media screen and (min-width: 45em){.page--workshops .site-nav__workshops,.page--code-reviews .site-nav__code-reviews,.page--consultancy .site-nav__consultancy,.page--downloads .site-nav__downloads,.page--sentinel .site-nav__sentinel,.page--masterclasses .site-nav__masterclasses{text-decoration:none;color:#f43059}}.page--home .site-nav__home{text-decoration:underline}.site-nav__sub-link{display:block;padding:12px;color:#fff}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:underline}@media screen and (min-width: 45em){.site-nav__sub-link{font-weight:400;color:#333}.site-nav__sub-link:hover,.site-nav__sub-link:active,.site-nav__sub-link:focus{text-decoration:none;color:#f43059}}.c-nav-secondary{margin-left:0;list-style:none;display:table;table-layout:fixed;width:100%;text-align:center;font-size:12px;font-size:.75rem;line-height:1.833333333;border:1px solid #999;border-radius:3px}.c-nav-secondary__item{display:table-cell}.c-nav-secondary__item+.c-nav-secondary__item{border-left:1px solid #999}.c-nav-secondary__link{display:block;padding-top:12px;padding-bottom:12px;color:#333}.c-nav-secondary__link.is-current{color:#fff;background-color:#999;text-decoration:none;cursor:default;pointer-events:none}.btn{font-weight:600;transition:0.2s;position:relative;will-change:transform;z-index:1}.btn:hover,.btn:active,.btn:focus{background-color:#e50c39;border-color:#e50c39;transform:translateY(-1px)}.btn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 4px 0 #000;opacity:0;will-change:opacity}.btn:hover::before,.btn:active::before,.btn:focus::before{opacity:0.1}.btn.btn.btn::after{display:none}.btn--secondary{background:none;color:#f43059}.btn--secondary:hover,.btn--secondary:active,.btn--secondary:focus{background:none;color:#e50c39}.btn--positive{font-weight:400}.btn--positive,.btn--positive:hover,.btn--positive:active,.btn--positive:focus{background-color:#3f990f;border-color:#3f990f}.btn--negative{font-weight:400}.btn--negative,.btn--negative:hover,.btn--negative:active,.btn--negative:focus{background-color:#9f102e;border-color:#9f102e}.box{border-radius:3px}.box--highlight{background-color:#fff;border-bottom:1px solid #ddd}.box--tint{background-color:#f2f2f2}.post__date{display:block;color:#999;margin-bottom:0}.post__title{margin-bottom:0}.post__title>a{font-weight:400}.pull-quote{font-size:18px;font-size:1.125rem;line-height:1.333333333;font-style:normal;color:#666;padding-left:12px;border-left:12px solid #f43059;border-radius:3px;margin-right:0;margin-left:0}@media screen and (min-width: 45em){.pull-quote{margin-left:-24px}}.pull-quote__source{font-style:normal}.pull-quote--banner{max-width:27em;padding:0 12px;text-indent:0;border-left:none;margin:0 auto;color:#333;font-style:normal}@media screen and (min-width: 45em){.pull-quote--banner{font-size:32px;font-size:2rem;line-height:1.4}}.pull-quote--context{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context{width:50%;float:left;margin-right:24px;padding-right:12px;padding-left:0;border-right:12px solid #f43059;border-left:none;text-align:right}}.pull-quote--context-alt{font-size:20px;font-size:1.25rem;line-height:1.2;font-style:italic}@media screen and (min-width: 45em){.pull-quote--context-alt{width:50%;float:right;margin-left:24px}}.annotate{position:relative}.annotate__image{display:block;border-radius:3px}.annotate__list{list-style:none;margin:0;position:absolute;top:0;right:0;bottom:0;left:0}.annotate__item{position:absolute;width:5%;height:5%;overflow:hidden;white-space:nowrap;text-indent:100%;cursor:help;border-width:2px;border-style:solid;border-color:transparent;border-radius:3px;transition:0.2s}.annotate:hover .annotate__item{border-color:#ccc;border-color:rgba(255,255,255,0.5)}.annotate:hover .annotate__item:hover{z-index:1;border-color:#fff}.annotate__caption{position:relative;z-index:1}.adpacks{min-height:216px}.carbon-wrap{display:block;text-align:center}.carbon-img{display:block;margin-bottom:6px}.carbon-img>img{border-radius:3px}.carbon-img:hover+.carbon-text{text-decoration:underline}.carbon-text{overflow:hidden;display:block;color:#666;text-wrap:balance}.carbon-poweredby{display:block;text-align:center;font-size:12px;font-size:.75rem;line-height:2;text-transform:uppercase;color:#999;letter-spacing:0.01em}.c-label{display:block}.c-input-text{border:2px solid #ddd;min-width:25ch;outline:none;transition:border-color 0.2s;padding:11px 6px;vertical-align:middle;border-radius:3px}.c-input-text:active,.c-input-text:focus{border-color:#f43059}.c-newsletter{text-align:center}.c-newsletter__title{font-size:16px;font-size:1rem;line-height:1.5;font-weight:600;color:inherit;margin-bottom:0}.c-newsletter__text{font-size:12px;font-size:.75rem;line-height:2}.c-newsletter__email{width:100%;margin-bottom:24px;text-align:center}@media screen and (min-width: 45em){.c-newsletter__email{width:auto;margin-bottom:0;min-width:40ch}}.c-newsletter__submit{width:100%}@media screen and (min-width: 45em){.c-newsletter__submit{width:auto}}.c-video{position:relative;padding-bottom:56.25%}@media screen and (min-width: 1380px){.c-video{padding-bottom:75%}}.c-video__media{position:absolute;top:0;left:0;width:100%;height:100%}.footnotes{font-size:12px;font-size:.75rem;line-height:2}.footnotes p{margin-bottom:0}.twitter-tweet-rendered{margin-top:0 !important;margin-right:auto;margin-bottom:24px !important;margin-left:auto}.c-youtube-embed{max-width:100%}.c-youtube-embed,.c-spotify-embed{display:block;margin-right:auto;margin-bottom:24px;margin-left:auto}.c-highlight{padding:24px;background-color:#ffc}.c-highlight,.c-highlight a{color:#36393a}.c-highlight::selection,.c-highlight ::selection{color:#ffc;background-color:#36393a}.c-highlight a{text-decoration:underline}.c-highlight>:last-child{margin-bottom:0}.c-highlight--small{padding:12px}.c-highlight--ribbon{text-align:center}.s-post p,.s-post li{text-wrap:pretty}.s-post thead{border-bottom:2px solid #ddd}.s-post tbody tr:nth-of-type(even){background-color:rgba(0,0,0,0.05)}.s-post iframe{max-width:100%;width:100%;border:none;margin-bottom:24px}.s-post :target{background-color:#ffc}.s-post>h2:nth-of-type(2) ~ p{content-visibility:auto;contain-intrinsic-size:1px 250px}.s-post a[href^="https://csswizardry.com"]::after,.s-post a[href^="/"]::after{content:"";display:inline-block;width:1ch;height:1ch;background-image:url(/icon.png);background-size:cover;margin-left:0.1ch;vertical-align:super}.s-post a:visited:not(.btn){color:#6a0dad}.clearfix:after,.box:after,.media:after,.site-nav:after{content:"";display:table;clear:both}.one-whole{width:100% !important}.one-half,.two-quarters,.three-sixths,.four-eighths,.five-tenths,.six-twelfths{width:50% !important}.one-third,.two-sixths,.three-ninths,.four-twelfths{width:33.3333333% !important}.two-thirds,.four-sixths,.six-ninths,.eight-twelfths{width:66.6666666% !important}.one-quarter,.two-eighths,.three-twelfths{width:25% !important}.three-quarters,.six-eighths,.nine-twelfths{width:75% !important}.one-fifth,.two-tenths{width:20% !important}.two-fifths,.four-tenths{width:40% !important}.three-fifths,.six-tenths{width:60% !important}.four-fifths,.eight-tenths{width:80% !important}.one-sixth,.two-twelfths{width:16.6666666% !important}.five-sixths,.ten-twelfths{width:83.3333333% !important}.one-eighth{width:12.5% !important}.three-eighths{width:37.5% !important}.five-eighths{width:62.5% !important}.seven-eighths{width:87.5% !important}.one-ninth{width:11.1111111% !important}.two-ninths{width:22.2222222% !important}.four-ninths{width:44.4444444% !important}.five-ninths{width:55.5555555% !important}.seven-ninths{width:77.7777777% !important}.eight-ninths{width:88.8888888% !important}.one-tenth{width:10% !important}.three-tenths{width:30% !important}.seven-tenths{width:70% !important}.nine-tenths{width:90% !important}.one-twelfth{width:8.3333333% !important}.five-twelfths{width:41.6666666% !important}.seven-twelfths{width:58.3333333% !important}.eleven-twelfths{width:91.6666666% !important}@media screen and (min-width: 45em){.lap-and-up-one-half{width:50%}.lap-and-up-one-quarter{width:25%}}@media screen and (min-width: 64em){.desk-one-third{width:33.333333333%}.desk-two-thirds{width:66.666666666%}.desk-three-fifths{width:60%}.desk-three-tenths{width:30%}.desk-push-one-tenth{position:relative;left:10%}}.m{margin:24px !important}.mt{margin-top:24px !important}.mr{margin-right:24px !important}.mb{margin-bottom:24px !important}.ml{margin-left:24px !important}.mh{margin-right:24px !important;margin-left:24px !important}.mv{margin-top:24px !important;margin-bottom:24px !important}.m\+\+{margin:96px !important}.mt\+\+{margin-top:96px !important}.mr\+\+{margin-right:96px !important}.mb\+\+{margin-bottom:96px !important}.ml\+\+{margin-left:96px !important}.mh\+\+{margin-right:96px !important;margin-left:96px !important}.mv\+\+{margin-top:96px !important;margin-bottom:96px !important}.m0{margin:0 !important}.mt0{margin-top:0 !important}.mr0{margin-right:0 !important}.mb0{margin-bottom:0 !important}.ml0{margin-left:0 !important}.mh0{margin-right:0 !important;margin-left:0 !important}.mv0{margin-top:0 !important;margin-bottom:0 !important}.hide{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}@media screen and (max-width: 44.9375em){.hide-palm{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em) and (max-width: 63.9375em){.hide-lap{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 45em){.hide-lap-and-up{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (max-width: 63.9375em){.hide-portable{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}@media screen and (min-width: 64em){.hide-desk{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}}::selection{color:#fff;background-color:#f43059}.u-text-prominent{font-size:22px;font-size:1.375rem;line-height:1.090909091;font-weight:600;text-align:center}.u-color-brand{color:#f43059 !important}.u-color-positive{color:#3f990f !important}.u-color-negative{color:#9f102e !important} /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.highlight{background-color:#002b36;color:#93a1a1;border-radius:3px}@media screen and (min-width: 45em){.highlight{margin-right:-12px;margin-left:-12px}}.highlight pre{background-color:transparent;margin-right:auto;margin-left:auto}.highlight .c{color:#586e75}.highlight .err{color:#93a1a1}.highlight .g{color:#93a1a1}.highlight .k{color:#859900}.highlight .l{color:#93a1a1}.highlight .n{color:#93a1a1}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#93a1a1}.highlight .cm{color:#586e75}.highlight .cp{color:#859900}.highlight .c1{color:#586e75}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#93a1a1;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go{color:#93a1a1}.highlight .gp{color:#93a1a1}.highlight .gs{color:#93a1a1;font-weight:bold}.highlight .gu{color:#cb4b16}.highlight .gt{color:#93a1a1}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn{color:#859900}.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#93a1a1}.highlight .m{color:#2aa198}.highlight .s{color:#2aa198}.highlight .na{color:#93a1a1}.highlight .nb{color:#B58900}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ni{color:#cb4b16}.highlight .ne{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl{color:#93a1a1}.highlight .nn{color:#93a1a1}.highlight .nx{color:#93a1a1}.highlight .py{color:#93a1a1}.highlight .nt{color:#268bd2}.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#93a1a1}.highlight .mf{color:#2aa198}.highlight .mh{color:#2aa198}.highlight .mi{color:#2aa198}.highlight .mo{color:#2aa198}.highlight .sb{color:#586e75}.highlight .sc{color:#2aa198}.highlight .sd{color:#93a1a1}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#93a1a1}.highlight .si{color:#2aa198}.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1{color:#2aa198}.highlight .ss{color:#2aa198}.highlight .bp{color:#268bd2}.highlight .vc{color:#268bd2}.highlight .vg{color:#268bd2}.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}.highlight .m{margin:0 !important}.highlight .p{padding:0 !important} /*# sourceMappingURL=components.syntax.css.map */ </style> <script> performance.mark('cssEnd'); performance.measure('cssTime', 'cssStart', 'cssEnd'); </script> <script src="https://www.googletagmanager.com/gtag/js?id=G-DNCL1RY4GT" async></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DNCL1RY4GT'); </script> <script src=https://cdn.speedcurve.com/js/lux.js?id=47684395 defer></script> <script src=https://platform.twitter.com/widgets.js defer></script> <meta name=twitter:card content=summary_large_image> <meta name=twitter:site content=@csswizardry> <meta name=twitter:domain content=csswizardry.com> <meta name=twitter:creator content=@csswizardry> <meta name=twitter:title property=og:title content="What Is the Maximum max-age? – CSS Wizardry"> <meta name=twitter:description property=og:description content="We usually set max-age directives to a year; can we go longer?"> <meta name=twitter:image property=og:image content=https://csswizardry.com/img/css/masthead-small.jpg> <link rel=alternate type=application/atom+xml href=https://feeds.feedburner.com/csswizardry> <link rel=icon href=/icon.png> <link rel=apple-touch-icon href=/icon.png> <meta name=apple-mobile-web-app-title content=csswizardry> <meta name=description content="We usually set max-age directives to a year; can we go longer?"> <link rel=canonical href="https://csswizardry.com/2023/10/what-is-the-maximum-max-age/"> <meta property=og:url content="https://csswizardry.com/2023/10/what-is-the-maximum-max-age/"> <meta name=theme-color content=#f43059> <link rel=manifest href=/manifest.json> <meta name=format-detection content="telephone=no"> <script> performance.mark('headEnd'); performance.measure('headTime', 'headStart', 'headEnd'); </script> <nav class=hide> <a href=" #section:main ">Skip to main content</a> </nav> <section class="c-highlight c-highlight--small c-highlight--ribbon"> <a href="/masterclasses/">Arrange a Masterclass</a> </section> <header class=page-head> <div class=wrapper> <nav class=site-nav id=jsSiteNav data-sctrack=site-nav> <a href=/ class=site-nav__home-link data-sctrack=logo id=logo elementtiming=siteLogo> <svg class=site-nav__logo width=64 height=64 xmlns="http://www.w3.org/2000/svg"><title>CSS Wizardry</title><path d="M.234 44.003v-41.002c0-1.664 1.344-3.001 3.001-3.001h57.998c1.664 0 3.001 1.344 3.001 3.001v39.536c-1.803-1.102-3.911-1.653-6.324-1.653-3.356 0-5.9.788-7.632 2.363-1.732 1.576-2.598 3.554-2.598 5.936 0 2.61.896 4.528 2.688 5.755 1.058.734 2.971 1.413 5.737 2.039l2.814.631c1.648.361 2.857.776 3.626 1.245.77.481 1.155 1.161 1.155 2.039 0 1.503-.776 2.532-2.327 3.085l-.063.022-.078.001h-5.853c-.773-.274-1.385-.684-1.836-1.232-.493-.601-.824-1.509-.992-2.724h-5.304c0 1.491.288 2.809.864 3.956h-4.483c.524-1.058.786-2.232.786-3.523 0-2.369-.794-4.18-2.381-5.43-1.022-.806-2.538-1.449-4.546-1.93l-4.583-1.101c-1.768-.421-2.923-.788-3.464-1.101-.842-.469-1.263-1.179-1.263-2.129 0-1.034.427-1.84 1.281-2.418.854-.577 1.997-.866 3.428-.866 1.287 0 2.363.223 3.229.668 1.299.674 1.997 1.81 2.093 3.41h5.34c-.096-2.827-1.134-4.982-3.112-6.468-1.979-1.485-4.369-2.228-7.172-2.228-3.356 0-5.9.788-7.632 2.363-1.732 1.576-2.598 3.554-2.598 5.936 0 2.61.896 4.528 2.688 5.755 1.058.734 2.971 1.413 5.737 2.039l2.814.631c1.648.361 2.857.776 3.626 1.245.77.481 1.155 1.161 1.155 2.039 0 1.503-.776 2.532-2.327 3.085l-.066.023h-5.928c-.773-.274-1.385-.684-1.836-1.232-.493-.601-.824-1.509-.992-2.724h-5.304c0 1.491.288 2.809.864 3.956h-5.604c.887-1.39 1.481-2.991 1.781-4.804h-5.503c-.373 1.371-.842 2.4-1.407 3.085-.697.869-1.609 1.442-2.736 1.719h-3.314c-1.201-.309-2.236-.987-3.106-2.034-1.233-1.485-1.849-3.72-1.849-6.702 0-2.983.583-5.289 1.75-6.919s2.76-2.445 4.781-2.445c1.985 0 3.482.577 4.492 1.732.565.649 1.028 1.612 1.389 2.887h5.557c-.084-1.66-.698-3.314-1.84-4.961-2.069-2.935-5.34-4.402-9.815-4.402-3.114 0-5.717.949-7.809 2.848zm64 9.742v-4.165h-1.381c-.096-1.6-.794-2.736-2.093-3.41-.866-.445-1.942-.668-3.229-.668-1.431 0-2.574.289-3.428.866-.854.577-1.281 1.383-1.281 2.418 0 .95.421 1.66 1.263 2.129.541.313 1.696.68 3.464 1.101l4.583 1.101c.774.185 1.475.395 2.103.629z" fill="#f43059" class="site-nav__logo-fill"/></svg> </a> <button id=jsSiteNavOpener class=site-nav__opener data-sctrack=hamburger>Menu</button> <ul class=site-nav__list id=jsSiteNavList> <li class="site-nav__item site-nav__item--closer"> <button id=jsSiteNavCloser class="site-nav__link site-nav__closer">Close</button> </li> <li class=site-nav__item><a href=/ class="site-nav__link site-nav__home">Home</a></li> <li class=site-nav__item><a href=/about/ class="site-nav__link site-nav__about">About Me</a></li> <li class="site-nav__item has-sub-menu"> <a href=/services/ class="site-nav__link site-nav__services">My Services</a> <ul class="site-nav__sub-menu"> <li class=site-nav__item><a href=/masterclasses/ class="site-nav__sub-link site-nav__masterclasses">Masterclasses <sup style="text-transform: uppercase; font-size: 0.625rem; line-height: 1.2; color: #f43059;"><strong>New</strong></sup></a></li> <li class=site-nav__item><a href=/sentinel/ class="site-nav__sub-link site-nav__sentinel">Sentinel</a></li> <li class=site-nav__item><a href=/workshops/ class="site-nav__sub-link site-nav__workshops">Workshops and Training</a></li> <li class=site-nav__item><a href=/consultancy/ class="site-nav__sub-link site-nav__consultancy">Consultancy</a></li> <li class=site-nav__item><a href=/code-reviews/ class="site-nav__sub-link site-nav__code-reviews">Performance Audits</a></li> <li class=site-nav__item><a href=/downloads/ class="site-nav__sub-link site-nav__downloads">Downloads</a></li> </ul> </li> <li class=site-nav__item><a href=/speaking/ class="site-nav__link site-nav__speaking">Speaking</a></li> <li class="site-nav__item has-sub-menu"> <a href=/case-studies/ class="site-nav__link site-nav__case-studies">Case Studies</a> <ul class=site-nav__sub-menu> <li class=site-nav__item><a href=/testimonials/ class="site-nav__sub-link site-nav__testimonials">Testimonials</a></li> </ul> </li> <li class=site-nav__item><a href=/contact/ class="site-nav__link site-nav__contact">Contact Me</a></li> </ul> </nav> <script> (function() { const site = document.documentElement; const siteNav = document.getElementById('jsSiteNav'); const siteNavList = document.getElementById('jsSiteNavList'); const siteNavOpener = document.getElementById('jsSiteNavOpener'); const siteNavCloser = document.getElementById('jsSiteNavCloser'); siteNavOpener.addEventListener('click', (event) => { site.style.overflow='hidden'; siteNav.classList.add('is-open'); }); function siteNavClose() { site.style.overflow=null; siteNav.classList.remove('is-open'); }; siteNavCloser.addEventListener('click', (event) => { siteNavClose(); }); window.addEventListener('pagehide', (event) => { siteNavClose(); }); }()); </script> </div> </header> <div class=wrapper> <div class=layout> <section class="layout__item desk-three-fifths s-post" data-ui-component="Main content" itemscope itemtype=http://schema.org/BlogPosting id=section:main> <script>performance.mark('contentStart')</script> <time class=post__date datetime=2023-10-16 itemprop=datePublished>16 October, 2023</time> <h1 itemprop="name headline" elementtiming=page-title style="view-transition-name: x-2023-10-16">What Is the Maximum max-age?</h1> <p class=hide>Written by <b itemprop=author>Harry Roberts</b> on <b itemprop=publisher>CSS Wizardry</b>.</p> <details class=c-toc> <summary>Table of Contents</summary> <ol> <li><a href="#max-age"><code class="language-plaintext highlighter-rouge">max-age</code></a></li> <li><a href="#immutable"><code class="language-plaintext highlighter-rouge">immutable</code></a></li> <li><a href="#31536000-seconds"><code class="language-plaintext highlighter-rouge">31536000</code> Seconds</a></li> <li><a href="#2147483648-seconds"><code class="language-plaintext highlighter-rouge">2147483648</code> Seconds</a></li> <li><a href="#does-it-matter">Does It Matter?</a></li> </ol> </details> <p class="c-highlight">Try out the <a href="/max-age/"><code>max-age</code> calculator</a>.</p> <p>If you wanted to cache a file ‘forever’, you’d probably use a <code class="language-plaintext highlighter-rouge">Cache-Control</code> header like this:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Cache-Control: max-age=31536000 </code></pre></div></div> <p>This instructs any cache that it may store and reuse a response for one year (60 seconds × 60 minutes × 24 hours × 365 days = <strong>31,536,000 seconds</strong>). But why one year? Why not 10 years? Why not <code class="language-plaintext highlighter-rouge">max-age=forever</code>? Why not <code class="language-plaintext highlighter-rouge">max-age=∞</code>?!</p> <p>I wondered the same. Let’s find out together.</p> <div data-nosnippet=""> <details> <summary>Like spoilers? See the answer.</summary> <p>It’s <code>2147483648</code> seconds, or 68 years. To find out why, read on!</p> </details> </div> <h2 id="max-age"><code class="language-plaintext highlighter-rouge">max-age</code></h2> <p><code class="language-plaintext highlighter-rouge">max-age</code> is a <code class="language-plaintext highlighter-rouge">Cache-Control</code> directive that instructs a cache that it may store and reuse a response for <var>n</var> seconds from the point at which it entered the cache in question. Once that time has elapsed, the cache should either revalidate the file with the origin server, or do whatever any <a href="/2019/03/cache-control-for-civilians/">additional directives may have instructed it to do</a>. But why might we want to have a <code class="language-plaintext highlighter-rouge">max-age</code> that equates to forever?</p> <h2 id="immutable"><code class="language-plaintext highlighter-rouge">immutable</code></h2> <p>If we’re confident that we can cache a file for a year, we must be also quite confident that it never <em>really</em> changes. After all, a year is a very long time in internet timescales. If we have this degree of confidence that a file won’t change, we can cache the file <i>immutably</i>.</p> <p><code class="language-plaintext highlighter-rouge">immutable</code> is a <a href="https://mailarchive.ietf.org/arch/msg/httpbisa/6gS9zGCh4tIB3hKa67wsoHdb4gY/">relatively new</a> directive that effectively <a href="/2019/03/cache-control-for-civilians/#immutable">makes a contract with the browser</a> in which we as developers tell the browser: <q>this file will never, ever change, <em>ever</em>; please don’t bother coming back to the server to check for updates</q>.</p> <p>Let’s say we have a simple source CSS file called <code class="language-plaintext highlighter-rouge">button.css</code>. Its content is as follows:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.c-btn</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#C0FFEE</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>Once our build system has completed, it will fingerprint the file and export it with a unique hash, or <em>fingerprint</em>, in its filename. The MD5 checksum for this file is <code class="language-plaintext highlighter-rouge">7fda1016c4f1eaafc5a4e50a58308b79</code>, so we’d probably end up with a file named <strong><code class="language-plaintext highlighter-rouge">button.7fda1016.css</code></strong>.</p> <p>If we change the colour of the button, the next time we roll a release, the build step will do its thing and now, the following content:</p> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.c-btn</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#BADA55</span><span class="p">;</span> <span class="p">}</span> </code></pre></div></div> <p>…would have a checksum of <code class="language-plaintext highlighter-rouge">6bb70b2a68a0e28913a05fb3656639b6</code>. In that case, we’d call the new file <strong><code class="language-plaintext highlighter-rouge">button.6bb70b2a.css</code></strong>.</p> <p>Notice how the content of the original file <code class="language-plaintext highlighter-rouge">button.7fda1016.css</code> hasn’t changed; <code class="language-plaintext highlighter-rouge">button.7fda1016.css</code> has ceased to exist entirely, and is replaced by a whole new file called <code class="language-plaintext highlighter-rouge">button.6bb70b2a.css</code>.</p> <p>Fingerprinted files never change—<strong>they get replaced</strong>. This means we can safely cache any fingerprinted file for, well, forever.</p> <p>But how long is forever?!</p> <h2 id="31536000-seconds"><code class="language-plaintext highlighter-rouge">31536000</code> Seconds</h2> <p>Traditionally, developers have set ‘forever’ <code class="language-plaintext highlighter-rouge">max-age</code> values at <code class="language-plaintext highlighter-rouge">31536000</code> seconds, which is a year. Why a year, though? A year isn’t forever. Was <code class="language-plaintext highlighter-rouge">31536000</code> arrived at by agreement? Or is it specified somewhere? <a href="https://datatracker.ietf.org/doc/html/rfc2616#section-14.21">RFC 2616</a> says of the <code class="language-plaintext highlighter-rouge">Expires</code> header:</p> <blockquote> <p>To mark a response as “never expires,” an origin server sends an <code class="language-plaintext highlighter-rouge">Expires</code> date approximately one year from the time the response is sent. HTTP/1.1 servers SHOULD NOT send <code class="language-plaintext highlighter-rouge">Expires</code> dates more than one year in the future.</p> </blockquote> <p>Historically—<em>very</em> historically—caching was bound to <q>approximately one year from the time the response is sent</q>. This restriction was introduced by the long defunct <code class="language-plaintext highlighter-rouge">Expires</code> header, and we’re talking about <code class="language-plaintext highlighter-rouge">max-age</code>, which is a <code class="language-plaintext highlighter-rouge">Cache-Control</code> directive. Does <code class="language-plaintext highlighter-rouge">Cache-Control</code> say anything different?</p> <h2 id="2147483648-seconds"><code class="language-plaintext highlighter-rouge">2147483648</code> Seconds</h2> <p>It turns out there is a maximum value for <code class="language-plaintext highlighter-rouge">max-age</code>, and it’s defined in <a href="https://datatracker.ietf.org/doc/html/rfc9111#section-1.2.2">RFC 9111’s <code class="language-plaintext highlighter-rouge">delta-seconds</code></a>:</p> <blockquote> <p>A recipient parsing a delta-seconds value and converting it to binary form ought to use an arithmetic type of at least 31 bits of non-negative integer range. If a cache receives a delta-seconds value greater than the greatest integer it can represent, or if any of its subsequent calculations overflows, the cache <strong>MUST</strong> consider the value to be 2147483648 (2<sup>31</sup>) or the greatest positive integer it can conveniently represent.</p> </blockquote> <p>The spec says caches should accept a maximum <code class="language-plaintext highlighter-rouge">max-age</code> value of whatever-it’s-been-told, falling back to 2,147,483,648 seconds (which is 68 years), or failing that, falling back to as-long-as-it-possibly-can. This wording means that, technically, there isn’t a maximum as long as the cache understands the value you passed it. Theoretically, you could set a <code class="language-plaintext highlighter-rouge">max-age=9999999999</code> (that’s 317 years!) or higher. If the cache can work with it, that’s how long it will store it. If it can’t handle 317 years, it should fall back to 2,147,483,648 seconds, and if it can’t handle <em>that</em>, whatever the biggest value it can handle.</p> <p>And why 2,147,483,648 seconds?</p> <p>In a 32-bit system, the largest possible integer that can be represented in binary form is <code class="language-plaintext highlighter-rouge">01111111111111111111111111111111</code>: a zero followed by 31 ones (the first zero is reserved for switching between positive and negative values, so <code class="language-plaintext highlighter-rouge">11111111111111111111111111111111</code> would be equal to -2,147,483,648).</p> <h2 id="does-it-matter">Does It Matter?</h2> <p>Honestly, no.</p> <p>It’s unlikely that a year would ever be insufficient, and it’s also unlikely that any cache would store a file for that long anyway: browsers periodically empty their cache as part of their general housekeeping, so even files that have been stored for a year might not actually make it that long.</p> <p>This post was mostly an exercise in curiosity. But, if you wanted to, you could go ahead and swap all of your <code class="language-plaintext highlighter-rouge">31536000</code>s for <code class="language-plaintext highlighter-rouge">2147483648</code>s. It works in <a href="https://cache-tests.fyi/">all major browsers</a>.</p> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is the maximum value for cache-control’s max-age?", "acceptedAnswer": { "@type": "Answer", "text": "Conventionally, people tend to use one year, which is 3,1536,000 seconds. However, the spec says that caches MUST honour up to 2,147,483,648 seconds, which, in a 32-bit system, is the largest possible integer that can be represented in binary form. That’s a whopping 68 years!" } } ] } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BlogPosting", "url": "https://csswizardry.com/2023/10/what-is-the-maximum-max-age/", "name": "What Is the Maximum max-age?", "headline": "What Is the Maximum max-age?", "keywords": "", "description": "We usually set max-age directives to a year; can we go longer?", "datePublished": "2023-10-16 14:18:39 +0000", "dateModified": "2023-10-16 14:18:39 +0000", "author": { "@type": "Person", "url": "https://csswizardry.com", "name": "Harry Roberts" }, "publisher": { "@type": "Organization", "name": "CSS Wizardry", "url": "https://csswizardry.com", "logo": { "@type": "ImageObject", "width": 128, "height": 128, "url": "https://csswizardry.com/icon.png" } }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://csswizardry.com/2023/10/what-is-the-maximum-max-age/" } } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Blog", "item": "https://csswizardry.com/archive/" }, { "@type": "ListItem", "position": 2, "name": "2023", "item": "https://csswizardry.com/archive/#year-2023" }, { "@type": "ListItem", "position": 3, "name": "What Is the Maximum max-age?", "item": "https://csswizardry.com/2023/10/what-is-the-maximum-max-age/" }] } </script> <hr /> <style> .c-mini-profile { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.5rem; content-visibility: auto; contain-intrinsic-size: 1px 120px; } .c-mini-profile__avatar { border-radius: 100%; } .c-mini-profile__content { } </style> <article class=c-mini-profile> <img src=/img/content/avatar.jpg alt width=72 height=72 loading=lazy class=c-mini-profile__avatar> <div class=c-mini-profile__content> <h5 class=mb0 style="font-weight: bold;">By Harry Roberts</h5> <p class=mb0>Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.</p> </div> </article> <hr /> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.c-pagination{display:flex;margin-bottom:24px}.c-pagination__item{flex-grow:1;flex-basis:0;padding:12px;border-radius:3px;border:1px solid transparent}.c-pagination__item:hover{text-decoration:none;border-color:currentColor}.c-pagination__item.c-pagination__item.c-pagination__item::after{display:none}.c-pagination__item::before{display:block;font-size:12px;font-size:.75rem;line-height:2;line-height:1;text-transform:uppercase;font-weight:normal;color:#333}.c-pagination__prev::before{content:"Previously: "}.c-pagination__next{text-align:right}.c-pagination__next::before{content:"Up next: "} /*# sourceMappingURL=components.pagination.css.map */ </style> <script type=speculationrules> { "prerender": [ { "source": "list", "urls": [ "/2023/10/the-three-c-concatenate-compress-cache/", "/2023/10/clear-cache-on-customer-device/" ] } ] } </script> <nav class=c-pagination> <a href="/2023/10/clear-cache-on-customer-device/" class="c-pagination__item c-pagination__prev" style="view-transition-name: x-2023-10-02" id=articleOlder>How to Clear Cache and Cookies on a Customer’s Device</a> <a href="/2023/10/the-three-c-concatenate-compress-cache/" class="c-pagination__item c-pagination__next" style="view-transition-name: x-2023-10-17" id=articleNewer>The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache</a> </nav> <script> (() => { const articleOlder = document.getElementById('articleOlder'); const articleNewer = document.getElementById('articleNewer'); articleOlder.addEventListener('click', (event) => { setTimeout(() => { LUX.addData('articlePaginationUsed', true) LUX.addData('articleOlderUsed', true) }); }); articleNewer.addEventListener('click', (event) => { setTimeout(() => { LUX.addData('articlePaginationUsed', true) LUX.addData('articleNewerUsed', true) }); }); })(); </script> <hr /> <p> <a href=/code-reviews/#fix-it-fast class="btn btn--full">Did this help? <strong>We can do way more!</strong></a> </p> <script>performance.mark('contentEnd')</script> </section ><section class="layout__item desk-three-tenths desk-push-one-tenth" data-ui-component="Sub content" id="section:sub-content"> <hr class=hide-desk> <article class="[ box box--highlight ] mb" data-ui-component=ad> <div class=adpacks> <script src=https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=csswizardrycom defer id=_carbonads_js></script> </div> </article> <p> <img src=/img/css/masthead-small.jpg alt width=720 height=480 style="background-image: url(/img/css/masthead-small-lqip.jpg), url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAAsAEAMBEQACEQEDEQH/xACAAAEBAQAAAAAAAAAAAAAAAAAICQoQAAAEBAUEAQUAAAAAAAAAAAMEBQYBAhMUBxIVFhcACAkkERgjJTdDAQADAQAAAAAAAAAAAAAAAAAHCAkGEQAABAUCAwcEAwAAAAAAAAABAgMEBhESExQFBwAVIwgWFyEiJDMxMkJDNEFR/9oADAMBAAIRAxEAPwDP12CsRLfmKpRpN7FZ6ok7kxPHIoiWbLlCyQvgFTI6tKWeSihwEUEcgspheMBBwYyyZBBYhTS5YRg6O3m4ei7fQrF0dEjLWmLNukNo7Vgmcz1c4uBQTTIqIpkdCc5VyFUOBDAcxREtEzV42T1KEND2/ibX1ojiNJu11ZyKTZqk2kc1XoUXE5TmKLg4lIAmEqQmrAhpgPD872MFxcADY5d2dyb4TRXcArubaCHq72buHpsQ7EQ5hxOvmicTyhscsfKlJRjMJBjAEwU88YzRm6KPZ47TCMd7RpljeO3ejbg6UgRu+W1Fskcj1e2UwvG+EmQBQVERLScEzFUAwGD7RMUtrtf0OM4AePIiiGLmcSaaUCulk0UnKKhlCVFVTstxEqJhAxSgsKavp8wH68Sm8SV79RRyjy/bUGpqHF+gafa7sb37YvvyvE1fLqume5b/AD/Kp0kz3H8MH9/Bu5xrWfexrmMr8Nnp8wpnh5ntsi3+yniWGx9zO1WjK/qdmij8v5df6p/FR536fxnwpPK9pXJTiteXaO9X9a095fFfOk1dp6x715Wz67eetmt6f2qXWm7OuD4R6lLkWdlpzxMvvHO0pbyp+0xaZ4tHTtXMnq08HN7id2HV3m96+aXLsnMnSaU7fSs/5X6JVVefH//Z );" elementtiming=sidebar-image decoding=sync> </p> <p>Hi there, I’m <b>Harry Roberts</b>. I am an <b><a href=https://web.archive.org/web/20190630140300/https://thenetawards.com/previous-winners/>award-winning</a> Consultant Web Performance Engineer</b>, <b>designer</b>, <b>developer</b>, <b>writer</b>, and <b>speaker</b> from the UK. I <b><a href=/archive/>write</a></b>, <b><a href=https://twitter.com/csswizardry>Tweet</a></b>, <b><a href=/speaking/>speak</a></b>, and <b><a href="https://github.com/csswizardry">share code</a></b> about measuring and improving site-speed. You <a href=/services/>should hire me</a>.</p> <p><a href=https://twitter.com/csswizardry class=twitter-follow-button data-show-count=true data-lang=en>Follow @csswizardry</a></p> <p>You can now find me on <a rel="me" href="https://webperf.social/@csswizardry">Mastodon</a>.</p> <hr> <p class=text-banner> <a href=/code-reviews/#fix-it-fast class="btn btn--full btn--positive" id=cta data-sctrack=cta-sidebar elementtiming=cta-sidebar>Suffering? <b>Fix It Fast!</b> </a> </p> <script> (() => { const cta = document.getElementById('cta'); cta.addEventListener('click', (event) => { setTimeout(() => { LUX.addData('ctaClicked', true) }); }); })(); </script> <h4>Projects</h4> <ul class="[ list-ui list-ui--small ] mb"> <li><a href=https://github.com/inuitcss/inuitcss><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/logo-inuitcss.png alt=inuitcss width=500 height=238 loading=lazy></a></li> <li><a href=https://itcss.io/>ITCSS</a> – coming soon…</li> <li><a href=https://cssguidelin.es/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/logo-css-guidelines.png alt="CSS Guidelines" width=540 height=180 loading=lazy></a></li> </ul> <h4>Next Appearance</h4> <ul class="list-ui list-ui--small"> <li> <h4 class="list-ui__title">Talk</h4> <img src="/img/icons/gr.png" alt width="16" height="11" loading="lazy" /> <a href="https://devoxx.gr/">Devoxx Greece</a>: Athens (Greece), April 2025 </li> </ul> </section> </div> </div> <section class="band band--dark" id="section:learn"> <div class=wrapper> <h4 class=band__title>Learn:</h4> <ul class="o-list-inline o-list-inline--spaced text-banner mb0"> <li><a href="/2019/03/cache-control-for-civilians/">Understand <code>Cache-Control</code></a> <li><a href="/2023/07/core-web-vitals-for-search-engine-optimisation/">Core Web Vitals and SEO</a> <li><a href="/2018/11/css-and-network-performance/">CSS Performance</a> <li><a href="/2023/07/in-defence-of-domcontentloaded/">Does <code>DOMContentLoaded</code> Still Matter?</a> <li><a href="/2021/02/measuring-network-performance-in-mobile-safari/">Improve Web Performance on iOS</a> <li><a href="/max-age/"><code>max-age</code> calculator</a> <li><a href="/2024/09/optimising-for-high-latency-environments/">Optimise for High Latency</a> <li><a href="/2022/03/optimising-largest-contentful-paint/">Optimise Largest Contentful Paint</a> <li><a href="/2020/05/the-fastest-google-fonts/">Speed Up Google Fonts</a> <li><a href="/2023/10/the-three-c-concatenate-compress-cache/">Can We Drop Our Build Tools Yet?</a> <li><a href="/2023/09/the-ultimate-lqip-lcp-technique/">Get the Fastest Possible LCP</a> <li><a href="/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/">Diagnose Time to First Byte</a> <li><a href="/2023/10/what-is-the-maximum-max-age/">What Is the Maximum <code>max-age</code> Value?</a> </ul> </div> </section> <section class="band band--highlight"> <div class=wrapper>  <div id=mc_embed_signup class=c-newsletter> <form action=https://csswizardry.us14.list-manage.com/subscribe/post?u=95f3f41085f5f957a07ba5efd&id=ba05b5418d method=post id=mc-embedded-subscribe-form name=mc-embedded-subscribe-form class=validate> <div id=mc_embed_signup_scroll> <h5 class=c-newsletter__title>Newsletter</h5> <p class=c-newsletter__text>Infrequent updates, special offers, and exclusive content. <a href=/newsletter/>Learn more…</a></p> <div class=mc-field-group> <label for=mce-EMAIL class=c-label>Email Address </label> <input type=email value name=EMAIL class="c-input-text c-newsletter__email required email" id=mce-EMAIL required placeholder=email@domain.com> <input type=submit value=Join name=subscribe id=mc-embedded-subscribe class="button btn c-newsletter__submit"> </div> <div id=mce-responses class=clear> <div class=response id=mce-error-response style=display:none></div> <div class=response id=mce-success-response style=display:none></div> </div>  <div style="position: absolute; left: -5000px;" aria-hidden=true><input type=text name=b_95f3f41085f5f957a07ba5efd_ba05b5418d tabindex=-1 value></div> </div> </form> </div>  </div> </section> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.page-foot{font-size:12px;font-size:.75rem;line-height:2;padding-bottom:0}@media screen and (min-width: 64em){.page-foot{padding-bottom:24px}} </style> <section class="[ band band--tint ] page-foot"> <div class=wrapper> <div class="layout layout--middle"> <div class="layout__item lap-and-up-one-quarter"> <p>I am available for hire to consult, advise, and develop with passionate product teams across the globe.</p> </div ><div class="layout__item lap-and-up-one-quarter"> <p>I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.</p> </div ><div class="layout__item lap-and-up-one-half"> <p><a href=/code-reviews/#fix-it-fast class="btn btn--secondary btn--full" data-sctrack=cta-footer>Suffering? <b>Fix It Fast!</b> </a></p> </div> </div> </div> </section> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.page-micro{background-color:#333;padding:12px;text-align:center;content-visibility:auto;contain-intrinsic-size:1px 100px}.page-micro,.page-micro a{color:#fff}.page-micro__copy{font-size:12px;font-size:.75rem;line-height:2;display:block} </style> <footer class=page-micro> <p class=wrapper> <small class=page-micro__copy><b>CSS Wizardry Ltd</b> is a company registered in England and Wales. <b>Company No.</b> 08698093, <b>VAT No.</b> 170659396</small> </p> </footer> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js?0156').then(function(registration) { // Successfully registered the Service Worker //console.log('Service Worker registration successful with scope: ', registration.scope); }).catch(function(err) { // Failed to register the Service Worker //console.log('Service Worker registration failed: ', err); }); }); } </script> <script> performance.measure('contentTime', 'contentStart', 'contentEnd'); </script> <script> /** * The site nav has been explicitly ‘turned off’ with `content-visibility: * hidden;` in its component (S)CSS file. This means we don’t need to bother * rendering it at all on the first pass: it’s off-screen anyway. Once we’re * approaching `domInteractive` (that’s now), we turn it ‘back on’. It’s * wrapped in a rAF to make it asynchronous, which is probably a bit of * a micro-optimisation. */ requestAnimationFrame(() => { const siteNavList = document.getElementById('jsSiteNavList'); siteNavList.style.contentVisibility = 'visible'; }); const navReady = performance.mark('navReady'); console.log('Nav ready at: ' + navReady.startTime + 'ms'); </script> <noscript>  <style> .site-nav__list { content-visibility: visible; } </style> </noscript> <script type=speculationrules> { "prefetch": [ { "source": "document", "where": { "href_matches": "/*" }, "eagerness": "immediate" } ], "prerender": [ { "source": "document", "where": { "href_matches": "/*" }, "eagerness": "moderate" } ] } </script> <script> (() => { const rtt = navigator.connection.rtt; LUX.addData('rtt', rtt); })(); </script>