Performance/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.
The training is not recorded.
Alumni
The following current 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:
Introduction
- Why being fast matters
- Challenges
Defining test parameters
- The mobile case
- Tools
How to measure performance
- WebPageTest and the critical path
- Start Render, Meaningful Paint, Speed Index...
Mastering the cache
- Classic cache, standard invalidation
- Strategies and tools in practice
Web browsers and HTTP
- Understanding latency theory
- HTTP/2, HTTP/3
- HTTPS
The critical path
- CSS/JS loading strategies
- Preloading
- Compression
Fonts
- Problems: FOIT, FOUT or white page?
- Optimisation techniques
- Native APIs
Images
- JPG vs GIF vs PNG vs newer standards
- Loading: normal, inline or lazy?
- Compression techniques and tools
- SVG and icon fonts
Third parties
- Dangers
- Integrating correctly
Loading javascript
- The 6 ways to load JS
- Optimising a Webpack bundle
Responsive UIs
- Good DOM (and jQuery) practices
- Browsers: layout, paint, composition
- Understanding the JS/CSS profiler
- Long and repetitive tasks
Monitoring performance
- Synthetic
- RUM
Customising WebPageTest
- Testing complex scenarios
Offline support
- Service workers, PWAs and Application Cache
User perception
- User psychology
- UI examples