Performance/Frontend web performance training

This page contains historical information. It may be outdated or unreliable. 2020

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