---
layout: page
title: "Masterclasses: Empower Your Talent"
page-class: page--services  page--masterclasses
meta: "Short, targeted masterclasses covering a range of performance topics"
main: "/img/content/masterclass/custom.jpg"
permalink: /masterclasses/
lux: "Services / Masterclasses"
masterclasses:
  - title: "WebPageTest: An Introduction"
    image: "wpt-basics"
    intro: "We’ve done PageSpeed Insights and now we want to level up! Let’s get started with WebPageTest…"
    description: "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: "WebPageTest: Power User"
    image: "wpt"
    intro: "WebPageTest is the gold standard in performance testing, but are you getting the most out of it?"
    description: "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: "Setting up DevTools for Performance Testing"
    image: "devtools"
    intro: "DevTools are amazing! But that can make them intimidating. Let’s get you all set up with the most finely-tuned Chrome DevTools possible."
    description: "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: "Performance Testing in Mobile Safari"
    image: "ios"
    intro: "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."
    description: "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: "My Website Is Slow—Where Do I Start?!"
    image: "my-website-is-slow"
    intro: "You know your website is slow, but do you know why? Let’s find out together…"
    description: "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: "Site-Speed Teardown"
    image: "teardown"
    intro: "A live, realtime, interactive site-speed audit of your web app."
    description: "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."
    conjunction: "a"
  - title: "Custom Masterclass"
    image: "custom"
    price: "5,000"
    intro: "Not listed here? Let’s design it together!"
    description: "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."
    conjunction: "a"
  - title: "Core Web Vitals for SEOs"
    image: "cwv-seo"
    intro: "Level up your SEO offering by providing Core Web Vitals audits!"
    description: "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: "Effective Performance Monitoring"
    image: "monitoring"
    intro: "Performance budgets, real-user monitoring, regression thresholds, and incident response. Get it all covered here."
    description: "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: "Caching Strategies for Everyone"
    image: "caching"
    intro: "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!"
    description: "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: "LCP Deep-Dive"
    image: "lcp"
    intro: "A specific Masterclass to deep-dive on <i>Largest Contentful Paint</i>—what it is, how to debug it, and how to improve it!"
    description: "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: "INP Deep-Dive"
    image: "inp"
    intro: "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!"
    description: "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: "CLS Deep-Dive"
    image: "cls"
    intro: "A specific Masterclass to deep-dive on <i>Cumulative Layout Shift</i>—what it is, how to debug it, and how to improve it!"
    description: "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: "Third Parties"
    image: "third-parties"
    intro: "Third party issues tend to plague most commercial sites—how can we take the edge off of it?"
    description: "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: "Memory Management: The Basics"
    image: "memory"
    intro: "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."
    description: "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: "Ask Me Anything!"
    image: "ama"
    price: "500"
    intro: "If you just have questions, then you’re looking for a <i>Consultation</i>."
    description: "For ligh-touch, general advice I already have a consultation service available. You can book one immediately!"
    conjunction: "an"
---

## Level up Your Whole Team With <i>Masterclasses</i>

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.

<blockquote class="pull-quote  pull-quote--context-alt" id="quote:peter-gibb">
<p>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.</p>
<p>We appreciated your thoroughness, insights, expertise, and the thoughtfulness you brought towards your prepared materials.</p>
<b class="source  pull-quote__source">Jonathon Olenick, Manager, Digital Experience, <a href="https://www.sait.ca/">Southern Alberta Institute of Technology</a></b>
</blockquote>

- - -

**masterclass** /ˈmɑːstəklɑːs/  
<small><i>noun</i></small>  
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 <i>Masterclass</i>. 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>

<p style="text-align: right;">
  <button id="jsExpandTiles" class="btn  btn--positive  btn--small">Expand all…</button>
</p>

<ul class="c-tiles-list" id="jsMasterclassList">

  {% for masterclass in page.masterclasses %}
    <li class="c-tile  jsMasterclassItem" id="masterclass-{{ masterclass.image }}">
      <div class="c-tile__hero">
        <img src="{{ site.cloudinary }}/img/content/masterclass/{{ masterclass.image }}.jpg" alt class="c-tile__image" width="960" height="549" loading="lazy">
      </div>
      <div class="c-tile__content">
        <h3 class="c-tile__title">{{ masterclass.title }}</h3>
        <p><strong>Price: ${{ masterclass.price | default: "2,500" }}</strong></p>
        <div class="c-tile__text">
        <p>{{ masterclass.intro }}</p>
        <details>
          <summary>Learn more<span class="hide"> about {{ masterclass.title }}</span>…</summary>
          <p>{{ masterclass.description }}</p>
        </details>
        </div>
        <p><a href="mailto:csswizardry@gmail.com?subject=Masterclass:%20{{ masterclass.title }}" class="btn  btn--full">Enquire about {{ masterclass.conjunction | default: "" }} <i>{{ masterclass.title }}</i></a></p>
      </div>
    </li>
   {% endfor %}

</ul>

<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.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {% for mc in page.masterclasses %}
    {
      "@type": "ListItem",
      "position": {{ forloop.index }},
      "item": {
        "@type": "Course",
        "name": "{{ mc.title | escape }}",
        "description": "{{ mc.intro | strip_html | escape }}",
        "url": "{{ page.url | absolute_url }}#masterclass-{{ mc.image }}",
        "provider": {
          "@type": "Organization",
          "name": "CSS Wizardry Ltd",
          "url": "{{ "/" | absolute_url }}"
        },
        "hasCourseInstance": {
          "@type": "CourseInstance",
          "courseMode": "Online",
          "courseWorkload": "P3H",
          "url": "{{ page.url | absolute_url }}#masterclass-{{ mc.image }}"
        },
        "offers": {
          "@type": "Offer",
          {% if mc.price %}
          "price": "{{ mc.price }}",
          {% else %}
          "price": "2500",
          {% endif %}
          "priceCurrency": "USD",
          "category": "Masterclass",
          "url": "{{ page.url | absolute_url }}#masterclass-{{ mc.image }}"
        }
      }
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>