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>How to Clear Cache and Cookies on a Customer’s Device – 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="How to Clear Cache and Cookies on a Customer’s Device – CSS Wizardry"> <meta name=twitter:description property=og:description content="There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?"> <meta name=twitter:image property=og:image content="https://csswizardry.com/wp-content/uploads/2023/10/clear-site-data.png?1"> <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="There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?"> <link rel=canonical href="https://csswizardry.com/2023/10/clear-cache-on-customer-device/"> <meta property=og:url content="https://csswizardry.com/2023/10/clear-cache-on-customer-device/"> <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-02 itemprop=datePublished>2 October, 2023</time> <h1 itemprop="name headline" elementtiming=page-title style="view-transition-name: x-2023-10-02">How to Clear Cache and Cookies on a Customer’s Device</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="#getting-someone-to-clear-their-own-cache">Getting Someone to Clear Their Own Cache</a></li> <li><a href="#clear-site-data"><code class="language-plaintext highlighter-rouge">Clear-Site-Data</code></a> <ol> <li><a href="#preventing-malicious-clears">Preventing Malicious Clears</a></li> </ol> </li> <li><a href="#clear-site-data-for-developers"><code class="language-plaintext highlighter-rouge">Clear-Site-Data</code> for Developers</a></li> <li><a href="#clearing-cache-on-ios">Clearing Cache on iOS</a></li> </ol> </details> <p>If you work in customer support for any kind of tech firm, you’re probably all too used to talking people through the intricate, tedious steps of clearing their cache and clearing their cookies. Well, there’s an easier way!</p> <h2 id="getting-someone-to-clear-their-own-cache">Getting Someone to Clear Their Own Cache</h2> <p>Trying to talk a non-technical customer through the steps of clearing their own cache is not an easy task—not at all! From identifying their operating system, platform, and browser, to trying to guide them—invisibly!—through different screens, menus, and dropdowns is a big ask.</p> <p>Thankfully, any company that has folk in customer support can make use of a new web platform feature to make the entire process a breeze: <code class="language-plaintext highlighter-rouge">Clear-Site-Data</code>.</p> <h2 id="clear-site-data"><code class="language-plaintext highlighter-rouge">Clear-Site-Data</code></h2> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data">A relatively new HTTP header</a>, available in most modern browsers, allows developers to declaratively clear data associated with a given origin<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup> via one simple response header: <code class="language-plaintext highlighter-rouge">Clear-Site-Data</code>.</p> <div class="language-http highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">Clear-Site-Data: "cache", "cookies" </span></code></pre></div></div> <p>Any response carrying this header will clear the caches<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">2</a></sup> associated with that <em>origin</em>, so all your customer support team needs now is a simple URL that they can send customers to that will clear all of their caches for them.</p> <h3 id="preventing-malicious-clears">Preventing Malicious Clears</h3> <figure> <img src="https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/wp-content/uploads/2023/10/clear-site-data.png?1" alt="Screenshot of a fictional webpage showing three buttons, labelled ‘Clear cache’, ‘Clear cookies’, and ‘Clear all’." loading="lazy" width="1500" height="863" /> </figure> <p>While it probably wouldn’t be disastrous, it is possible that a bad actor could link someone directly to <code class="language-plaintext highlighter-rouge">https://www.example.com/clear</code> and force an unsuspecting victim into clearing their cache or cookies.</p> <p>Instead, I would recommend that your <code class="language-plaintext highlighter-rouge">/clear</code> page contains links to URLs like <code class="language-plaintext highlighter-rouge">/clear/cache</code>, <code class="language-plaintext highlighter-rouge">/clear/cookies</code>, <code class="language-plaintext highlighter-rouge">/clear/all</code>, each of which check and ensure that the <code class="language-plaintext highlighter-rouge">referer</code> request header is equal to <code class="language-plaintext highlighter-rouge">https://www.example.com/clear</code>. This way, the only way the clearing works is if the user initiated it themselves. Something maybe a little like this:</p> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">referer</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">Referer</span><span class="dl">'</span><span class="p">);</span> <span class="k">if</span> <span class="p">(</span><span class="nx">referer</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">https://www.example.com/clear</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="dl">'</span><span class="s1">Clear-Site-Data</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">cache</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="nx">status</span><span class="p">(</span><span class="mi">403</span><span class="p">).</span><span class="nx">send</span><span class="p">(</span><span class="dl">'</span><span class="s1">Forbidden: Invalid Referer</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> <h2 id="clear-site-data-for-developers"><code class="language-plaintext highlighter-rouge">Clear-Site-Data</code> for Developers</h2> <p class="c-highlight">This isn’t the first time I’ve written about <code>Clear-Site-Data</code>—I mentioned it briefly in my 2019 article all about <a href="/2019/03/cache-control-for-civilians/#clear-site-data">setting the correct caching headers</a>. However, this is the first time I’ve focused on <code>Clear-Site-Data</code> in its own right.</p> <p>Naturally, the use case isn’t just limited to customer support. As developers, we may have messed something up and need to clear all visitors’ caches right away. We could attach the <code class="language-plaintext highlighter-rouge">Clear-Site-Data</code> header to all HTML responses for a short period of time until we think the issue has passed.</p> <p>Note that this will prevent anything from going into cache while active, so you will notice performance degradations. While ever the header is live, you will be constantly evicting users’ caches, effectively disabling caching for your site the whole time. Tread carefully!</p> <h2 id="clearing-cache-on-ios">Clearing Cache on iOS</h2> <p>Unfortunately, <code class="language-plaintext highlighter-rouge">Clear-Site-Data</code> is not supported by Safari, and as all browsers on iOS are just Safari under the hood, there is no quick way to achieve this for any of your iPhone users. Therefore, my advice to you is to immediately ask your customer <q>Are you using an iPhone?</q>. If the answer is no, direct them to your <code class="language-plaintext highlighter-rouge">/clear</code> page; if yes, then, well, I’m sorry. It’s back to the old fashioned way.</p> <p>It’s also worth noting that Firefox doesn’t support the specific <code class="language-plaintext highlighter-rouge">"cache"</code> directive, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1671182">it was removed in 94</a>, but I can’t imagine the average Firefox user would need assistance clearing their cache.</p> <div class="footnotes" role="doc-endnotes"> <ol> <li id="fn:1" role="doc-endnote"> <p><code class="language-plaintext highlighter-rouge">https://www.bar.com</code> and <code class="language-plaintext highlighter-rouge">https://foo.bar.com</code> are different origins: an origin is scoped to scheme, domain, and port. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p> </li> <li id="fn:2" role="doc-endnote"> <p><a href="https://w3c.github.io/webappsec-Clear-Site-Data/#clear-cache">The spec</a> dictates that any sort of cache associated with the given origin should be cleared, and not just <a href="/2019/03/cache-control-for-civilians/">the HTTP cache</a> <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></p> </li> </ol> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How can I clear my customer’s cache?", "acceptedAnswer": { "@type": "Answer", "text": "You can use the Clear-Site-Data HTTP header, e.g. Clear-Site-Data: "cache"." } } ] } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BlogPosting", "url": "https://csswizardry.com/2023/10/clear-cache-on-customer-device/", "name": "How to Clear Cache and Cookies on a Customer’s Device", "headline": "How to Clear Cache and Cookies on a Customer’s Device", "keywords": "", "description": "There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?", "datePublished": "2023-10-02 15:30:49 +0000", "dateModified": "2023-10-02 15:30:49 +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/clear-cache-on-customer-device/" }, "image": { "@type": "ImageObject", "url": "https://csswizardry.com/wp-content/uploads/2023/10/clear-site-data.png?1" } } </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": "How to Clear Cache and Cookies on a Customer’s Device", "item": "https://csswizardry.com/2023/10/clear-cache-on-customer-device/" }] } </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/what-is-the-maximum-max-age/", "/2023/09/the-ultimate-lqip-lcp-technique/" ] } ] } </script> <nav class=c-pagination> <a href="/2023/09/the-ultimate-lqip-lcp-technique/" class="c-pagination__item c-pagination__prev" style="view-transition-name: x-2023-09-28" id=articleOlder>The Ultimate Low-Quality Image Placeholder Technique</a> <a href="/2023/10/what-is-the-maximum-max-age/" class="c-pagination__item c-pagination__next" style="view-transition-name: x-2023-10-16" id=articleNewer>What Is the Maximum max-age?</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. <a href="/license/">License Information</a>.</small> </p> </footer> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js?0158').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": [ { "where": { "href_matches": "/*" }, "eagerness": "immediate" } ], "prerender": [ { "where": { "href_matches": "/*" }, "eagerness": "moderate" } ] } </script> <script> (() => { const rtt = navigator.connection.rtt; LUX.addData('rtt', rtt); })(); </script>