diff --git a/preload-font.html b/preload-font.html
deleted file mode 100644
index b98536d2..00000000
--- a/preload-font.html
+++ /dev/null
@@ -1,1092 +0,0 @@
-<!DOCTYPE html>
-<html lang=en-GB class="page  page--home  ">
-
-  <script>performance.mark('headStart');</script>
-<meta charset=UTF-8>
-<meta name=viewport content="width=device-width, minimum-scale=1.0">
-
-<title>Site-Speed Optimisation </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://srv.carbonads.net crossorigin>
-<link rel=preconnect href=https://platform.twitter.com>
-<link rel=preconnect href=https://platform.twitter.com crossorigin>
-<link rel=preconnect href=https://syndication.twitter.com>
-<link rel=preconnect href=https://syndication.twitter.com crossorigin>
-
-
-
-
-
-
-<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 = 'Home';
-
-
-</script>
-
-<script>performance.mark('cssStart');</script>
-<style>
-
-      @font-face {
-        font-family: 'Slowfont';
-        font-style: normal;
-        font-weight: 400;
-        src: url('https://slowfil.es/file?type=woff2&delay=750') format('woff2');
-        font-display: swap;
-      }
-
-
-  /*!
- * 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{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{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}
-
-
-
-
-      body {
-        font-family: 'Slowfont', sans-serif;
-        font-weight: 400;
-      }
-
-</style>
-<link rel=preload as=font href=https://slowfil.es/file?type=woff2&delay=750 crossorigin>
-<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>
-
-
-
-
-
-<link rel=preload href=/img/css/masthead-small-lqip.jpg  as=image media="(max-width: 44.9375em)"                       fetchpriority=high>
-<link rel=preload href=/img/css/masthead-medium-lqip.jpg as=image media="(min-width: 45em) and (max-width: 63.9375em)" fetchpriority=high>
-<link rel=preload href=/img/css/masthead-large-lqip.jpg  as=image media="(min-width: 64em)"                            fetchpriority=high>
-
-
-<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="Site-Speed Optimisation – CSS Wizardry">
-
-<meta name=twitter:description property=og:description content="Web Performance Optimisation, Engineering, and Consultancy">
-
-
-<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="Web Performance Optimisation, Engineering, and Consultancy">
-
-<link rel=canonical href="http://localhost:4000/">
-<meta property=og:url content="http://localhost:4000/">
-<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:articles
-
-            ">Skip to main content</a>
-  </nav>
-
-  <style>
-  /*!
- * inuitcss, by @csswizardry
- *
- * github.com/inuitcss | inuitcss.com
- */.page-head--masthead{--copyright: 'Marin Cuk Vurnek EVENTography';--base64: 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);margin-bottom:0;position:static;background-color:#2e2620;background-image:url(/img/css/masthead-small.jpg),url(/img/css/masthead-small-lqip.jpg),var(--base64);background-position:center 25%;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;color:#fff;border-top-color:#fff;border-bottom-width:0;box-shadow:0 0 10px rgba(0,0,0,0.1) inset}@media screen and (min-width: 45em){.page-head--masthead{background-image:url(/img/css/masthead-medium.jpg),url(/img/css/masthead-medium-lqip.jpg),var(--base64)}}@media screen and (min-width: 64em){.page-head--masthead{background-image:url(/img/css/masthead-large.jpg),url(/img/css/masthead-large-lqip.jpg),var(--base64)}}.page-head--masthead>.wrapper{position:relative;padding-top:56.25%}@media screen and (min-width: 758px){.page-head--masthead>.wrapper{padding-top:0;height:426px}}.page-head__text{margin:0;padding-left:0;border-left:0;position:absolute;bottom:0;left:auto;color:#fff;font-size:24px;font-size:1.5rem;line-height:1;font-weight:300}@media screen and (min-width: 45em){.page-head__text{font-size:48px;font-size:3rem;line-height:1}}@media screen and (min-width: 64em){.page-head__text{font-size:72px;font-size:4.5rem;line-height:1}}
-
-</style>
-
-
-
-<section class="c-highlight  c-highlight--small  c-highlight--ribbon">
-  <a href="/consultancy/#consultations">Book a Consultation</a>
-</section>
-
-
-<header class="page-head  page-head--masthead" elementtiming=masthead>
-
-    <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>
-    <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</a></li>
-
-    <li class="site-nav__item  has-sub-menu">
-      <a href=/services/ class="site-nav__link  site-nav__services">Services</a>
-      <ul class="site-nav__sub-menu">
-        <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</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>
-
-
-        <h1 class=page-head__text elementtiming=masthead-title>Web Performance Optimisation, Consultancy, and Engineering</h1>
-
-    </div>
-
-</header>
-
-
-<div class=wrapper id=section:main>
-  <script>performance.mark('contentStart')</script>
-
-    <!--
-  - Jump straight back out of wrapper mode on the home page.
-  -->
-
-</div><!-- /wrapper -->
-
-
-<section class="[ band  band--highlight ]  promo">
-
-  <div class="wrapper  wrapper--wide">
-
-    <ul class="layout  layout--large">
-
-      <li class="layout__item  desk-one-third">
-
-        <h2 class=heading>Audits</h2>
-        <p><strong style="display: block;">Your website is slow. I know
-          why.</strong> Web performance is big business for any industry: from
-        recouping lost sales to increasing conversions; reducing running costs
-        to user retention; better SEO to lowering your environmental impact.
-        Let’s work together to identify and fix your blind-spots.</p>
-
-      <li class="layout__item  lap-and-up-one-half  desk-one-third">
-
-        <h2 class=heading>Consultancy</h2>
-        <p><strong style="display: block;">What is your web performance
-          strategy?</strong> How much does a 1s slowdown cost you? How do you
-        measure its impact? Is your monitoring effective or even appropriate?
-        How much is web performance worth to your bottom line? Together, we can
-        work out answers to all of those questions and more.</p>
-
-      <li class="layout__item  lap-and-up-one-half  desk-one-third">
-
-        <h2 class=heading>Training</h2>
-        <p><strong style="display: block;">What’s better than one of me? A team
-          of me.</strong> Let me show your engineers how to find and fix all of
-        the things that I can. Get your team self-sufficient, equipped with all
-        of the right tools and knowledge to be your own in-house web performance
-        experts. Never run slowly again.</p>
-
-      <li class=layout__item>
-        <p class=promo__links>
-          <a href=/services/ class="btn btn--secondary">Learn more <span class=hide>about my services</span></a>
-          <span class=promo__links-spacer>or</span>
-          <a href=/contact/ class=btn>Hire me</a>
-        </p>
-
-    </ul>
-
-  </div>
-
-</section>
-
-
-
-<style>
-  /*!
- * inuitcss, by @csswizardry
- *
- * github.com/inuitcss | inuitcss.com
- */.client-list{margin:0;padding:0;list-style:none;text-align:center}.client-list__item{display:inline-block;padding:12px}@media screen and (min-width: 45em){.client-list__item{padding:24px}}.client-list__item>a{display:block}.client-list__logo{background-color:#fcc1ce;height:24px;transition:0.2s}.client-list__logo:hover{background-color:#f9f9f9}@media screen and (min-width: 45em){.client-list__logo{height:48px;width:auto}}
-
-</style>
-
-<section class="band  band--attention" id=section:clients data-ui-component=Clients>
-
-<div class="wrapper  wrapper--unconstrained">
-
-  <h3 class=band__title>Trusted by:</h3>
-
-  <ul class=client-list>
-
-    <li class=client-list__item>
-      <a href=http://www.un.org/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/un.png class=client-list__logo alt="United Nations" loading=lazy width=29 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.ge.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/ge.png class=client-list__logo alt="General Electric" loading=lazy width=24 height=24/></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.adobe.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/adobe.png class=client-list__logo alt="Adobe" loading=lazy width=21 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.economist.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/economist.png class=client-list__logo alt="The Economist" loading=lazy width=48 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.codeclub.org.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/code-club.png class=client-list__logo alt="Code Club" loading=lazy width=24 height=24/></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.unilever.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/unilever.png class=client-list__logo alt="Unilever" loading=lazy width=22 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.raspberrypi.org/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/raspberry-pi.png class=client-list__logo alt="Raspberry Pi" loading=lazy width=19 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.icaew.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/icaew.png class=client-list__logo alt="ICAEW" loading=lazy width=15 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.elsevier.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/elsevier.png class=client-list__logo alt="Elsevier" loading=lazy width=23 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.saksfifthavenue.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/saks.png class=client-list__logo alt="Saks Fifth Avenue" loading=lazy width=32 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.ui.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/ubiquiti.png class=client-list__logo alt="Ubiquiti" loading=lazy width=32 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.ft.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/ft.png class=client-list__logo alt="Financial Times" loading=lazy width=24 height=24/></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.ocado.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/ocado.png class=client-list__logo alt="Ocado" loading=lazy width=27 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.anwb.nl/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/anwb.png class=client-list__logo alt="ANWB" loading=lazy width=47 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.akamai.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/akamai.png class=client-list__logo alt="Akamai" loading=lazy width=59 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.uefa.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/uefa.png class=client-list__logo alt="UEFA" loading=lazy width=50 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.rapha.cc/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/rapha.png class=client-list__logo alt="Rapha" loading=lazy width=52 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://tipalti.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/tipalti.png class=client-list__logo alt="Tipalti" loading=lazy width=48 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://ring.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/ring.png class=client-list__logo alt="Ring" loading=lazy width=39 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.roche.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/roche.png class=client-list__logo alt="Roche" loading=lazy width=46 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.bloomandwild.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/bloom-and-wild.png class=client-list__logo alt="Bloom and Wild" loading=lazy width=52 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.sky.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/sky.png class=client-list__logo alt="BSkyB" loading=lazy width=39 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.nhs.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/nhs.png class=client-list__logo alt="NHS" loading=lazy width=58 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://fico.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/fico.png class=client-list__logo alt="FICO" loading=lazy width=67 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.google.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/google.png class=client-list__logo alt="Google" loading=lazy width=76 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.etsy.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/etsy.png class=client-list__logo alt="Etsy" loading=lazy width=51 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.shopify.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/shopify.png class=client-list__logo alt="Shopify" loading=lazy width=85 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.bbc.co.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/bbc.png class=client-list__logo alt="BBC" loading=lazy width=78 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www2.mmu.ac.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/mmu.png class=client-list__logo alt="Manchester Metropolitan University" loading=lazy width=63 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.york.ac.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/uni-of-york.png class=client-list__logo alt="University of York" loading=lazy width=62 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.ed.ac.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/uni-of-edinburgh.png class=client-list__logo alt="University of Edinburgh" loading=lazy width=100 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.opentable.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/open-table.png class=client-list__logo alt="OpenTable" loading=lazy width=107 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://cloudinary.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/cloudinary.png class=client-list__logo alt="Cloudinary" loading=lazy width=125 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.williamhill.com><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/william-hill.png class=client-list__logo alt="William Hill" loading=lazy width=115 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.typeform.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/typeform.png class=client-list__logo alt="Typeform" loading=lazy width=92 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.hayu.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/hayu.png class=client-list__logo alt="Hayu" loading=lazy width=62 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.bbc.co.uk/iplayer/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/iplayer.png class=client-list__logo alt="BBC iPlayer" loading=lazy width=145 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.retailmenot.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/retailmenot.png class=client-list__logo alt="RetailMeNot" loading=lazy width=134 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.vitamix.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/vitamix.png class=client-list__logo alt="Vitamix" loading=lazy width=109 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.booking.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/booking.com.png class=client-list__logo alt="Booking.com" loading=lazy width=141 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.squarespace.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/squarespace.png class=client-list__logo alt="Squarespace" loading=lazy width=171 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.allianzdirect.de/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/allianz-direct.png class=client-list__logo alt="Allianz Direct" loading=lazy width=159 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.thetrainline.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/trainline.png class=client-list__logo alt="Trainline" loading=lazy width=111 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.mumsnet.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/mumsnet.png class=client-list__logo alt="Mumsnet" loading=lazy width=138 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www2.deloitte.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/deloitte.png class=client-list__logo alt="Deloitte" loading=lazy width=130 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.welt.de/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/die-welt.png class=client-list__logo alt="Die Welt" loading=lazy width=138 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.justgiving.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/justgiving.png class=client-list__logo alt="JustGiving" loading=lazy width=140 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://canonical.com><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/canonical.png class=client-list__logo alt="Canonical" loading=lazy width=181 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.rimowa.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/rimowa.png class=client-list__logo alt="Rimowa" loading=lazy width=132 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://www.hired.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/hired.png class=client-list__logo alt="Hired" loading=lazy width=167 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=http://direct.matalan.co.uk/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/matalan.png class=client-list__logo alt="Matalan" loading=lazy width=170 height=24></a>
-    </li>
-
-    <li class=client-list__item>
-      <a href=https://www.kickstarter.com/><img src=https://res.cloudinary.com/csswizardry/image/fetch/f_auto,q_auto/https://csswizardry.com/img/content/clients/kickstarter.png class=client-list__logo alt="Kickstarter" loading=lazy width=211 height=24></a>
-    </li>
-
-  </ul>
-
-</div>
-
-</section>
-
-
-<style>
-  /*!
- * inuitcss, by @csswizardry
- *
- * github.com/inuitcss | inuitcss.com
- */.c-carousel{overflow:hidden;width:100%;text-align:center;font-weight:300}.c-carousel__panes{margin:0;padding:0;list-style:none;position:relative;display:table;width:500%;overflow:hidden;-webkit-filter:blur(0);-moz-filter:blur(0);filter:blur(0);-webkit-animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1);-moz-animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1);animation:carousel 45s alternate infinite cubic-bezier(0.6, 0, 0.14, 1)}.c-carousel__panes:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;animation-play-state:paused}.c-carousel__pane{position:relative;display:table-cell;vertical-align:middle;width:20%}.c-carousel__pane+.c-carousel__pane{content-visibility:auto;contain-intrinsic-size:1px 240px}.c-carousel__link{color:inherit;border-bottom:1px solid #ddd;font-weight:300;-webkit-transition:0.2s border-color;-moz-transition:0.2s border-color;transition:0.2s border-color}.c-carousel__link:hover,.c-carousel__link:active,.c-carousel__link:focus{text-decoration:none;border-bottom-color:#c4c4c4}@-webkit-keyframes carousel{0%,
-  17.5%{-webkit-transform:translate3d(0, 0, 0);-webkit-filter:blur(0)}20.625%,
-  38.125%{-webkit-transform:translate3d(-20%, 0, 0);-webkit-filter:blur(0)}41.25%,
-  58.75%{-webkit-transform:translate3d(-40%, 0, 0);-webkit-filter:blur(0)}61.875%,
-  79.375%{-webkit-transform:translate3d(-60%, 0, 0);-webkit-filter:blur(0)}82.5%,
-  100%{-webkit-transform:translate3d(-80%, 0, 0);-webkit-filter:blur(0)}19.0625%,
-  39.6875%,
-  60.3125%,
-  80.9375%{-webkit-filter:blur(2px)}}@-moz-keyframes carousel{0%,
-  17.5%{-moz-transform:translate3d(0, 0, 0);-moz-filter:blur(0)}20.625%,
-  38.125%{-moz-transform:translate3d(-20%, 0, 0);-moz-filter:blur(0)}41.25%,
-  58.75%{-moz-transform:translate3d(-40%, 0, 0);-moz-filter:blur(0)}61.875%,
-  79.375%{-moz-transform:translate3d(-60%, 0, 0);-moz-filter:blur(0)}82.5%,
-  100%{-moz-transform:translate3d(-80%, 0, 0);-moz-filter:blur(0)}19.0625%,
-  39.6875%,
-  60.3125%,
-  80.9375%{-moz-filter:blur(2px)}}@keyframes carousel{0%,
-  17.5%{transform:translate3d(0, 0, 0);filter:blur(0)}20.625%,
-  38.125%{transform:translate3d(-20%, 0, 0);filter:blur(0)}41.25%,
-  58.75%{transform:translate3d(-40%, 0, 0);filter:blur(0)}61.875%,
-  79.375%{transform:translate3d(-60%, 0, 0);filter:blur(0)}82.5%,
-  100%{transform:translate3d(-80%, 0, 0);filter:blur(0)}19.0625%,
-  39.6875%,
-  60.3125%,
-  80.9375%{filter:blur(2px)}}
-/*# sourceMappingURL=components.carousel.css.map */
-
-</style>
-
-<section class="[ band  band--large  band--tint ]  mb" id="section:carousel" data-ui-component="Quotes carousel">
-
-<div class=c-carousel>
-
-  <ul class=c-carousel__panes>
-
-    <li class=c-carousel__pane>
-      <blockquote class="pull-quote  pull-quote--banner">
-        <p>Harry gave the team a strong footing for identifying performance issues on iPlayer. With his knowledge, we were able to roll out quick fixes to our audiences without the need for big rewrites, all within just two days.</p>
-        <b class=pull-quote__source><a href=https://twitter.com/mattjburrows>Matthew Burrows</a>, BBC iPlayer</b>
-      </blockquote>
-    </li>
-
-    <li class=c-carousel__pane>
-      <blockquote class="pull-quote  pull-quote--banner">
-        <p>Harry helped our team level up their scalable CSS architecture skills, and to say that he had a large impact on our work is an understatement. We can’t recommend him enough.</p>
-        <b class=pull-quote__source><a href=https://twitter.com/addyosmani>Addy Osmani</a>, Google</b>
-      </blockquote>
-    </li>
-
-    <li class=c-carousel__pane>
-      <blockquote class="pull-quote  pull-quote--banner">
-        <p>Harry’s workshop was excellent; we left with tons of new ideas and techniques to improve both the CSS architecture and overall performance of <a href="http://behance.com/" class="c-carousel__link">Behance</a> and <a href="http://myportfolio.com/" class="c-carousel__link">Adobe Portfolio</a>.</p>
-        <b class=pull-quote__source><a href=http://jackiebalzer.com/>Jackie Balzer</a>, Adobe</b>
-      </blockquote>
-    </li>
-
-    <li class=c-carousel__pane>
-      <blockquote class="pull-quote  pull-quote--banner">
-        <p>There’s a short list of people I whole-heartedly recommend for detailed performance work; Harry is right up there at the top.</p>
-        <b class=pull-quote__source><a href=https://timkadlec.com/>Tim Kadlec</a></b>
-      </blockquote>
-    </li>
-
-    <li class=c-carousel__pane>
-      <blockquote class="pull-quote  pull-quote--banner">
-        <p>The CSS architecture I learned from Harry on <a href="/case-studies/nhs-nhsx-elearning-platform/" class="c-carousel__link">the NHS project</a> has changed the way I work. Bravo!</p>
-        <b class=pull-quote__source><a href=https://twitter.com/joshnesbitt>Josh Nesbitt</a></b>
-      </blockquote>
-    </li>
-
-  </ul>
-
-</div>
-
-</section>
-
-
-<div class=wrapper>
-
-<div class="layout  layout--large">
-  <div class="layout__item  lap-and-up-one-half  desk-two-thirds" data-ui-component="Main content">
-
-    <section class=post id=section:articles>
-
-      <h3 class=heading>Articles</h3>
-
-      <p>There are <b>250</b> articles on this blog.
-      Find them all on the <a href="/archive/">archive page</a>.</p>
-
-
-
-      <ul class="list-ui  post__list  mb">
-
-        <li class=list-ui__item>
-
-
-
-            <script type="speculationrules">
-
-              {
-                "prerender": [
-                  {
-                    "source": "list",
-                    "urls": [ "/2024/09/optimising-for-high-latency-environments/" ]
-                  }
-                ]
-              }
-
-            </script>
-
-
-
-          <time class="post__date" datetime="2024-09-16">16 September, 2024</time>
-          <h3 class="post__title"><a href="/2024/09/optimising-for-high-latency-environments/" style="view-transition-name: x-2024-09-16">Optimising for High Latency Environments</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2024-08-19">19 August, 2024</time>
-          <h3 class="post__title"><a href="/2024/08/cache-grab-how-much-are-you-leaving-on-the-table/" style="view-transition-name: x-2024-08-19">Cache Grab: How Much Are You Leaving on the Table?</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2024-08-14">14 August, 2024</time>
-          <h3 class="post__title"><a href="/2024/08/blocking-render-why-whould-you-do-that/" style="view-transition-name: x-2024-08-14">blocking=render: Why would you do that?!</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2024-01-04">4 January, 2024</time>
-          <h3 class="post__title"><a href="/2024/01/sensible-default-styles-for-images/" style="view-transition-name: x-2024-01-04">Sensible Default Styles for Images</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-12-09">9 December, 2023</time>
-          <h3 class="post__title"><a href="/2023/12/correctly-configure-preconnections/" style="view-transition-name: x-2023-12-09">Correctly Configure (Pre) Connections</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-10-17">17 October, 2023</time>
-          <h3 class="post__title"><a href="/2023/10/the-three-c-concatenate-compress-cache/" style="view-transition-name: x-2023-10-17">The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-10-16">16 October, 2023</time>
-          <h3 class="post__title"><a href="/2023/10/what-is-the-maximum-max-age/" style="view-transition-name: x-2023-10-16">What Is the Maximum max-age?</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-10-02">2 October, 2023</time>
-          <h3 class="post__title"><a href="/2023/10/clear-cache-on-customer-device/" style="view-transition-name: x-2023-10-02">How to Clear Cache and Cookies on a Customer’s Device</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-09-28">28 September, 2023</time>
-          <h3 class="post__title"><a href="/2023/09/the-ultimate-lqip-lcp-technique/" style="view-transition-name: x-2023-09-28">The Ultimate Low-Quality Image Placeholder Technique</a></h3>
-        </li>
-
-        <li class=list-ui__item>
-
-
-
-          <time class="post__date" datetime="2023-07-24">24 July, 2023</time>
-          <h3 class="post__title"><a href="/2023/07/core-web-vitals-for-search-engine-optimisation/" style="view-transition-name: x-2023-07-24">Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?</a></h3>
-        </li>
-
-      </ul>
-
-      <ol class=layout data-ui-component=Pagination>
-
-  <li class="layout__item  lap-and-up-one-half  mb">
-
-      <a href="/page2/#section:articles" class="btn btn--full  btn--secondary" id=archiveOlder>Older articles</a>
-
-
-
-
-</ol>
-
-<script>
-  (() => {
-
-    const archiveOlder = document.getElementById('archiveOlder');
-    const archiveNewer = document.getElementById('archiveNewer');
-
-    if (archiveOlder) {
-      archiveOlder.addEventListener('click', (event) => {
-
-        setTimeout(() => {
-          LUX.addData('archivePaginationUsed', true)
-          LUX.addData('archiveOlderUsed', true)
-        });
-
-      });
-    };
-
-    if (archiveNewer) {
-      archiveNewer.addEventListener('click', (event) => {
-
-        setTimeout(() => {
-          LUX.addData('archivePaginationUsed', true)
-          LUX.addData('archiveNewerUsed', true)
-        });
-
-      });
-    };
-
-
-  })();
-</script>
-
-
-    </section>
-
-    <script>performance.mark('contentEnd')</script>
-  </div
-
-  ><div class="layout__item  lap-and-up-one-half  desk-one-third" data-ui-component="Sub content">
-
-    <div class="[ box  box--highlight ]  mb">
-      <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>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=http://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-home.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-home.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 &amp; Workshop</h4>
-  <img src="/img/icons/cz.png" alt width="16" height="11" loading="lazy"> <a href="https://webexpo.net/">WebExpo</a>: Prague (Czech Republic), May 2024
-</li>
-
-
-</ul>
-
-    </div>
-
-  </div>
-
-</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="/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>
-
-    <!-- Begin MailChimp Signup Form -->
-<div id=mc_embed_signup class=c-newsletter>
-  <form action=https://csswizardry.us14.list-manage.com/subscribe/post?u=95f3f41085f5f957a07ba5efd&amp;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&nbsp;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>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-
-      <div style="position: absolute; left: -5000px;" aria-hidden=true><input type=text name=b_95f3f41085f5f957a07ba5efd_ba05b5418d tabindex=-1 value></div>
-
-    </div>
-  </form>
-</div>
-<!--End mc_embed_signup-->
-
-
-  </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?0153').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>
-  <!--
-    - In the highly unlikely event that someone has disabled JS, turn the nav
-    - ‘back on’ synchronously.
-    -->
-  <style> .site-nav__list { content-visibility: visible; } </style>
-</noscript>
-
-<script src=/js/instant.page.5.1.1.min.js type=module fetchpriority=low></script>
-
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@graph": [
-    {
-      "@id": "https://csswizardry.com",
-      "@type": "WebSite",
-      "url": "https://csswizardry.com",
-      "name": "CSS Wizardry",
-      "description": "CSS Wizardry is the home of Harry Roberts—an independent consultant web performance engineer from the UK.",
-      "copyrightHolder": {
-        "@id": "https://csswizardry.com/about/"
-      },
-      "publisher": {
-        "@id": "https://csswizardry.com/about"
-      },
-      "inLanguage": "en-UK"
-    },
-    {
-      "@id": "https://csswizardry.com/about/",
-      "@type": "Person",
-      "name": "Harry Roberts",
-      "alternateName": "Harry Roberts",
-      "image": {
-        "@type": "ImageObject",
-        "inLanguage": "en-UK",
-        "@id": "https://csswizardry.com/about#about-page-image",
-        "url": "https://csswizardry.com/img/content/about.jpg",
-        "contentUrl": "https://csswizardry.com/img/content/about.jpg",
-        "width": 750,
-        "height": 422,
-        "caption": "Harry Roberts"
-      },
-      "description": "Harry Roberts is a renowned web performance engineer from the UK. He helps some of the world’s largest and most respected organisations find and fix site-speed issues.",
-      "url": "https://csswizardry.com",
-      "address": {
-        "@type": "PostalAddress",
-        "addressLocality": "Leeds",
-        "addressCountry": "United Kingdom"
-      },
-      "email": "csswizardry@gmail.com",
-      "birthPlace": "Leeds",
-      "sameAs": [
-        "https://github.com/csswizardry",
-        "https://x.com/csswizardry",
-        "https://www.linkedin.com/in/csswizardry/",
-        "https://www.reddit.com/user/csswizardry/",
-        "https://www.instagram.com/csswizardry/"
-      ]
-    },
-    {
-      "@id": "https://csswizardry.com/about/",
-      "@type": [
-        "Organization",
-        "Brand"
-      ],
-      "url": "https://csswizardry.com",
-      "name": "CSS Wizardry Ltd",
-      "description": "CSS Wizardry is the moniker under which Harry Roberts offers web performance consultancy services to clients all over the world.",
-      "logo": {
-        "@type": "ImageObject",
-        "inLanguage": "en-UK",
-        "@id": "https://csswizardry.com/#logo",
-        "url": "https://csswizardry.com/img/icons/144.png",
-        "contentUrl": "https://csswizardry.com/img/icons/144.png",
-        "width": 200,
-        "height": 200,
-        "caption": "Harry Roberts"
-      },
-      "image": {
-        "@id": "https://csswizardry.com/#logo"
-      },
-      "sameAs": [
-        "https://github.com/csswizardry",
-        "https://x.com/csswizardry",
-        "https://www.linkedin.com/in/csswizardry/",
-        "https://www.reddit.com/user/csswizardry/",
-        "https://www.instagram.com/csswizardry/"
-      ]
-    }
-  ]
-}
-</script>
