If, like me, you frequently need the official1 Core Web Vitals colours forslides and presentations, here you go:Good #09ce6b Needs Improvement #ffa400 Poor #ff4e42 More Colour Formats?GoodRGB: rgb(9, 206, 107)HSL: hsl(150, 92%, 42%)HWB: hwb(150, 4%, 19%)Needs ImprovementRGB: rgb(255, 164, 0)HSL: hsl(39, 100%, 50%)HWB: hwb(39, 0%, 0%)PoorRGB: rgb(255, 78, 66)HSL: hsl(4, 100%, 63%)HWB: hwb(4, 26%, 0%)‘Official’ as in sampled from PageSpeed Insights and web.dev. ↩

As a tech consultant, having airtight contracts isn’t justabout the paperwork—it’s about protecting your business and ensuring you getpaid on time. I’ve developed a Contracts StarterPack specifically fortech consultants to address common challenges, such as securing intellectualproperty, managing payment terms, and avoiding scope creep.Why You Need Contract Templates as a Tech ConsultantIn the fast-paced world of tech consulting—especially where shorter, moretactical engagements are concerned—it’s easy to dive into projects without fullyconsidering the legal protection you need. Contracts provide clarity between youand your clients, ensuring there are no misunderstandings around deliverables,payment, and project scope.Get the Contracts Starter PackWhat’s Inside the Contracts Starter Pack?There are Basic and Premium Starter Packs available. In them, you will find:Mutual Non-Disclosure Agreement (NDA): Protect confidential informationshared with your clients.Master Services Agreement (MS

Last week, I posted a short update onLinkedInabout CrUX’s new RTT data. Go and give it a quick read—the context will help.Chrome have recently begun adding Round-Trip-Time (RTT)datato the Chrome User Experience Report (CrUX). This gives fascinating insightsinto the network topography of our visitors, and how much we might be impactedby high latency regions.What is RTT?Round-trip-time (RTT) is basically a measure of latency—how long did it take toget from one endpoint to another and back again? If you’ve ever pingedwww.google.com over in-flight wifi, you’ve measured RTT.Latency is a key limiting factor on the web: given that most assets fetched bywebpages are relatively small (compared to, say, downloading a software updateor streaming a movie), we find that most experiences are latency-bound ratherthan bandwidth-bound.The round trip also measures intermediate steps on that journey such aspropagation delay, transmission delay, processing delay, etc. Theseintermediates fall outside of th

For the longest time now, I have been obsessed with caching. I think everydeveloper of any discipline would agree that caching is important, but I do tendto find that, particularly with web developers, gaps in knowledge leave a lot ofopportunities for optimisation on the table. How does it affect you?Want to know everything (and more) about HTTP cache? Check out myrecent talk at WebExpo.Navigation InformationThe CrUX Report has begun including navigationinformation whichtells you how people visited your pages: did they land afresh? Reload thepage? Arrive via the back button? This new data not only gives us insights as tohow people visit and traverse our websites, but also offers up opportunities foroptimisation.The possible navigation types are:Navigate: A hard navigation that resulted in an HTML page being fetchedfrom the network.Cache: An HTML response returned from the HTTP cache.Back–Forward: A navigation incurred by hitting the back or forward button.bfcache: A navigation incurred

WebKit have recently announced their intent toimplement the blocking=renderattribute for <script> and <style> elements, bringing them in line withsupport already available inBlink and generally positivesentiment in Firefox.The blocking=render attribute allows developers to explicitly mark a resourceas render blocking, but… why on earth would you want to do that?!The short answer is: generally, you wouldn’t. Unless you know you needthis behaviour, you don’t need it.But how do you know if you do need it? Read on…What is blocking=render?The spec says:A blocking attribute explicitly indicates that certain operations should beblocked on the fetching of an external resource. The operations that can beblocked are represented by possible blocking tokens, which are strings listedby the following table […]2.5.8 Blocking attributesCurrently, there is only one token specified: render. The spec is extensibleso that other values could be added as the need arises—potential scenarios thathave beendisc

A trivial performance optimisation to help speed up third-party or other-originrequests is to preconnect them: hint that the browser should preemptively opena full connection (DNS, TCP, TLS) to the origin in question,for example:<link rel=preconnect href=https://fonts.googleapis.com>In the right circumstances, this simple, single line of HTML can make pageshundreds of millisecondsfaster!But time and again, I see developers misconfiguring even this most basic offeatures. Because, as is often the case, there’s much more to this ‘basicfeature’ than meets the eye. Let’s dive in…Learn by ExampleAt the time of writing, the BBC News homepage (inthe UK, at least) has these four preconnects defined early in the <head>:<link rel=preconnect href=//static.bbc.co.uk crossorigin><link rel=preconnect href=//m.files.bbci.co.uk crossorigin><link rel=preconnect href=//nav.files.bbci.co.uk crossorigin><link rel=preconnect href=//ichef.bbci.co.uk crossorigin>Readers on narrow screens should know that each

I began writing this article in early July 2023 but began to feel a littleunderwhelmed by it and so left it unfinished. However, afterrecent and reneweddiscussions around therelevance and usefulness of build steps, I decided to dust it off and get itfinished.Let’s go!When serving and storing files on the web, there are a number of differentthings we need to take into consideration in order to balance ergonomics,performance, and effectiveness. In this post, I’m going to break these processesdown into each of:🤝 Concatenating our files on the server: Are we going to send manysmaller files, or are we going to send one monolithic file? The former makesfor a simpler build step, but is it faster?🗜️ Compressing them over the network: Which compression algorithm, ifany, will we use? What is the availability, configurability, and efficacy ofeach?🗳️ Caching them at the other end: How long should we cache files ona user’s device? And do any of our previous decisions dictate our options?🤝 Conca...

Try out the max-agecalculator.If you wanted to cache a file ‘forever’, you’d probably use a Cache-Controlheader like this:Cache-Control: max-age=31536000This instructs any cache that it may store and reuse a response for one year (60seconds × 60 minutes × 24 hours × 365 days = 31,536,000 seconds). But whyone year? Why not 10 years? Why not max-age=forever? Why not max-age=∞?!I wondered the same. Let’s find out together.Like spoilers? See the answer. It’s 2147483648 seconds, or 68 years. To find out why, read on!max-agemax-age is a Cache-Control directive that instructs a cache that it maystore and reuse a response for n seconds from the point at which itentered the cache in question. Once that time has elapsed, the cache shouldeither revalidate the file with the origin server, or do whatever anyadditional directives may have instructed it todo. But why might we want to havea max-age that equates to forever?immutableIf we’re confident that we can cache a file for a year, we must be also

If you work in customer support for any kind of tech firm, you’re probably alltoo used to talking people through the intricate, tedious steps of clearingtheir cache and clearing their cookies. Well, there’s an easier way!Getting Someone to Clear Their Own CacheTrying to talk a non-technical customer through the steps of clearing their owncache is not an easy task—not at all! From identifying their operating system,platform, and browser, to trying to guide them—invisibly!—through differentscreens, menus, and dropdowns is a big ask.Thankfully, any company that has folk in customer support can make use of a newweb platform feature to make the entire process a breeze: Clear-Site-Data.Clear-Site-DataA relatively new HTTPheader,available in most modern browsers, allows developers to declaratively clear dataassociated with a given origin1 via one simple response header:Clear-Site-Data.Clear-Site-Data: "cache", "cookies"Any response carrying this header will clear the caches2 associated with t

At the time of writing,99.9% of pages on theweb include at least one image. The median image-weight per page landed at881KB in 2022,which is more than HTML, CSS, JS, and fonts combined! And while images do notblock rendering (unless you do somethingsilly), it’simportant to consider how we offer a reasonably pleasant experience while usersare waiting for images to load. One solution to that problem is Low-QualityImage Placeholders.Low-Quality Image PlaceholdersLow-Quality Image Placeholders are nothing new. GuyPodjarny is responsible, I think, for coiningthe term over a decadeago! Andbefore that, we even had the lowsrc attribute for <img> elements:<img lowsrc=lo-res.jpg src=hi-res.jpg alt>I wish we’d never deprecatedlowsrc—itwould have saved us so much hassle in the long run.The technique is simple: as images are typically heavier and slower resources,and they don’t block rendering, we should attempt to give users something tolook at while they wait for the image to arrive. The solution