
## Day One

1. What is the value of speed?
2. RAIL model
   1. Response
   2. Animation
   3. Idle
   4. Load
3. Metrics
   1. First Contentful Paint
   2. Largest Contentful Paint
   3. First Input Delay
   4. Time to Interactivity
   5. Total Blocking Time
   6. Cumulative Layout Shift
4. Core Web Vitals
5. Performance Budget
6. Chrome DevTools
7. DevTools: Lighthouse
   1. Lighthouse CLI
   2. Budgets
   3. Lighthouse CI
8. DevTools: Rendering
   1. Blink rendering engine
   2. Render Tree
   3. Compositor
   4. Repaints and Layout Shifts
   5. Layout Shift Regions
   6. Layer Borders
   7. Frame Rendering Stats
   8. Scrolling Performance Issues
9. DevTools: Layers
10. Layout Instability API
11. DevTools: Performance Monitor
    1. CPU
    2. JS Heap Size
    3. DOM Nodes
    4. JS Event Listeners
12. DevTools: Performance
    1. Recording
    2. FPS
    3. Main Thread Analysis and Flame Charts
    4. Compositor Activity
    5. Bottom-Up Analysis
    6. Call Tree Analysis
    7. Event Log
    8. Performance Analysis
13. DevTools: Memory
    1. Object Size
    2. Garbage Collection in V8
    3. Heap Snapshot
    4. Finding Memory Leaks
    5. Snapshot Comparison
    6. Detached DOM Nodes
    7. Allocation Instrumentation
14. DevTools: Coverage

## Prereqs

Attendees should be familiar with the following technologies:

- Chrome DevTools Basics
- TypeScript


Memory leaks are not good, and worse, can be extremely challenging to surface and resolve. You'll learn how to use heap snapshots and comparisons to identify memory leaks in your application.

Identify and solve memory leaks

You'll learn what metrics you should use to measure the performance of your application.

Stop guessing about your application's performance

You'll determine performance budgets for your application and then implement tooling with Lighthouse to monitor the budget. In the event that you are close to going over budget you can start to make decisions today to prevent performance debt.

Building and monitoring performance budgets

You'll learn how to setup Lighthouse and use the CLI as well as using this tool as part of your CI pipeline.

Setup Lighthouse

Rendering web applications should adhere to a 60 frames-per-second goal. You'll learn what impacts the rending of your application, and even a bit of the nitty-gritty details on how Blink works under the hood.

Comprehend the rendering of your application

Rendering bottlenecks can cause a perceived sluggishness by your users. You'll learn how to identify repaints, layout shifts, frame rendering stats and scrolling performance issues.

Identify rendering bottlenecks

Layout shifts are annoying and reduce the delight of your users. You'll learn how to use the Instability API to measure the cumulative layout shift of your application.

Measure cumulative layout shifts

Runtime performance issues can be difficult to identify, and the Performance tooling in Chrome DevTools can be hard to understand. We'll break down the complexity and learn how to effectively use the tool. You'll be able to quickly identify performance issues, analyze the rending of the application, and examine the flame charts to determine what scripting may be impacting the runtime performane of your application.

Expert Led Chrome DevTools Workshops

Build Fast Apps

Get Expert Led Training For Your Team