masterclasses.md

layout	title	page-class	meta	main	permalink	lux	masterclasses
page	Masterclasses: Empower Your Talent	page--services page--masterclasses	Short, targeted masterclasses covering a range of performance topics	/img/content/masterclass/custom.jpg	/masterclasses/	Services / Masterclasses	title image intro description WebPageTest: An Introduction wpt-basics We’ve done PageSpeed Insights and now we want to level up! Let’s get started with WebPageTest… Getting started with WebPageTest can be pretty daunting, but this Masterclass will get you comfortable and confident with the basics: <ul><li>running your first test;</li> <li>sensible setup;</li> <li>best practices for best results;</li> <li>key features;</li> <li>early analysis.</li></ul> title image intro description WebPageTest: Power User wpt WebPageTest is the gold standard in performance testing, but are you getting the most out of it? WebPageTest is pretty powerful as-it-is and out-of-the-box, but it can do so much more! Let’s learn: <ul> <li>scripting user journeys;</li> <li>testing behind logins;</li> <li>dealing with cookie banners;</li> <li>capturing custom metrics.</li></ul> title image intro description Setting up DevTools for Performance Testing devtools DevTools are amazing! But that can make them intimidating. Let’s get you all set up with the most finely-tuned Chrome DevTools possible. Performance testing becomes a lot more reliable if you have a forensic environment. It gets a lot more replicable if your entire team shares the same setup. This Masterclass will show you the ultimate configuration to make your DevTools as accurate and trustable as possible, as well as the secret tips, tricks, and workflows needed to take performance testing to the next level. title image intro description Performance Testing in Mobile Safari ios With an overwhelming focus on Core Web Vitals (which are Chrome-only, for now), it’s all too easy to overlook our iOS users! Let’s fix that. As WebKit is a fundamentally different rendering engine, it requires a whole different approach when it comes to auditing web performance on iOS. Let’s look at the tools and workflows needed to keep your iPhone users smiling. title image intro description My Website Is Slow—Where Do I Start?! my-website-is-slow You know your website is slow, but do you know why? Let’s find out together… Let’s look at processes for early analysis: how do we quickly figure out the root causes of our issues? How can we hone in on problems as effectively as possible? Not only will this Masterclass help you troubleshoot current issues, but the techniques we learn can be transferred to any project at all! title image intro description conjunction Site-Speed Teardown teardown A live, realtime, interactive site-speed audit of your web app. Want a realtime, in-person audit of your site or app? This Masterclass will combine aspects of all other Masterclasses, but not with the same depth. A teardown will give you actionable insights while also demonstrating the techniques and strategies I use to begin performance audits. a title image price intro description conjunction Custom Masterclass custom 5,000 Not listed here? Let’s design it together! If you have an idea for a custom curriculum, or the things you’re interested in aren’t already available, let’s work together to design a custom Masterclass. a title image intro description Core Web Vitals for SEOs cwv-seo Level up your SEO offering by providing Core Web Vitals audits! If you’re an SEO specialist, you know better than anyone about the importance of passing Google’s Core Web Vitals. In this Masterclass, I will show you how to get started debugging these issues yourself so that you can better service your SEO clients. title image intro description Effective Performance Monitoring monitoring Performance budgets, real-user monitoring, regression thresholds, and incident response. Get it all covered here. Building a performance culture becomes a lot easier if you have the right tools and processes in place. Thankfully, I have helped dozens of companies set up effective, robust, and pragmatic monitoring to make keeping on top of site-speed a breeze. title image intro description Caching Strategies for Everyone caching Stuggling to tell your <code>max-age</code> from your <code>Expires</code>? Your <code>Last-Modified</code> from your <code>Etag</code>? Not any more! Caching is a confusing and often contradictory subject. Which headers do we need? How long can we cache something for? How do we guarantee something will never get cached at all?! In this Masterclass, we’ll look at the different options we have available—and what they do—as well as suitable strategies for our own projects. title image intro description LCP Deep-Dive lcp A specific Masterclass to deep-dive on <i>Largest Contentful Paint</i>—what it is, how to debug it, and how to improve it! Largest Contentful Paint is one of three Core Web Vitals, and is currently the one that most sites struggle with! Are you one of them? This Masterclass will help us identify key contributors to LCP, and opportunistic upgrades to improve it. title image intro description INP Deep-Dive inp A specific Masterclass to deep-dive on <i>Interaction to Next Paint</i>—what it is, how to debug it, and how to improve it! INP became a Core Web Vital in March of 2024—and most sites seem to be doing well with it! For those who aren’t, this Masterclass will arm developers with the tools and tactics needed to identify and debug INP issues. title image intro description CLS Deep-Dive cls A specific Masterclass to deep-dive on <i>Cumulative Layout Shift</i>—what it is, how to debug it, and how to improve it! CLS isn’t a speed-oriented metric per se, but it is a Core Web Vital. It’s also unusually hard to debug, but this Masterclass will show you a series of tips and tricks I have devised over the last few years of working on site-speed, as well as some neat quick-win optimisations to help improve! title image intro description Third Parties third-parties Third party issues tend to plague most commercial sites—how can we take the edge off of it? Third parties are a necessary evil, but not all are born equal—some are much worse than others! This Masterclass will give us strategies for quantifying the impact of third parties, working with Consent Management Platforms, governing tag managers, and a whole host more. title image intro description Memory Management: The Basics memory Memory isn’t something we tend to look at much in a world of Core Web Vitals, but it’s still incredibly important for users on low-powered devices. Lots of things use memory, but which ones are slowing us down? Is it a memory leak? DOM size? Something else? Tooling around memory usage is pretty deep and complex, so this Masterclass helps to demistify it in order to detect and debug memory issues in our applications. title image price intro description conjunction Ask Me Anything! ama 500 If you just have questions, then you’re looking for a <i>Consultation</i>. For ligh-touch, general advice I already have a consultation service available. You can book one immediately! an

