Sign in

Harry Roberts

@csswizardry.com
6.4K followers 196 following 427 posts

🚀 Independent Web Performance Consultant • Speaker • Google Developer Expert, Web Performance • Accepting new clients • harry.is/for-hire

PostsRepliesMedia
Harry Roberts @csswizardry.com · 7h
#WebPerfWednesday 11 is out, in which we fix a longstanding bug in @speedcurve.com, and Safari gets network throttling! csswizardry.com/2026/09/web-...
csswizardry.com
Web-Perf Wednesday 011 – SpeedCurve’s INP Observer Missed Its Threshold – CSS Wizardry
A long-standing lux.js bug left Event Timing on its 104 ms default, while browser releases improve testing and rendering performance.
001
Harry Roberts @csswizardry.com · 28/09/2026
Tomorrow, I’m starting a new project with LEGO. Look how excited I am!
An AI rendering of Harry Roberts as a LEGO man. He’s wearing a pink shirt and dark jeans and is gesturing as though speaking/presenting.
3370
Harry Roberts @csswizardry.com · 17/09/2026
What is Time to First Byte and what can you do about it? csswizardry.com/2019/08/time...
csswizardry.com
Time to First Byte: What It Is and How to Improve It – CSS Wizardry
Just how much does TTFB matter when it comes to front-end performance?
0101
Harry Roberts @csswizardry.com · 14/09/2026
Are you getting the most out of your Speculation Rules? Probably not! csswizardry.com/2024/12/a-la...
csswizardry.com
A Layered Approach to Speculation Rules – CSS Wizardry
The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered approach, we can add more progressive functionality.
051
Harry Roberts @csswizardry.com · 11/09/2026
If you’re tracking your Core Web Vitals with synthetic, you probably also want to track your Total Blocking Time window: csswizardry.com/2026/06/fron...
csswizardry.com
Front-End’s Missing Metric: The TBT Window – CSS Wizardry
The TBT Window is the FCP-to-TTI interval used to calculate Total Blocking Time. If FCP or TTI moves, TBT can change even when long tasks do not.
073
Harry Roberts @csswizardry.com · 10/09/2026
Over the last day or so, Codex and I have been working on adding a proper taxonomy and associated categories and tags to the blog. Finally, @csswizardry.com has a proper archive! csswizardry.com/blog/
csswizardry.com
CSS Wizardry Blog Archives – CSS Wizardry
Browse the full CSS Wizardry archive of articles on web performance, Core Web Vitals, caching, CSS architecture, and front-end engineering.
250
Harry Roberts @csswizardry.com · 10/09/2026
Another day, another compelling use case for `No-Vary-Search`! csswizardry.com/2026/05/bett...
csswizardry.com
Better Browser Caching with No-Vary-Search – CSS Wizardry
No-Vary-Search lets HTTP caches ignore irrelevant query parameters such as UTM tags, while still keeping meaningful ones like product variants in the cache key.
1223
Harry Roberts @csswizardry.com · 09/09/2026
I have ChatGPT read my `.vimrc` and send me a daily #Vim tip to read with my morning coffee.
040
Harry Roberts @csswizardry.com · 04/09/2026
I’ve always had a very good habit of `[TAGGING]` things like calendar events or Jira titles and the like — it makes it so much easier to find arbitrary topics with simple grep or search. It turns out it’s *incredibly* useful in this agentic world!
030
Harry Roberts @csswizardry.com · 03/09/2026
I’ve been using @talat.app for a few months now and it’s completely changed how I handle meetings. I’ll prime Codex for an upcoming call and what I need out of it, then point it at the Talat MCP and get it to extract the bits that are meaningful.
220
Harry Roberts @csswizardry.com · 03/09/2026
I added BCP 14 rules to `AGENTS.md`. Let’s see if/how that helps when writing spec-like prompts.
### Interpret Requirement Keywords Consistently

Interpret requirement keywords in Harry’s input in accordance with BCP 14 when, and only when, they appear in all capitals. Give forms that are not in all capitals their ordinary English meanings. Apply the same rule to third-party input when the context reasonably suggests that the author intended BCP 14 usage. Uppercase keywords do not by themselves make the input contractual or formally normative.

