Chrome’s Performance Panel 101: What’s Going on in Your JavaScript Main Thread

Learn to use the profiler in Chrome’s Performance Panel with my favourite settings and some useful tips

Table of Contents

Get Familiar with Chrome’s Performance Panel

• Understand the User Interface of the Profiler
• Pre-configuration Steps

Let’s Start Profiling

• CPU Utilisation
• Network Request Timeline
• Frames and Event Timings
• JavaScript Main Thread

Tips: How to Use the Profiler Efficiently

• Example 1: Investigating Poor LCP
• Example 2: Investigating App Freezes on Click Action

As a front-end engineer, you might have heard of or come across the JavaScript profiler in Chrome’s Performance Panel or Firefox and been overwhelmed by the charts and graphs at first sight.

What is going on here?

While it might seem intimidating initially, the JavaScript profiler is extremely…