A trivial performance optimisation to help speed up third-party or other-origin requests is to preconnect them: hint that the browser should preemptively open a 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 pages hundreds of milliseconds faster! But time and again, I see developers misconfiguring even this most basic of features. Because, as is often the case, there’s much more to this ‘basic feature’ than meets the eye. Let’s dive in ..read more

I began writing this article in early July 2023 but began to feel a little underwhelmed by it and so left it unfinished. However, after recent and renewed discussions around the relevance and usefulness of build steps, I decided to dust it off and get it finished. Let’s go! When serving and storing files on the web, there are a number of different things we need to take into consideration in order to balance ergonomics, performance, and effectiveness. In this post, I’m going to break these processes down into each of: ? Concatenating our files on the server: Are we going to send many smaller ..read more

If you wanted to cache a file ‘forever’, you’d probably use a Cache-Control header like this: Cache-Control: max-age=31536000 This instructs any cache that it may store and reuse a response for one year (60 seconds × 60 minutes × 24 hours × 365 days = 31,536,000 seconds). But why one 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-age max-age is a Cache-Control directive that instructs a cache that it may store and reuse a resp ..read more

If you work in customer support for any kind of tech firm, you’re probably all too used to talking people through the intricate, tedious steps of clearing their cache and clearing their cookies. Well, there’s an easier way! Getting Someone to Clear Their Own Cache Trying to talk a non-technical customer through the steps of clearing their own cache is not an easy task—not at all! From identifying their operating system, platform, and browser, to trying to guide them—invisibly!—through different screens, menus, and dropdowns is a big ask. Thankfully, any company that has folk in customer suppor ..read more

At the time of writing, 99.9% of pages on the web include at least one image. The median image-weight per page landed at 881KB in 2022, which is more than HTML, CSS, JS, and fonts combined! And while images do not block rendering (unless you do something silly), it’s important to consider how we offer a reasonably pleasant experience while users are waiting for images to load. One solution to that problem is Low-Quality Image Placeholders. Low-Quality Image Placeholders Low-Quality Image Placeholders are nothing new. Guy Podjarny is responsible, I think for coining the term over a decade ago ..read more

Google’s Core Web Vitals initiative was launched in May of 2020 and, since then, its role in Search has morphed and evolved as roll-outs have been made and feedback has been received. However, to this day, messaging from Google can seem somewhat unclear and, in places, even contradictory. In this post, I am going to distil everything that you actually need to know using fully referenced and cited Google sources. Don’t have time to read 5,500+ words? Need to get this message across to your entire company? Hire me to deliver this talk internally. If you’re happy just to trust me, then this is al ..read more

This article started life as a Twitter thread, but I felt it needed a more permanent spot. You should follow me on Twitter if you aren’t already. I’ve been asked a few times—mostly in workshops—why HTTP/2 (H/2) waterfalls often still look like HTTP/1.x (H/1). Why are hings are done in sequence rather than in parallel? Let’s unpack it! Fair warning, I am going to oversimplify some terms and concepts. My goal is to illustrate a point rather than explain the protocol in detail. One of the promises of H/2 was infinite parallel requests (up from the historical six concurrent connections in H/1). So ..read more

Honestly, I started writing this article, for no real reason and somewhat without context, in December 2022—over half a year ago! But, I left it in _drafts/ until today, when a genuinely compelling scenario came up that gives real opportunity for explanation. It no longer feels like trivia-for-the-sake-of-it thanks to a recent client project. I never thought I’d write an article in defence of DOMContentLoaded, but here it is… For many, many years now, performance engineers have been making a concerted effort to move away from technical metrics such as Load, and toward more user-facing, UX metr ..read more

N.B. This is an update to my 2020 article Site-Speed Topography. You will need to catch up with that piece before this one makes sense. Around two and a half years ago, I debuted my Site-Speed Topography technique for getting broad view of an entire site’s performance from just a handful of key URLs and some readily available metrics. In that time, I have continued to make extensive use of the methodology (alongside additional processes and workflows), and even other performance monitoring tools have incorporated it into their own products. Also in that time, I have adapted and updated the too ..read more

If you’ve ever run a Lighthouse test before, there’s a high chance you’ve seen the audit Avoid document.write(): For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. You may have also seen that there’s very little explanation as to why document.write() is so harmful. Well, the short answer is: From a purely performance-facing point of view, document.write() itself isn’t that special or unique. In fact, all it does is surfaces potential behaviours already present in any synchronous script—the only main difference is ..read more