performance.now() 2022

Katie Hempenius

Software Engineer, Google, @katiehempenius

Katie is an engineer on the Chrome team where she works on making the web faster. Previously she was a software engineer on Google Ad Manager and a senior software engineer at Fitbit.

What’s new in performance?

This talk will discuss new APIs, tools, and metrics and how you can apply them to your site.

Video

Sia Karamalegos

Web Performance Engineer, Shopify, @sia@front-end.social

Sia is a web developer and performance engineer, currently working on web performance at Shopify. She's also an international conference speaker, writer, Google Developer Expert in Web Technologies, Cloudinary Media Developer Expert, and Stripe Community Expert. She co-organizes the Eleventy Meetup which won the 2021 Jammies Award for Outstanding Community Meetup.

Early Learnings for Early Hints at Shopify

103 Early Hints allow us to preconnect and even preload resources before the main document arrives. Come learn how the partnership between Shopify, Google, and Cloudflare led to this performance breakthrough, how Shopify is continuing to experiment with it at scale, and thoughts on what the future holds.

Video, slides

Nic Jansma

Software Developer, Akamai, @nicj

Nic is a software developer at Akamai building high-performance websites, apps and open-source tools.

Modern Metrics

What is a “modern” metric anyway? An exploration on how to measure and evaluate popular (and experimental) web performance metrics, and how they affect user happiness and business goals.

We'll talk about how data can be biased, and how best to interpret performance data given those biases. We'll look at a broad set of RUM data we've captured to see how the Core Web Vitals correlate (or not) to other performance and business metrics. Finally, we'll share a new way that others can research modern metrics and RUM data.

Video, slides

Tammy Everts

Chief Experience Officer, SpeedCurve, @tameverts

Tammy is chief experience officer at SpeedCurve, where she helps companies understand how visitors use their websites, and a co-chair of performance.now(). Tammy has spent the past two decades studying how people use the web. Since 2009, she’s focused on the intersection between web performance, user experience, and business metrics. Her book, Time Is Money: The Business Value of Web Performance from O’Reilly, is a distillation of much of this research. She also cocurates (with Tim Kadlec) WPO Stats, a collection of performance case studies.

Revisiting Performance Budgets

Performance budgets have been around for ten years. Over those years, we’ve learned a lot about what works, what doesn’t, and what we need to improve. In this session, Tammy revisits old assumptions about performance budgets and offers some new practices. Topics include:

• Aligning budgets with user experience
• Pros and cons of Core Web Vitals
• Budgets for beginners
• Advanced budgeting

Video, slides

Stoyan Stefanov

Software Engineer, WebPageTest by Catchpoint, @stoyanstefanov

Stoyan has recently joined WebPageTest by Catchpoint as a software engineer (formerly at Facebook and Yahoo!). He has a storied history as an accomplished author, contributor, and custodian of the well-known and respected Planet Performance calendar. He habitually speaks about web development topics at conferences and on his blog at phpied.com. Stoyan is also the creator of the smush.it image optimization tool, YUI contributor and was the architect of Yahoo's performance optimization tool YSlow 2.0.

Micro Benchmarks

Let’s tackle two problems that may fall into the “micro” benchmarking category of concerns but have “macro” effects on the user experience.

1. Today’s Web apps are made of distinct components. These components’ performance is rarely tested in isolation because of their small footprint. But by the time you combine them into an app it’s hard to tell where the time went. Death by a thousand cuts. What if you can use a stable time-independent metric that can tell you the cost of each component and help you prevent regressions?
2. Ever had a user session end unexpectedly? As if the user closed the tab while scrolling or while typing their credit card number. The reason may be because your app crashed the browser tab due to leaking memory. How do you find and plug these leaks in a complex app?

In this session Stoyan will demonstrate two new open source tools you can use to keep an eye on your components’ performance and discover memory leaks in your apps.

Video, slides

Léonie Watson

Director, TetraLogical, @LeonieWatson

Léonie is Director of TetraLogical; a member of the W3C Advisory Board; co-Chair of the W3C Web Applications Working Group; and until recently was a member of the Accelerated Mobile Pages (AMP) Advisory Committee.