If a keyword’s meaning, feasibility, priority, or interaction with another instruction is uncertain, ask a focused clarifying question before proceeding. Name the conflict and its practical consequence; for example: ‘You said `MUST`, but the current API cannot satisfy that requirement. How should we proceed?’ Treat this as an illustrative pattern, not an exhaustive scenario.
120
Harry Roberts @csswizardry.com · 26/08/2026
🗓️ Published! This week’s #webPerfWednesday looks at Chome’s new release cadence, Unattributed Navigation Overhead, and soft navs in DevTools: csswizardry.com/2026/08/web-...
csswizardry.com
Web-Perf Wednesday 006 – Faster Browser Releases Change Your RUM Population – CSS Wizardry
Chrome and Firefox are moving to two-week releases, making browser cadence part of how teams interpret RUM and plan performance testing.
010
Harry Roberts @csswizardry.com · 22/08/2026
Today, I walked around Costco snapping photos of meat labels. I slung them all into my own personal chef GPT, Pierre. 👈 This was my input and 👉 That is their output. For <£400 all in, I’m eating like a king five days a week up until 19 November.
ChatGPT prompt detailing exact instructions for designing meals around my calendar.Calendar events that my ChatGPT pal, Pierre, has earmarked for me. Live in Google Calendar.
170
Harry Roberts @csswizardry.com · 21/08/2026
I wrote this up a bit more formally: csswizardry.com/2026/08/how-...
csswizardry.com
How to Find an Exact Gmail Thread with Codex or Claude – CSS Wizardry
Use Gmail’s Message-ID to point Codex or Claude at one exact email and retrieve the complete conversation rather than a plausible result.
040
Harry Roberts @csswizardry.com · 20/08/2026
Instead of asking Codex to look in Gmail for ‘[subject]’ (risky and prone to duplicates or misinterpretation), head to ‘Show original’ and use the RFC 822 `MESSAGE-ID` (from 1982!) to target an exact specific message. From there, it can surface the entire visible thread.
250
Harry Roberts @csswizardry.com · 20/08/2026
If you use @speedcurve.com—and you should—then LUX Sidecar is for you! csswizardry.com/2026/08/intr...
csswizardry.com
Introducing LUX Sidecar: Your SpeedCurve Companion – CSS Wizardry
LUX Sidecar is a small SpeedCurve RUM plugin that adds browser and navigation context to your real-user performance data.
061
Harry Roberts @csswizardry.com · 19/08/2026
Unattributed Navigation Overhead is one of the biggest things you’re missing out on… csswizardry.com/2026/08/uno-...
csswizardry.com
Unattributed Navigation Overhead (UNO) Is Underrated – CSS Wizardry
Unattributed Navigation Overhead exposes the part of Time to First Byte that Navigation Timing cannot explain, including hidden cross-origin redirects.
052
Harry Roberts @csswizardry.com · 19/08/2026
#webPerfWednesday no. 5 is live! We look at DevTools bug fixes that landed in preview versions of Chrome and Safari, as well as new streamable `fetch` uploads (confusing): csswizardry.com/2026/08/web-...
csswizardry.com
Web-Perf Wednesday 005 – RUM Needs More Than a Percentile – CSS Wizardry
LUX Sidecar adds context to RUM, while browser-tool fixes show why measurement conditions and small debugging details matter.
020
Harry Roberts @csswizardry.com · 17/08/2026
🐛 Safari published an unusually terse bug fix in STP 250 — I looked into It. csswizardry.com/2026/08/when...
csswizardry.com
When Safari’s ‘Ignore Cache’ Ignored Cache-Control – CSS Wizardry
Safari Technology Preview 250 fixed a subtle Web Inspector bug that overwrote page-authored Cache-Control request headers when the resource cache was disabled.
030
Harry Roberts @csswizardry.com · 31/07/2026
Friday freebie for all you @speedcurve.com fans: LUX Sidecar – Your SpeedCurve Companion gist.github.com/csswizardry/...
gist.github.com
LUX Sidecar – Your SpeedCurve Companion
LUX Sidecar – Your SpeedCurve Companion. GitHub Gist: instantly share code, notes, and snippets.
020
Harry Roberts @csswizardry.com · 31/07/2026
I’ve started including a `mission-statement.md` alongside my project-level `AGENTS.md`. It contains philosophical notes about the project: why it exists, what questions it exists to answer, what ‘good’ looks like, etc.
Three vertically stacked Vim windows showing Markdown mission statements for different client engagements. Each document begins with a heading and concise project summary. Client names have been replaced with placeholders and identifying path information is redacted.
2441
Harry Roberts @csswizardry.com · 21/07/2026
🤳 I just published the 2026 update to my ongoing research, ‘Low- and Mid-Tier Mobile for the Real World’. What are this year’s target hardware? Find out! csswizardry.com/2026/07/low-...
csswizardry.com
Low- and Mid-Tier Mobile for the Real World (2026) – CSS Wizardry
The 2026 update to my real-world device testing recommendations paints a clearer picture than ever…
1152
Harry Roberts @csswizardry.com · 15/07/2026
Has anyone written/built an `llms.txt` that they’re really happy with? And have you noticed it working/helping? I recently updated my research agent to check all websites for `/llms.txt` before diving straight into parsing pages of HTML and I’m looking forward to seeing if/how effective it is.
460
Harry Roberts @csswizardry.com · 08/07/2026
If you’re doing any reasonable amount of performance work, ensure you have a fresh browser profile with no ad blockers installed, and ensure this is unchecked (Chrome)! You’re only getting part of the picture otherwise.
160
Harry Roberts @csswizardry.com · 29/06/2026
For the last month or so, I’ve been playing Wordle against ChatGPT and keeping track of our scores. It’s incredibly close, but I’m just winning.
ChatGPT screenshot showing a Wordle leaderboard. Of 27 games played, it shows that I’ve spent 103 total guesses (for an average of 3.81/game) to its 107 (3.96 average).
220
Harry Roberts @csswizardry.com · 26/06/2026
A great, succinct, informative write up from my pal @matuzo.at! Context-aware headings in HTML: www.matuzo.at/blog/2026/co...
matuzo.at
Context-aware headings in HTML - Manuel Matuzovic
I’m a frontend developer, consultant, accessibility auditor, blogger, teacher, and book author from Austria.
082
Harry Roberts @csswizardry.com · 25/06/2026
It’s true…
Harry Roberts presenting on stage at Developers Up North beside a large slide reading ‘that shouldn’t have been an spa’. Audience members are seated in the foreground while he speaks from behind a lectern with a laptop.
4104
Harry Roberts @csswizardry.com · 19/06/2026
Today, I spoke at the inaugural #DUNC26 in Hull—a real gem of a city. The conference packed so much diversity of content into a one-day, one-track event, BUT! My favourite takeaway is that every single speaker listed a personal site/blog in their slides. I visited every one of them. What a day.
051
Harry Roberts @csswizardry.com · 02/06/2026
🔍 I can’t help but feel like we’re missing something… Front-End’s Missing Metric: csswizardry.com/2026/06/fron...
csswizardry.com
Front-End’s Missing Metric: The TBT Window – CSS Wizardry
The TBT Window is the FCP-to-TTI interval used to calculate Total Blocking Time. If FCP or TTI moves, TBT can change even when long tasks do not.
1154
Harry Roberts @csswizardry.com · 26/05/2026
🎤 I’m speaking at #LeedsJS TONIGHT! Free to attend. Be there or be aspect-ratio: 1; www.meetup.com/leeds-js/eve...
meetup.com
Web Performance Special — with Harry Roberts & Leaning Technologies, Tue, May 26, 2026, 6:00 PM | Meetup
Join us this May for a special Leeds JS event focused entirely on **web performance** — one of the most critical (and often overlooked) aspects of modern web development. W
190
Harry Roberts @csswizardry.com · 13/05/2026
🩺 Meet Your Users Where They Are with Obs.js csswizardry.com/2026/05/meet...
020
Harry Roberts @csswizardry.com · 11/05/2026
An important update courtesy of @tunetheweb.com! csswizardry.com/2026/05/bett...
0103
Harry Roberts @csswizardry.com · 11/05/2026
Show, don’t tell! A couple of years ago, I ran a custom INP workshop for a client, and built an interactive demo to show them what their site FEELS like. Today, I decided to polish it and publish it!
120
Harry Roberts @csswizardry.com · 07/05/2026
I’ve been working with a client who runs a lot of social media and ad campaigns, so we’ve been deploying the experimental `No-Vary-Search HTTP` header. It’s amazing to see it actually working! Read all about it here: csswizardry.com/2026/05/bett...
csswizardry.com
Better Browser Caching with No-Vary-Search – CSS Wizardry
No-Vary-Search lets HTTP caches ignore irrelevant query parameters such as UTM tags, while still keeping meaningful ones like product variants in the cache key.
46827
Harry Roberts @csswizardry.com · 10/04/2026
‼️ BEWARE! `font-family` Doesn’t Fall Back the Way You Think: csswizardry.com/2026/04/font...
csswizardry.com
font-family Doesn’t Fall Back the Way You Think – CSS Wizardry
A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume.
2100
Harry Roberts @csswizardry.com · 09/04/2026
Play with it here: jsbin.com/toriwawari/e...
jsbin.com
JS Bin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...
140
Harry Roberts @csswizardry.com · 09/04/2026
PSA, this is why you keep seeing Times New Roman all over your site. #CSS #CLS #Typography
/**
 * FONT-FAMILY
 * ===========
 *
 * font-family rules do not ‘inherit’ or fall back; they’re standalone
 * declarations. This means any emissions or errors in the current element’s
 * font-family declaration won’t fall back to a parent’s font-family, but to the
 * browser’s default for that element.
 *
 * This is why you’ll often see a flash of Times (New Roman) in place of
 * something more suitable.
 *
 * It’s vital that, in order to avoid layout shifts and unsightly fallbacks, you
 * should always specific a complete font stack for font-family rules, and not
 * just a single value.
 */

