LiveLoveApp logo

Build Fast Apps Workshop

Learn to effectively use Chrome DevTools to analyze, measure, monitor, and build fast apps that will drive growth and engagement.

Schedule Build Fast Apps Workshop

You will walk away from this workshop being able to do all of these things by yourself.

  • 01. Stop guessing about your application's performance

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

  • 02. Building and monitoring performance budgets

    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.

  • 03. Setup Lighthouse

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

  • 04. Comprehend the rendering of your application

    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.

  • 05. Identify rendering bottlenecks

    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.

  • 06. Measure cumulative layout shifts

    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.

  • 07. Analyze and solve runtime performance issues

    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.

  • 08. Identify and solve memory leaks

    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.

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

Can’t find the topic you are looking for? Contact Us  to learn about our custom training solutions.

Get Expert Led Training For Your Team
Schedule Build Fast Apps Workshop