Level up Your Whole Team With Masterclasses

Dive into highly focused, highly specialised, highly advanced web performance tutorials, on demand. Bite-sized, live, remote workshops to take your team from zero to expert on the topic of your choice.

Thank you so much for the excellent session, Harry—it was a lot of fun. The team was jazzed by what they learned and were amazed by how prepared you came and all of the ideas you helped spark for ways forward.

We appreciated your thoroughness, insights, expertise, and the thoughtfulness you brought towards your prepared materials.

Jonathon Olenick, Manager, Digital Experience, Southern Alberta Institute of Technology

---

masterclass /ˈmɑːstəklɑːs/
noun
A class given by an expert to highly talented students.

---

Your team is great, and they know most of it all already. They don’t need a week-long bootcamp—they need to fill a few empty gaps. They need a Masterclass. Pick a topic that you want to level up on, and get it done. Struggling with performance budgets? Not anymore. DevTools confusing you? You’re not alone. Need to streamline your workflows? We’ll be there in no time.

Available Masterclasses

Become web performance experts in the time it takes to watch a movie.

<style> .c-tiles-list { margin-left: 0; list-style: none; contain: layout paint; } @media screen and (min-width: 45em) { .c-tiles-list { display: flex; flex-wrap: wrap; gap: 1.5rem; } } .c-tile { background-color: #fff; border-radius: 4px; overflow: hidden; border: 1px solid #ddd; will-change: transform; transition: 0.2s transform; margin-bottom: 1.5rem; content-visibility: auto; contain-intrinsic-size: 1px 550px; contain: layout paint; } .c-tile:has(details[open]), .c-tile:target { border-color: #f43059; } @media screen and (min-width: 45em) { .c-tile { width: calc(50% - 12px); margin-bottom: 0; } .c-tile:nth-child(2n+1):last-child { width: auto; } } .c-tile__title { margin-bottom: 0; } .c-tile__hero { --box-shadow-setup: 0 0 10px 10px inset; overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--box-shadow-setup) rgba(0,0,0,0); transition: 0.2s box-shadow; } .c-tile:has(.btn:hover) .c-tile__hero { box-shadow: var(--box-shadow-setup) rgba(0,0,0,.1); } .c-tile__image { display: block; width: 100%; will-change: transform; transition: 0.2s transform; position: relative; z-index: -1; } .c-tile:has(.btn:hover) .c-tile__image { transform: scale(1.05); } .c-tile__content { padding-right: 1.5rem; padding-left: 1.5rem; } .c-tile__text { min-height: 9rem; } </style> <script> // Set up the shuffle() function before we need it: this removes the setup // itself from the Key Path, which is a huge over-optimisation. const shuffle = array => { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } </script>

Expand all…

{% for masterclass in page.masterclasses %}

• 

  {{ masterclass.title }}

  Price: ${{ masterclass.price | default: "2,500" }}

  {{ masterclass.intro }}

  Learn more about {{ masterclass.title }}…

  {{ masterclass.description }}

  Enquire about {{ masterclass.conjunction | default: "" }} {{ masterclass.title }}

{% endfor %}

<script> (() => { performance.mark('begin'); // Shuffle the cards so we get a different order every time. const masterclassList = document.getElementById('jsMasterclassList'); const masterclassItems = Array.from(masterclassList.querySelectorAll('.jsMasterclassItem')); shuffle(masterclassItems); masterclassList.innerHTML = ''; masterclassItems.forEach(item => { masterclassList.appendChild(item); }); // Let’s see how long the shuffle takes performance.mark('end'); const shuffleTime = performance.measure('shuffle', 'begin', 'end'); console.log('shuffle: ' + shuffleTime.duration + 'ms'); // Toggle tiles’ open/closed state. document.getElementById('jsExpandTiles').addEventListener('click', function() { const detailsElements = document.querySelectorAll('#jsMasterclassList details'); const allOpen = Array.from(detailsElements).every(details => details.open); detailsElements.forEach(details => { details.open = !allOpen; }); this.textContent = allOpen ? 'Expand all…' : 'Collapse all…'; }); })(); </script>

How It Works

Five simple steps:

1. Select a Masterclass you’re interested in;
2. Enquire about it by emailing me;
3. We define and customise the content;
4. I book you in for a set time and date;
5. We run and record the Masterclass for you and the team.

Important Information

• Masterclasses are live.
  • This means they’re also customised to suit you and your team’s needs.
  • They are recorded for you to keep.
• Masterclasses last from 90–180 minutes.
• Maximum attendees is capped at 12 people.
• All Masterclasses include a formal Q&A session.
• Discounts are offered for multiple Masterclasses.