Amongst other things, Léonie is co-organiser of the Inclusive Design 24 (#id24) conference; co-author of the Inclusive Design Principles; and mentor to young people interested in the fields of accessibility and inclusive design. She is also a Microsoft Most Valued Professional (MVP).

Léonie is often found at conferences, talking about web standards, accessibility mechanics, and pushing the boundaries of inclusive design (with existing technologies like SVG, HTML, ARIA, and JavaScript, as well as new technologies like AI and WebVR). She has also written about these things for Smashing magazine, SitePoint.com, and Net magazine, as well as on her own site Tink.UK.

In her spare time, Léonie likes reading, cooking, drinking tequila, and dancing (although not necessarily in that order)!

Accessibility: the land that time to interactive forgot

We tend to think of performance in terms of latency, code optimization, and things like the critical rendering path, but what happens when the browser creates an accessibility tree as well as the DOM?

The answer is of course “it depends...”.

Different browsers take different approaches, but they all have an impact on performance and the Time To Interactive in particular. In this talk we’ll consider the purpose of the accessibility tree, the ways its constructed in different browsers, and the ultimate impact that has on both performance and experience for people who use assistive technologies like screen readers.

Video

Nolan Lawson

Web Developer, Salesforce, @nolan@toot.cafe

Nolan is a web developer focused on client-side performance. He has worked on the browser performance team for Microsoft Edge, and currently works on the Lightning Web Components framework at Salesforce. He blogs about performance and other topics at nolanlawson.com.

CSS runtime performance

On the client side, we pay a lot of attention to JavaScript performance. But relatively little time is spent on CSS, even though style and layout calculation can impact runtime performance as well. In this talk, I'd like to demystify some aspects of CSS runtime performance, exploring what parts the browser has already optimized, and what we as web developers can do to speed up styling.

Video, slides

Harry Roberts

Consultant Web Performance Engineer, @csswizardry

With a client list including Google, Unilever, and the United Nations, Harry is an award-winning Consultant Front-end Architect who helps organisations and teams across the globe to plan, build, and maintain product-scale UIs.

A Google Developer Expert, he writes on the subjects of CSS architecture, performance, and scalability at csswizardry.com, develops and maintains inuitcss, authored CSS Guidelines, and Tweets at @csswizardry.

Optimising Largest Contentful Paint

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 project and clients and make all the improvements they’ll need. Get ready to ask for a pay rise.

Video

Dora Militaru

Developer Relations Engineer, Fastly, @doramilitaru

Dora is a Developer Relations Engineer at Fastly. She cut her developer teeth on building a global news website, and cultivated her compassion by leading data protection and site reliability engineering teams. Working at a tiny kitchen table in London, she dreams of helping others build a faster, more secure, more reliable – a better web – for everyone.

Performance culture through the looking-glass

It’s 2022 and highly skilled engineering teams are yet to be immune against seasonal web performance regressions. Is performance a particularly tricky discipline – or is it a cultivated frame of mind?

In this session, I will draw from collective reflections and my own experience, to plate up the tastiest morsels of food for thought on topics like:

• Speed ≈ money
• Fostering (and scaling) a strong performance culture
• Embracing apoptosis

You’ll walk away with some tools to wrangle that tricky beast: sustainable web performance optimization.

Video, slides

Katie Sylor-Miller

Frontend Architect, Etsy, @ksylor

Katie has a passion for design systems, web performance, accessibility, and frontend infrastructure. She co-authored the Design Systems Handbook to spread her love of reusable components to engineers and designers. She’s spoken at conferences like Smashing Conf, PerfMatters Conf, JamStack Conf, JSConf US, and FrontendConf.ch (to name a few). Her website ohshitgit.com (and the swear-free version dangitgit.com) has helped millions of people worldwide get out of their Git messes, and has been translated into 28 different languages and counting.

When she’s not architecting, you can find Katie spending time with her family, skiing, or traveling the country to visit the best tiki bars. Say hi to Katie at @ksylor on twitter and check out her site at sylormiller.com.

How to be a Performance Detective?

When starting on a web performance journey, many companies’ first step is to start monitoring performance metrics over time. But the second step is often much harder - now that you have all of this data, what do you do when you see a regression? How do you sift through the clues to connect a change in a graph to the code that engineers ship to production? How do you become a performance detective?

In this session, Katie will crack open her casefiles to share some real-world examples where performance metrics changed for the worse, and walk through how to find the culprit. You’ll learn what clues to look for to understand a regression in your Core Web Vitals, how different performance metrics influence each other, and when to use data gathered from real users vs. synthetic tests in the lab.

Video, slides

Andy Davies

Web Performance Consultant, SpeedCurve, @AndyDavies

Andy is a Web Performance Consultant at SpeedCurve, where he helps customers to measure and improve the speed of their sites.

He stumbled into web performance in 2008 while launching an online education service and quickly ran into the challenge of delivering rich content to schools over congested networks.

Since 2012 he's focused on web performance full time and has worked with a wide variety of organisations from retailers and publishers to financial services and FMCG brands.

Reducing the Speed Impact of Third-Party Tags

From Analytics to Advertising, Reviews to Recommendations, and more, we rely on Third-Party Tags for critical aspects of our sites.

But there’s a tension between the value that third-party tags bring and the costs they impose.

Speed Matters… the longer our pages take to load the lower our visitors’ engagement is… lower page views, lower conversions, and lower revenue.

In this session Andy will share approaches and practical steps he uses to help clients reduce the impact tags have on the speed of visitors' experience.

Video, slides

Ivan Akulov

Web Performance Consultant, PerfPerfPerf, @iamakulov

Ivan is a Google Developer Expert, full-stack software engineer, and web performance consultant. Ivan has worked with clients like Google, Framer, and Hugo, and runs the performance consulting agency PerfPerfPerf.

Ivan writes about React and webpack performance at 3perf.com/content and tweets at @iamakulov.

In his spare time, among other activities, Ivan enjoys discovering little-known French electronic artists.

React 18 Concurrency, Explained

React 18! Concurrent features! Perhaps you’ve just heard about this release. Or maybe you’ve already tried the new APIs like useTransition. But do you know how React 18 achieves the performance wins it brings with itself?

In this talk, let’s peek under the hood of React 18’s performance features:

• How React 18 lowers the time your page stays frozen (aka TBT) and how Chromium 87 helps in this
• What’s the catch with the improvements (there’s no free cake!), and when they are unhelpful
• What exactly happens in the browser when you run useTransition()
• And why Vue and Preact straight refused to ship anything similar

(For this talk, it’s enough to be familiar with React. You’re not required to have React 18 experience.)

Video, slides

Sharell Bryant

Engineering Manager, Teachers Pay Teachers, @shrell

Sharell is an engineering manager at Teachers Pay Teachers, an online platform with a mission of empowering educators to teach at their best. Sharell leads teams that are focused on constantly improving developer experience and enabling high-quality and high-velocity product development. She lives in New York City where she also enjoys creative coding and playing music.

Keeping Up with Web Performance

The world of web performance is exciting and always changing, but have you ever felt like you’re always falling behind?

It can feel overwhelming but by embracing continuous learning we can transform keeping up with the latest in web performance from a daunting task into an exciting journey full of opportunity.

In this talk, we’ll review multiple strategies for how to build a learning practice for yourself as well as how to foster a culture of learning in your community or organization in a way that’s fun and engaging.

Video, slides

Alex Russell

Partner Program Manager, Microsoft, @slightlylate

Alex is Partner Program Manager on the Microsoft Edge team and Blink API OWNER. Before joining Edge in 2021, he worked on Chrome’s Web Platform team for a dozen years where he helped design many new features. He served as overall Tech Lead for Chromium’s Project Fugu, lead Chrome’s Standards work, and acted as a platform strategist for the web. He also served as a member of ECMA TC39 for more than a decade and was elected to three terms on the W3C’s Technical Architecture Group.

His technical projects have included Fugu, Progressive Web Apps, Service Workers, and Web Components, along with ES6 features like Classes and Promises. Previously he helped build Google Chrome Frame and led the Dojo Toolkit project. Alex plays for Team Web.

The Global Baseline, 2022

Building successful products on the web requires meeting users where they are. Teams awash in product data can make good decisions about page weight and interactivity tradeoffs, but nearly no project starts with that level of insight. Therefore, we should start from a global baseline of system and network capabilities to target. So what is it? This talk provides a reasonable approximation and tools for how to improve it for your own products post-launch.

Video, slides