Full Throttle Return: Perf.now() Conference 2022

Zuzana FatrdlaZuzana Fatrdla11/7/20223 minutes reading

Article

Over two days, Michal and I attended 14 top-tier talks in the setting of a former church. Yes, you read that right – this year's Performance.now() was held at Zuidekerk, originally a 17th-century Protestant church, now serving as an event venue.

I must commend the choice of venue – it's rather unconventional. But anyone familiar with Amsterdam's character won't be surprised. The laid-back, free-spirited vibe of Amsterdam is quite typical. We spent breaks and free time exploring the city.

Zuiderkerk church in Amsterdam, venue of Perf.now() 2022

What did Perf.now() offer us?

Naturally, we selected the best talks of the year after the conference concluded. Here is our list:

Nolan Lawson - CSS Runtime Performance

A talk for geeks eager to squeeze every ounce of performance from their frontend. Despite the significant spoiler at the start – that these are "micro-optimizations" – Nolan delved into the complexity of how browsers calculate styles and construct layouts. He also shared the Chrome Trace Event Profiling tool, useful for debugging things like selector speed.

Alex Russell - The Global Baseline, 2022

In his talk, Alex tackled the perennial issue of users and their system (hardware) and network conditions. As he aptly reminded us in one slide, "your iPhone isn't the real world". So, what parameters are we working with, and what performance can we build our sites on? Globally, the 75th percentile phone in the fourth quarter of 2022 was a device priced around $200, akin to the Samsung Galaxy A50. We should still favour HTML and CSS over JS. A sufficient maximum could be 150 kB HTML/CSS and 300-300 kB JS.

Slide from Alex Russell’s talk on the global phone-performance baseline

Harry Roberts - Optimising Largest Contentful Paint

Harry needs little introduction (see our notes on the order of elements in <head>) and his talk did not disappoint. Hats off to him for structuring a 40-minute presentation entirely around the LCP metric. I'd recommend this talk to everyone because, as Harry says, "optimising LCP is simple once you know how it works". Harry also explained how the LCP metric changes if an image is embedded as <svg>, a background-image, or conventionally in an <img>. The short answer: The method of embedding has a significant impact on the LCP metric.

Ivan Akulov - React 18 Concurrency, Explained

A more programmer-focused talk about React 18 and its new APIs useTransition and <Suspense>. Ivan demonstrated how React could leverage concurrency so that the application start-up, data hydration, or intensive UI update does not block user input. An ideal tool for tackling FID and INP.

Katie Sylor-Miller - How to be a Performance Detective?

It's not just the content that makes a great talk – the delivery matters too. From this perspective, Katie's talk was unforgettable. Using Detective Pikachu as an example, she guided us through her performance monitoring process. Particularly practical was her use of Cumulative Distribution Functions (resembling "inverted histograms") to evaluate and compare measured data before and after changes on a website.

Katie Sylor-Miller showing distribution functions in performance monitoring

In conclusion, the organisers announced some great news. The next Performance.now() will be held on November 2nd and 3rd, 2023, at the same venue as this year. We look forward to it!

All talks can be viewed on YouTube, where they will be gradually released.

Stay informed about your website's speed.

Subscribe to our newsletter. Each month, we share the latest in website speed for site owners, marketers, and developers.

Tags:Web Performance