Top Rated Top Rated

High-Speed Web Applications March

A two day in-depth workshop that focuses on performance, explores exciting hidden DevTools features and equips participants with powerful techniques to run performance tests properly.

JavaScript
CSS
Google Chrome icon - Logo
Level.Intermediate
Duration.1 Day
Date.06.03.2025 11:00-17:00 CET
Price.€ 400.00

Knowing how to run performance tests on your web app properly is one thing, and putting those metrics to good use is another. Both aspects are crucial for the overall success of your performance optimization efforts, which means you'll need to have a precise understanding of all the ins and outs of both performance data and performance tooling to ensure the best outcome. 

This workshop will explore various tools and techniques required to face this challenge, providing you with a complete roadmap for performance analysis and optimization.

Agenda

  • DevTools Logo

    How to record and analyze flame charts

  • DevTools Logo

    Analyzing Memory usage and detect memory leaks

  • DevTools Logo

    How to conduct Memory Profiling and inspect Memory Leaks

  • JavaScript

    Understand the JavaScript Event Loop

  • JavaScript

    Learn advanced scheduling techniques to Master the Single Thread

  • DevTools Logo

    Network Analysis and Improvement Strategies

  • DevTools Logo

    Runtime Performance of Scripting, Rendering, and Painting

  • DevTools Logo

    CSS and DOM performance best practices

  • JavaScript

    JavaScript & TypeScript language best practices

  • JavaScript

    Master the Single Thread - Main Thread Scheduling

  • JavaScript

    Control the Event Loop by prioritizing work

  • Google Chrome icon - Logo

    Understand the Browser Render Pipeline

  • CSS

    Learn Next Generation CSS properties

  • RAIL MODEL

    Get to know and apply the RAIL Model

  • Google Chrome icon - Logo

    User Flows: Implement automated performance tests with the latest Chrome Dev Tools Features

Description

The Chrome DevTools are a powerful addition to the developer’s toolset that allows finding and eliminating your app’s performance bottlenecks. It is packed with features perfect for auditing page performance and deriving actionable insights. By visualizing data at a proper level of abstraction, it can help you pinpoint performance-related issues and set a baseline from which to start introducing improvements.

That said, knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. Both aspects are critical to the overall success of the endeavor. Thus it is so crucial to understand all the ins and outs of performance data and performance tooling.

This might sound like a lot but don’t be put off! Over the course of this training, we will walk through the pitfalls and tricks of the trade of Chrome DevTools to provide you with a complete roadmap for performance analysis and optimization. 

Chrome Developer Tools should be seen as a fount of knowledge about your app performance that anyone can benefit from. At that realization, the best part begins – experimenting and finding the most effective ways to improve the application’s speed.

Takeaways

In this workshop, we will explore the exciting hidden DevTools features and learn about:

  • Web Vitals – what they are and how to measure them

  • Scripting, parsing, and prioritization

  • Network analysis and request debugging

  • The browser’s rendering pipeline

  • How to read the performance timeline

  • Frame drop, and why we should care about it

  • Scheduling techniques and scheduling priority

  • HTML structures, their styling and rendering in a browser

  • The Paint Flash APIs and scroll performance issues

  • Layer composition, layer squashing, and reflow triggers

  • Main thread scheduling and non-blocking UIs