CPU throttling using Chrome Developer Tools

I recently gave a tutorial at Velocity Conference in Santa Clara about some of the amazing features that lie within the browsers we use everyday. As web developers, we are pretty lucky to have such awesome developer tools at our disposal.

After the tutorial was complete, a few people asked me about using the developer tools to simulate the performance of low end devices. I often think about throttling network connections, but not throttling the CPU. It's such a cool feature that it's worth sharing!

While many power users may be tech-savvy and own the latest smartphone - the reality is that the majority of people might not have such high end devices. It's important to think about these devices when building for the web. In this article, I am going to run through the steps you need to take in order to enable this feature and start simulating low end devices.

In order to get started using this feature, you will need to have Chrome Canary installed. If you aren't familiar with Canary, it has the newest of the new Chrome features and is designed for developers and early adopters. I like to think of it as Chrome from the future. Because some of these features are so new, it does mean that it can sometimes break down completely. You can download it over on the Canary website by following this link. Once you have Chrome Canary installed, you will need to dive a little deeper under the hood and unlock this feature. If you type the following into your address bar:

chrome://flags/#enable-devtools-experiments

You will be presented with a screen that has a list of hidden experiments that you can enable or disable. These experimental features may change, break, or disappear at any time - so use them with care. We're really getting into cutting-edge features here! You'll need to enable the Developer Tools experiments in order to see this feature in action.

Next, fire up the Developer Tools and head over to the settings menu.

You will notice a screen appear that looks similar to the image below. Next, navigate to the Experiments tab and check the CPU Throttling checkbox.

Now that the feature has been enabled, if you head over to the Timeline tab, you'll now have an option to throttle the CPU with either a high-end device or low-end device.

If you refresh the page, the timeline will automatically start recording everything that is going on under the hood while the page is loading. Once the recording is complete, you'll notice the timeline displaying data. The image below shows you the 5x slowdown for a low end device.

And again with a high end device at 2x slowdown.

And finally with no CPU throttling at all.

Oh, I do like that! By simply enabling this feature, you can quickly and easily simulate how your site might respond on a low end device.

I won't go too much into the Timeline tab because there are loads of great tutorials out there that do a great job of explaining the ins and outs of this feature. If you'd like to learn more about the Timeline tab, I recommend checking out the Google Developers Website for more information.

This feature is currently only available as an experiment in Chrome Canary, but fingers crossed this is coming to Chrome stable soon!