What I Learned at Work this Week: Chrome DevTools Performance Tab

Generating a Performance Sample

(The incognito window isn’t necessary, but it gives us a more clear view of how a fresh user is going to view the page)
  • Record: click this to start collecting data on site performance. The resulting recording is called a Profile.
  • Start profiling and reload page: this will produce a full performance profile after a page reload. We’ll use it to get an idea of what functions are being called and how long they take when our page starts up.
  • Clear: clears the current performance profile.
  • Load Profile: We can use this to view a previously saved profile.
  • Save Profile: If we’ve got a profile on in the console, we can save it!
  • Show recent timeline sessions: Switch between multiple recordings.
  • Capture screenshots: Checking this box means that we’ll be able to see exactly how the page looked at the moment of a certain function call. This can help with figuring out whether certain scripts can be made asynchronous, delayed, or even removed completely. A big part of performance management is determining the balance between load speed and site experience.
  • Capture settings: This gear toggles the next bar.
  • Disable JavaScript samples: By default, our recording will show a full call stack of JS functions. This information can be insightful, but can also make the chart busy and harder to read. Disabling JavaScript samples will compress the call stack display.
  • Enable advanced paint instrumentation (slow): Paint instrumentation allows us to analyze animations. It’s not super relevant to site performance, but it’s worth exploration. Here’s a short video from Google about it.
  • Network: Throttling allows us to simulate a slower connection speed so that we can test our site’s performance in different situations. When loading content at a non-optimal speed, we can get a much better idea of what loads on our site when.
  • CPU: We can also throttle our CPU, simulating a slower device rather than a slower network.

What does it mean?

Gathering Insights

<script type="text/javascript" crossorigin="anonymous" src="//vidstat.taboola.com/vpaid/units/29_7_6/infra/cmTagINLINE_INSTREAM.js"></script>

--

--

--

Solutions Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React.js with WordPress as a Backend: WP REST API Example

[Action required] Your RSS.app Trial has Expired — Tue Aug 24 2021

We’re so cutting edge: How we added a React App to our Rails project at Songkick

Pessimistic rendering with form data.

Preview: Upcoming Changes for Expo SDK 33

How to play CPL game?

Build Your First Single Page React App Using regauge

Build your first react app using regauge

Node and Express Session

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mike Diaz

Mike Diaz

Solutions Engineer

More from Medium

Extend expiry date of SharePoint Online Client ID and Secret Key (Powershell)

Beginning Journey to Software

Consuming an API and transforming JSON payload to XLSX (Excel) in Mulesoft

How to Use Your IIS more Effective ? Best Ways to Use IIS Powerful and Professional