We’ll be plotting data and findings, making it compelling to clients and non-technical stakeholders; drawing up backlogs and hit-lists; hacking on fixes, improvements, and experiments; and learning a whole lot of forensic, detailed, and often completely obscure performance information on the way.

Front-End Web Performance Masterclass takes you on a voyage, starting on the server and making our way to the user, looking at what parts of the journey can slow us down, and what we can do to mitigate them. CDN configurations, TLS performance, protocols, network utilisation, resource scheduling, critical path optimization, asset delivery and optimization, CSS performance, runtime and rendering, caching, and a whole lot more. A lot, lot more.

The workshop begins with lessons on how to capture rich and insightful data, and subsequent lessons will be spent with the tooling needed to dissect and analyse it. You’ll leave armed with a wealth of knowledge and tools, meaning you can do the whole lot again by yourself, anytime you want.

The workshop ends with discussions around performance culture and monitoring, as well as ideas on how best to present findings and improvements back to the business. Everything in between will be intensive, practical learning, as we tear down and rebuild your own sites with performance in mind! There is no script — we’re just gonna get busy.

Prerequisites

Attendees should have basic to intermediate familiarity with web performance concepts (e.g. minification, compression, image optimisation, etc.) but do not need in-depth knowledge of anything advanced. By the end of the workshop, you’ll all be experts.

About Harry Roberts

Harry is an award-winning Consultant Performance Engineer from the UK. With a client list ranging from the United Nations to Google, the BBC to the Financial Times, he has helped some of the world’s largest organisations make their websites faster.

He writes about all things front-end performance at csswizardry.com, speaks at tech events all across the globe, and regularly shares his insights at @csswizardry.

You Will Need

• A laptop with an up-to-date version of Chrome.
• A live, public-facing website that you’re going to audit and fix.
• Access to its Google Analytics account (optional but advised).
• User accounts with several online tools. Harry will email you links to these ahead of time but rest assured, they’re all free and safe.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

• Tue, May 3, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, May 4, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Tue, May 10, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, May 11, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, May 17, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

You can always re-watch the sessions at a more convenient time and follow the webinar at your own pace.

Day 1: Gathering Data

You can’t fix what you can’t measure! To start our journey, let’s look at how to set up our tooling to be the most accurate and forensic possible.

We’ll dig into analytics, run tests, and use a series of free tools to learn about the state of the site we’re dealing with.

Days 2–4: Deep Dive

Given the data and findings from our exploration phase, let’s start working methodically through our detailed and extensive hit-list. Is the CDN configured properly? Is our critical path clear? Are we hiding anything from the browser? How are we handling web fonts? Are we going JS-heavy? Have we effectively cached everything we’ve requested?

These three sessions will take us all the way from the back-end to the front-end, covering everything in between the server and our user’s eyes.

Day 5: Findings, Fixes and Future

How can we best deploy our findings for maximum impact? How can we make sure we don’t regress? How can we create a performance culture? In our final session, we’ll look at what we discovered and what that spells for the future.

We’ll also have chance for extensive discussions about web performance in general — any questions you have about browsers, technologies, platforms, performance culture, or the business of web performance is up for discussion!