Wikimedia Performance Team/Frontend web performance training

Context
The Performance Team commissioned Jean-Pierre Vincent in 2020 and 2021 to provide remote training on the topic of Frontend Web Performance.

Format
The training is delivered remotely via Zoom, every week day over the course of a week, for a total of 5 sessions lasting 3.5 hours each.

Alumni
The following staff members (or former staff members) have undergone this training:

Thalia Chan, Jan Drewniak, Željko Filipin, Samuel Guebo, Alex Hollender, Michael Holloway, Wolfgang Kandek, Roan Kattouw, Dayllan Maza, Harumi Monroy, Stephen Niedzielski, Linh Nguyen, Mew Ophaswongse, Abijeet Patro, Samuel Patton, Gabriel Pita, Nicholas Ray, Sam Reed, Jon Robson, Ed Sanders, Mateus Santos, Joseph Seddon, Aaron Schulz, Bernd Sitzmann, Sam Smith, Huei Tan, Stephanie Tran, Anne Tomasevich, Brion Vibber, Leila Zia.

Content
Here is an approximate skeleton of the training:

01 Introduction
- Why being fast matters

- Challenges

02 Defining test parameters
- The mobile case

- Tools

03 How to measure performance
- WebPageTest and the critical path

- Start Render, Meaningful Paint, Speed Index...

04 Mastering the cache
- Classic cache, standard invalidation

- Strategies and tools in practice

05 Web browsers and HTTP
- Understanding latency theory

- HTTP/2, HTTP/3

- HTTPS

06 The critical path
- CSS/JS loading strategies

- Preloading

- Compression

07 Fonts
- Problems: FOIT, FOUT or white page?

- Optimisation techniques

- Native APIs

08 Images
- JPG vs GIF vs PNG vs newer standards

- Loading: normal, inline or lazy?

- Compression techniques and tools

- SVG and icon fonts

09 Third parties
- Dangers

- Integrating correctly

10 Loading javascript
- The 6 ways to load JS

- Optimising a Webpack bundle

11 Responsive UIs
- Good DOM (and jQuery) practices

- Browsers: layout, paint, composition

- Understanding the JS/CSS profiler

- Long and repetitive tasks

12 Monitoring performance
- Synthetic

- RUM

13 Customising WebPageTest
- Testing complex scenarios

14 Offline support
- Service workers, PWAs and Application Cache

15 User perception
- User psychology

- UI examples