LiveLoveApp logo

Build Fast Apps Workshop

Learn to effectively use Chrome DevTools to build fast apps.

Schedule Build Fast Apps Workshop

In this 1-day hands-on workshop, you’ll learn how to analyze, measure, monitor, and build fast apps that will drive growth and engagement. How? We’ll start by learning the basics of what makes an app fast. Then, we’ll take a deep dive into the DevTools provided in Google Chrome. Knowing how to measure and analyze the runtime performance of your application is the secret key to building blazing-fast apps, and Chrome DevTools provides all of the tools you need.

Outline

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

Goals

  • How to measure runtime performance
  • How to read and analyze flame charts
  • How to analyze frame per second
  • How to use the rendering tools
  • How to use the layers panel
  • How to identify bottlenecks using the call tree and bottom-up tools
  • How to identify memory leaks
  • How to identify the number of visible and hidden DOM elements
  • How to identify costly event listeners
  • How to find unused JavaScript and CSS using the coverage tools

Prereqs

Students should be familiar with the following:

  • 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