Experimental Performance Insights Panel in Chrome DevTools

Have you tried Chrome DevTool’s Experimental Performance Insights panel? If not, let's explore some of its many slick features together.

While the existing Performance panel you may be familiar with has many (many) capabilities, it’s also quite overwhelming at the same time. The Performance panel suffers from trying to solve too many use cases, which is why the new experimental panel’s streamlined and simplified UI is a welcomed update.

Enabling Experimental Performance Insights 🧑‍🔬

If you don't already see the Performance Insights tab, you can enable it by going to More options icon -> More tools -> Performance Insights.

Alternatively, you can also enable Performance Insights through the the DevTools Command Menu.

Enable Throttling 🦥

Before we start our first Performance recording, I recommend enabling Network and CPU throttling to get a better idea of what users are experiencing in the real world. Additionally, disabling cache also helps to ensure we’re testing more realistic conditions for first-time visitors.

Performance Recording 🔴

Click the "Measure page load" button for DevTools to reload the page begin the performance recording. It’ll automatically stop the recording a couple of seconds after the page load has finished.

Easily one of the best features of Performance Insights would have to be the playback feature. It allows you not only reply the entire performance recording, but also scrub and zoom into to exact moments within the record.

And making it even more powerful is how it visually lines up with the all the tasks the browser is performing at that moment, like network requests and rendering.

Insights and Details Panel 🧐

Performance Insights is more than just tooling, but also goes further into helping pin-point the problem, and recommend some solutions.

For example, the right-hand side lays out a timeline of what’s happened during the recording. Each section in the Insights panel provides a link to get more details.

Try out the Experimental Performance Insights Panel!

In short, the new Performance Insights panel provides a lot more information and is easier to use than the existing Performance tab. Give it a try and let us know how it goes. Thanks for reading!

About me

Hi! I’m Adam, Director of Technology at Builder.io.

We make a way to drag + drop with your components to create pages and other CMS content on your site or app, visually.
So this:

import { BuilderComponent, registerComponent } from ‘@builder.io/react’
import { Hero, Products } from ‘./my-components’
// Dynamically render compositions of your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}
// Use your components in the drag and drop editor
registerComponent(Hero)
registerComponent(Products)

Gives you this:

Adam Bradley ⚡️

@adamdbradley

Have you used DevTool's Experimental Performance Insights panel?
🏎 Streamlined UI
📽 Performance Recording Playback
🧐 Insights and Details

How to use it: builder.io/blog/experimen…

17:51 PM - 01 Mar 2023