body {
  font-family: system-ui, sans-serif;
}

/**
 * INCORRECT
 * =========
 *
 * While your custom web font is loading, the following does NOT fall back to
 * the parent’s font-family (system-ui/sans), but to the browser’s default font
 * family for this element (usually serif).
 */
h1 {
  font-family: Open Sans;
}

/**
 * CORRECT
 * =======
 *
 * Delete the leading underscore.
 *
 * Now that we have a full font stack, the browser WILL fall back to
 * system-ui/sans while waiting on your custom font. No more flash of Times!
 */
h1 {
  _font-family: Open Sans, system-ui, sans-serif;
}
4141
Harry Roberts @csswizardry.com · 02/04/2026
🎨 I gotta say, my latest is a little treasure trove: what even is `contain`?! csswizardry.com/2026/04/what...
csswizardry.com
What Is CSS Containment and How Can I Use It? – CSS Wizardry
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
2288
Harry Roberts @csswizardry.com · 30/03/2026
I miss #WebDayOut :(
251
Reposted by Harry Roberts
David Bushell 🪿 @dbushell.com · 30/03/2026
reading: What Is CSS Containment and How Can I Use It? csswizardry.com/2026/04/what... — my prayers were answered! Harry explains all 🙏 for my next wish...
csswizardry.com
What Is CSS Containment and How Can I Use It? – CSS Wizardry
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
1137
Reposted by Harry Roberts
Barry Pollard @tunetheweb.com · 29/03/2026
100% agree with this! Browsers are AMAZING at loading a page in mostly the right way by default. There are lots of extra options (fetchpriority, loading=lazy) to tweak that further if you know with reasonably certainly that they could benefit from those. If it’s ambiguous, then leave it be.
0101
Harry Roberts @csswizardry.com · 29/03/2026
🚫 When All You Can Do Is All or Nothing, Do Nothing For all you weekend warriors, advice for times of uncertainty. csswizardry.com/2026/03/when...
csswizardry.com
When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry
If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.
0236
Harry Roberts @csswizardry.com · 20/03/2026
🇳🇱 Freshly back from a wonderful working week in The Hague. I shall never tire of this beautiful city.
Sunlit canal in The Hague with calm reflections, a white villa on the left, cyclists and parked bikes along the right-hand path, and a tram crossing a bridge in the distance under a clear blue sky
0220
Harry Roberts @csswizardry.com · 13/03/2026
Well, Brighton, you’ve been stunning as always. Thank you so much to @adactio.com and the @clearleft.com team for having me at #WebDayOut, an invigorating and inspiring shot in the arm to kick conference season off proper.
Me gazing longingly at Jeremy while he introduces me on stage at Web Day Out.
1111
Harry Roberts @csswizardry.com · 12/03/2026
Me looking at standardised web APIs like… #WebDayOut
A photo of me on-stage taken from the vantage point of an audience member. I’m pulling a face that looks almost kind of lustful in a way. I’m actually glad you can’t see it—it isn’t flattering.
0150
Reposted by Harry Roberts
Marc Thiele @marcthiele.com · 12/03/2026
Hello and good morning from Brighton, where I attend #WebDayOut. If you want to follow along visually, here is my set of photos that document the day. More to follow. marcthiele.com/photos/web-d...
marcthiele.com
Web Day Out 2026 – Photos by Marc Thiele
This is my set of photos from Web Day Out 2026 in Brighton.
097
Harry Roberts @csswizardry.com · 12/03/2026
Slides from my #WebDayOut talk, ‘Build for the Web, Build on the Web, Build With the Web’. Incredibly proud of this one. speakerdeck.com/csswizardry/...
speakerdeck.com
Build for the Web, Build on the Web, Build With the Web
Every layer of abstraction made in the browser moves you further from the platform, ties you further into framework lock-in, and moves you further away &hellip;
3484
Harry Roberts @csswizardry.com · 12/03/2026
And we’re off! #WebDayOut
Jeremy Keith on stage introducing Web Day Out.
190
Harry Roberts @csswizardry.com · 11/03/2026
Hey, Bluesky! Have some blue sky. I’m in beautiful Brighton for @clearleft.com’s #WebDayOut tomorrow. Who else is here?
3221
Harry Roberts @csswizardry.com · 08/12/2025
I’ve been consulting for 12 years and I still get a real rush every time an enquiry comes in. An amazing feeling!
2130