tag:speakerdeck.com,2005:/csswizardry tag:speakerdeck.com,2005:Talk/1516097 2026-03-12T05:53:46-04:00 2026-03-12T05:59:27-04:00 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 from fast. By using progressive enhancement, you can opt into browser-native features that are usually faster, more accessible, more secure, and—perhaps most importantly to the business—maintained by someone else. The beauty of opting into web platform features as they become available is that your site becomes contextual. The same codebase adapts into its environment, playing to its strengths, rather than trying to build and ship your own environment from the ground up. Meet your users where they are. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/1277962 2024-11-14T09:51:10-05:00 2024-11-15T07:57:37-05:00 Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/1213616 2024-07-17T06:36:55-04:00 2024-07-17T06:43:38-04:00 As awareness and tooling around site speed have been improving at a very exciting rate, has performance testing actually become any easier? Any more straightforward? As someone who spends every day auditing client projects, I think areas of confusion have actually increased in many places. Which tools should we be using? Can we trust them? How do we run tests that serve as realistic and actionable predictors? And how do we know when we’ve won? In this talk, we’ll look at highly practical tools and workflows to ensure that every test we run has a purpose and gives us data we can truly leverage. By the end, we will all have a shared idea of what effective performance testing looks like, as well as customised and fine-tuned tooling to ensure replicable and predictable tests. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/1081381 2023-09-22T10:38:52-04:00 2023-09-25T17:34:37-04:00 Caching is something most developers take for granted, but experience tells me time and time again that most developers also don’t understand how to configure their caching rules safely, correctly, or effectively. Do you know what no-cache means? Do you know what the Pragma header does? Do you know the difference between Last-Modified or ETag? Expires or Cache-Control? You will soon. In this talk, we’ll remove the noise, get rid of everything we don’t need, and then step through a series of real-life scenarios to work out how to solve almost any caching situation with a series of questions. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/1030196 2023-05-23T20:23:54-04:00 2023-05-23T20:31:50-04:00 Working as a performance consultant, I tend to collaborate with many different clients over the course of a year. Two things they all have in common: they all know their website is slow, but they don’t know why or where. When some sites can run to dozens of templates across thousands of pages, finding problem areas can feel like shooting in the dark, and making a start can feel completely paralysing. In this talk, we’ll look at some practical approaches, tools, and workflows to quickly and effectively determine where our primary liabilities lie, what they are, and—most importantly—which steps to take first. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/932273 2022-10-04T17:12:41-04:00 2022-11-08T08:18:23-05:00 Since Google announced their Core Web Vitals (CWV) initiative, being fast is more important than ever. However, despite being by far the easiest CWV to monitor, debug, and optimise—in both the lab and field—Largest Contentful Paint (LCP) is still the one that most websites struggle with. In this very practical talk, we’ll look at what exactly comprises LCP, how we might be working against ourselves, and how to make opportunistic optimisations to get ourselves back in the green (and beyond). And even if none of those terms meant anything to you, don’t worry! You’ll leave this talk fully equipped to go back to your own projects and clients and make all the improvements they’ll need. Get ready to ask for a pay rise. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/774675 2021-09-19T08:22:56-04:00 2021-09-27T07:16:12-04:00 Despite being the only section of a website that a user never sees, the HEAD is arguably the most important. It is bound to its own unique set of rules and often governs the overall speed of the page. In this talk, we’ll look at some specific caveats, some fascinating intricacies, and—critically—the optimum order for a faster HEAD. Find out why your HEAD tags are so messy, so vital, and, I promise you, so interesting. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/574254 2019-11-15T06:11:05-05:00 2019-11-15T06:21:00-05:00 We all know performance is big business, but how big? Let’s take a look at some of the numbers powering the web performance industry from both sides of the table. What do performance improvements mean for my clients, and how do we translate that into a working relationship? Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/511340 2019-04-20T09:22:13-04:00 2019-04-20T09:29:38-04:00 Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is?! Well, by the end of this talk, we’ll all be experts. Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser). Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/443131 2018-05-10T06:23:02-04:00 2018-11-13T10:11:49-05:00 Like it or not, a huge part of modern web development involves the use of third-party providers: fonts, analytics, ads, tracking, and more all have an impact of performance, and can leave us (or, more worryingly, our visitors) susceptible to performance degradation. In this talk, we’ll take a look at unruly or uninvited (third-)party guests: how to detect them, how to audit them, and how to manage them. We’ll also look at the different tools available to help us stress-test and quantify the overhead these third parties bring, and what that means for users and businesses alike. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/435179 2018-03-23T06:22:53-04:00 2018-06-01T08:49:39-04:00 Ahh… CSS and performance. Two of my favourite things! But how well do they play together? It depends… In this very matter-of-fact talk, we’ll be looking at all of the different ways CSS can make our websites faster or slower. From the common and perhaps more obvious, to the unusual and obscure ways in which CSS can impact performance for better or worse. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/427274 2018-02-05T16:37:40-05:00 2018-02-08T08:32:57-05:00 When most people think of Vim, they think of hardcore programmers and sysadmins staring at green and black terminal screens all day. In this talk, I’ll demystify some of Vim’s more esoteric ways, and show how we as front-end developers can make use of its powerful features. **N.B.** These slides won’t make a great deal of sense without their animated GIFs—sorry. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/391780 2017-05-17T05:02:51-04:00 2017-05-17T05:36:39-04:00 We’re all—I hope!—well aware that performance is important; it’s great for business and it’s great for our users. But things are still not fast enough. With more and more emerging markets coming online, and more and more apps moving to the web platform, we’re reaching an intersection where connections are getting slower and websites are getting heavier. In this talk, we’ll learn just what these emerging markets mean to us, and how we can begin to move in the right direction. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/354410 2016-08-03T07:20:28-04:00 2016-08-07T15:43:29-04:00 Refactoring CSS Without Losing Your Mind Working with CSS is tricky enough as it is; working with legacy CSS can be nightmarish. In this talk, we’ll look at how we decide what to refactor and when; how we can refactor code whilst still shipping features; how to avoid regressions when adding new CSS; how we can avoid the dreaded refactoring tunnels; running new and legacy code in tandem; and a bunch of other neat little tips and tricks. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/328613 2016-02-10T13:40:25-05:00 2016-02-10T19:11:18-05:00 Slides from my crowdsourced Webstock ’16 talk. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/326427 2016-01-21T14:29:08-05:00 2016-01-22T04:14:12-05:00 How CSS can improve (or harm) performance. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/311800 2015-09-15T05:33:30-04:00 2015-09-15T08:32:30-04:00 Applying traditional software engineering principles directly (or indirectly) to CSS. Harry Roberts (@csswizardry) tag:speakerdeck.com,2005:Talk/289063 2015-02-19T06:50:20-05:00 2015-03-24T23:05:12-04:00 A detailed look at four (and a bit) different ways to provide various types of theming functionality in your UI projects. Harry Roberts (@csswizardry) 2026-03-12T05:53:46-04:00