Advanced Performance Tuning for React Applications

This is the source code for an advanced React Performance workshop. It was designed by Sara Vieira, Sia Karamalegos, and Jason Lengstorf.

Abstract

Getting performance right is hard, even when you have the luxury of starting an app from scratch. It's even harder when you need to improve the performance of existing apps, as is so often the case. In this workshop, Sia Karamalegos, Sara Vieira, and Jason Lengstorf will lead you through the process of:

Assessing an existing React app
Diagnosing performance problems
Prioritizing highest-impact solution
Implementing performance fixes

During this full-day workshop, youll learn advanced techniques for improving the performance of React apps, including:

Lazy loading resources & components with React.lazy and Suspense
Leveraging service workers for performance
Seamlessly preloading and prefetching assets
Automatically optimizing images
Dynamically subsetting fonts
Mitigating the performance impact of third-party scripts
Code splitting and bundle optimization
Using psychology to make an app feel faster than it actually is

By the end of the workshop, youll be able to diagnose and solve a variety of real-world performance problems. Youll also learn how to weigh trade-offs to ensure that both your apps and your teams perform well. The tools added to your toolbox will continue to serve you, your team, and your users for years to come.

Prerequisites

Intermediate React knowledge, Node/npm installed, Git installed, basic command line knowledge.

About the trainers

Sara Vieira is a developer @CodeSandbox and an international agent of JS Bullshit , open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl.

Twitter | Website | Github

Jason Lengstorf is a developer advocate, senior engineer, and occasional designer at Gatsby. Hes an advocate for building highly productive teams through better communication, well designed systems and processes, and healthy work-life balance, and he blogs about that sometimes. He lives in Portland, Oregon.

Twitter | Website | Github | Blog | Facebook

Sia Karamalegos is a developer, international conference speaker, and writer. She is a Google Developer Expert in Web Technologies and a Women Techmakers ambassador. She co-organizes #FrontEndParty, GDG New Orleans, and NOLA Hack Night in the New Orleans area. She is the founder and lead developer for Clio + Calliope Web Development and was recognized in the Silicon Bayou 100, the 100 most influential and active people in tech and entrepreneurship in Louisiana. When she's not coding, speaking, or consulting, Sia likes to design crochet patterns and dabble in charcoal figure drawing. She's also an avid endurance athlete.

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Resources

Want to learn more about how to measure and improve performance? Here you go:

Modern DevTools course by Umar Hansa
/dev tips by Umar Hansa
Making Google Fonts Faster
Loading Fonts With Webpack
Optimize Website Speed with Chrome DevTools by Kayce Basques
Assessing Loading Performance in Real Life with Navigation and Resource Timing by Jeremy Wagner
User Timing API Measuring User Experience Performance by Cody Arsenault
Measure Performance with the RAIL Model by Meggin Kearney, et. al.
Reduce JavaScript Payloads with Tree Shaking by Jeremy Wagner
Reduce JavaScript Payloads with Code Splitting by Jeremy Wagner and Addy Osmani
Lazy Loading Images and Video by Jeremy Wagner
The Cost of JavaScript in 2018 by Addy Osmani
The Cost of JavaScript by Addy Osmani
Why Web Developers Need to Care about Interactivity by Philip Walton
Preload, Prefetch And Priorities in Chrome by Addy Osmani
Webpack build analysis on SurviveJS by Juho Vepslinen
https://www.webpagetest.org/easy easy no configuration set up for a slow-3G connection and mid-level phone, specifically Chrome on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency.
Responsive Images by Pete LePage
Responsive Images Udacity Course by Google
Optimizing Images in Webpack on SurviveJS by Juho Vepslinen
Can You Afford It?: Real-world Web Performance Budgets by Alex Russell
Deploying ES2015+ Code in Production Today by Philip Walton
HTTP Caching by Ilya Grigorik
Take a (Client) Hint! by Jeremy Wagner
To push, or not to push?! - The future of HTTP/2 server push by Patrick Hamann
The Future is Fast on performance and Gatsby.js by Jason Lengstorf
If you have the chance, attend one of Harry Robert's talks or workshops on performance
Does my site need HTTPS?

Other sources: