Consultant Web Performance Engineer https://speakerdeck.com/csswizardry 2015-02-19 06:50:20 -0500 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. 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. Thu, 12 Mar 2026 00:00:00 -0400 https://speakerdeck.com/csswizardry/build-for-the-web-build-on-the-web-build-with-the-web https://speakerdeck.com/csswizardry/build-for-the-web-build-on-the-web-build-with-the-web Thu, 14 Nov 2024 00:00:00 -0500 https://speakerdeck.com/csswizardry/site-speed-that-sticks https://speakerdeck.com/csswizardry/site-speed-that-sticks 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. 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. Wed, 17 Jul 2024 00:00:00 -0400 https://speakerdeck.com/csswizardry/how-to-think-like-a-performance-engineer https://speakerdeck.com/csswizardry/how-to-think-like-a-performance-engineer 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. 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. Sat, 23 Sep 2023 00:00:00 -0400 https://speakerdeck.com/csswizardry/cache-rules-everything https://speakerdeck.com/csswizardry/cache-rules-everything 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. 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. Wed, 24 May 2023 00:00:00 -0400 https://speakerdeck.com/csswizardry/my-website-is-slow-where-do-i-start https://speakerdeck.com/csswizardry/my-website-is-slow-where-do-i-start 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. 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. Thu, 06 Oct 2022 00:00:00 -0400 https://speakerdeck.com/csswizardry/optimising-largest-contentful-paint https://speakerdeck.com/csswizardry/optimising-largest-contentful-paint 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. 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. Wed, 22 Sep 2021 00:00:00 -0400 https://speakerdeck.com/csswizardry/get-your-head-straight https://speakerdeck.com/csswizardry/get-your-head-straight 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? 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? Fri, 08 Nov 2019 00:00:00 -0500 https://speakerdeck.com/csswizardry/from-milliseconds-to-millions-a-look-at-the-numbers-powering-web-performance https://speakerdeck.com/csswizardry/from-milliseconds-to-millions-a-look-at-the-numbers-powering-web-performance 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). 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). Sat, 20 Apr 2019 00:00:00 -0400 https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints https://speakerdeck.com/csswizardry/more-than-you-ever-wanted-to-know-about-resource-hints 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. 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. Fri, 11 May 2018 00:00:00 -0400 https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to https://speakerdeck.com/csswizardry/its-my-third-party-and-ill-cry-if-i-want-to 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. 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. Fri, 23 Mar 2018 00:00:00 -0400 https://speakerdeck.com/csswizardry/facsst-css-and-performance-1 https://speakerdeck.com/csswizardry/facsst-css-and-performance-1 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. 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. Thu, 08 Feb 2018 00:00:00 -0500 https://speakerdeck.com/csswizardry/vim-for-front-end-developers https://speakerdeck.com/csswizardry/vim-for-front-end-developers 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. 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. Wed, 17 May 2017 00:00:00 -0400 https://speakerdeck.com/csswizardry/why-fast-matters https://speakerdeck.com/csswizardry/why-fast-matters 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. 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. Sun, 07 Aug 2016 00:00:00 -0400 https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind Slides from my crowdsourced Webstock ’16 talk. Slides from my crowdsourced Webstock ’16 talk. Wed, 10 Feb 2016 00:00:00 -0500 https://speakerdeck.com/csswizardry/a-rather-peculiar-journey https://speakerdeck.com/csswizardry/a-rather-peculiar-journey How CSS can improve (or harm) performance. How CSS can improve (or harm) performance. Thu, 21 Jan 2016 00:00:00 -0500 https://speakerdeck.com/csswizardry/facsst-css-and-performance https://speakerdeck.com/csswizardry/facsst-css-and-performance Applying traditional software engineering principles directly (or indirectly) to CSS. Applying traditional software engineering principles directly (or indirectly) to CSS. Tue, 15 Sep 2015 00:00:00 -0400 https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers A detailed look at four (and a bit) different ways to provide various types of theming functionality in your UI projects. A detailed look at four (and a bit) different ways to provide various types of theming functionality in your UI projects. Thu, 19 Feb 2015 00:00:00 -0500 https://speakerdeck.com/csswizardry/4half-methods-for-theming-in-s-css https://speakerdeck.com/csswizardry/4half-methods-for-theming-in-s-css