CINXE.COM

<!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 – 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 = 'Home'; </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} </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> <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="https://csswizardry.com/"> <meta property=og:url content="https://csswizardry.com/"> <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="/masterclasses/">Arrange a Masterclass</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 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> <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>  </div> <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="https://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="https://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="https://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>245</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/11/designing-and-evolving-a-new-performance-score/" ] } ] } </script> <time class="post__date" datetime="2024-11-26">26 November, 2024</time> <h3 class="post__title"><a href="/2024/11/designing-and-evolving-a-new-performance-score/" style="view-transition-name: x-2024-11-26">Designing (and Evolving) a New Web Performance Score</a></h3> </li> <li class=list-ui__item> <time class="post__date" datetime="2024-11-18">18 November, 2024</time> <h3 class="post__title"><a href="/2024/11/core-web-vitals-colours/" style="view-transition-name: x-2024-11-18">Core Web Vitals Colours</a></h3> </li> <li class=list-ui__item> <time class="post__date" datetime="2024-10-01">1 October, 2024</time> <h3 class="post__title"><a href="/2024/10/the-ultimate-contract-templates-for-tech-consultants/" style="view-transition-name: x-2024-10-01">The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid</a></h3> </li> <li class=list-ui__item> <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="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> </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="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-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</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> </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="/max-age/"><code>max-age</code> calculator</a> <li><a href="/2024/09/optimising-for-high-latency-environments/">Optimise for High Latency</a> <li><a href="/2022/03/optimising-largest-contentful-paint/">Optimise Largest Contentful Paint</a> <li><a href="/2020/05/the-fastest-google-fonts/">Speed Up Google Fonts</a> <li><a href="/2023/10/the-three-c-concatenate-compress-cache/">Can We Drop Our Build Tools Yet?</a> <li><a href="/2023/09/the-ultimate-lqip-lcp-technique/">Get the Fastest Possible LCP</a> <li><a href="/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/">Diagnose Time to First Byte</a> <li><a href="/2023/10/what-is-the-maximum-max-age/">What Is the Maximum <code>max-age</code> Value?</a> </ul> </div> </section> <section class="band band--highlight"> <div class=wrapper>  <div id=mc_embed_signup class=c-newsletter> <form action=https://csswizardry.us14.list-manage.com/subscribe/post?u=95f3f41085f5f957a07ba5efd&id=ba05b5418d method=post id=mc-embedded-subscribe-form name=mc-embedded-subscribe-form class=validate> <div id=mc_embed_signup_scroll> <h5 class=c-newsletter__title>Newsletter</h5> <p class=c-newsletter__text>Infrequent updates, special offers, and exclusive content. <a href=/newsletter/>Learn more…</a></p> <div class=mc-field-group> <label for=mce-EMAIL class=c-label>Email Address </label> <input type=email value name=EMAIL class="c-input-text c-newsletter__email required email" id=mce-EMAIL required placeholder=email@domain.com> <input type=submit value=Join name=subscribe id=mc-embedded-subscribe class="button btn c-newsletter__submit"> </div> <div id=mce-responses class=clear> <div class=response id=mce-error-response style=display:none></div> <div class=response id=mce-success-response style=display:none></div> </div>  <div style="position: absolute; left: -5000px;" aria-hidden=true><input type=text name=b_95f3f41085f5f957a07ba5efd_ba05b5418d tabindex=-1 value></div> </div> </form> </div>  </div> </section> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.page-foot{font-size:12px;font-size:.75rem;line-height:2;padding-bottom:0}@media screen and (min-width: 64em){.page-foot{padding-bottom:24px}} </style> <section class="[ band band--tint ] page-foot"> <div class=wrapper> <div class="layout layout--middle"> <div class="layout__item lap-and-up-one-quarter"> <p>I am available for hire to consult, advise, and develop with passionate product teams across the globe.</p> </div ><div class="layout__item lap-and-up-one-quarter"> <p>I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.</p> </div ><div class="layout__item lap-and-up-one-half"> <p><a href=/code-reviews/#fix-it-fast class="btn btn--secondary btn--full" data-sctrack=cta-footer>Suffering? <b>Fix It Fast!</b> </a></p> </div> </div> </div> </section> <style> /*! * inuitcss, by @csswizardry * * github.com/inuitcss | inuitcss.com */.page-micro{background-color:#333;padding:12px;text-align:center;content-visibility:auto;contain-intrinsic-size:1px 100px}.page-micro,.page-micro a{color:#fff}.page-micro__copy{font-size:12px;font-size:.75rem;line-height:2;display:block} </style> <footer class=page-micro> <p class=wrapper> <small class=page-micro__copy><b>CSS Wizardry Ltd</b> is a company registered in England and Wales. <b>Company No.</b> 08698093, <b>VAT No.</b> 170659396</small> </p> </footer> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js?0156').then(function(registration) { // Successfully registered the Service Worker //console.log('Service Worker registration successful with scope: ', registration.scope); }).catch(function(err) { // Failed to register the Service Worker //console.log('Service Worker registration failed: ', err); }); }); } </script> <script> performance.measure('contentTime', 'contentStart', 'contentEnd'); </script> <script> /** * The site nav has been explicitly ‘turned off’ with `content-visibility: * hidden;` in its component (S)CSS file. This means we don’t need to bother * rendering it at all on the first pass: it’s off-screen anyway. Once we’re * approaching `domInteractive` (that’s now), we turn it ‘back on’. It’s * wrapped in a rAF to make it asynchronous, which is probably a bit of * a micro-optimisation. */ requestAnimationFrame(() => { const siteNavList = document.getElementById('jsSiteNavList'); siteNavList.style.contentVisibility = 'visible'; }); const navReady = performance.mark('navReady'); console.log('Nav ready at: ' + navReady.startTime + 'ms'); </script> <noscript>  <style> .site-nav__list { content-visibility: visible; } </style> </noscript> <script type=speculationrules> { "prefetch": [ { "source": "document", "where": { "href_matches": "/*" }, "eagerness": "immediate" } ], "prerender": [ { "source": "document", "where": { "href_matches": "/*" }, "eagerness": "moderate" } ] } </script> <script> (() => { const rtt = navigator.connection.rtt; LUX.addData('rtt', rtt); })(); </script>