How I use the Chrome Performance Panel (Part 1)

Chrome is the most popular browser in the world. In South Korea, Still many users use Internet Explorer (include IE 10 ~), but nowadays Chrome users are increasing.

My team created a WYSYWIG editor service that can be using at NAVER blog. This is my NAVER blog: https://blog.naver.com/apes0113, Many Koreans are using the NAVER blog.

When we opened our renewed Editor at last December, we were touched Performance problems at Internet Explorer. However, as you know, IE DevTools is terrible.

So we are using Chrome DevTools to measure our Performance Problems.

Performance Panel

First, You need to open Chrome and move to your websites. Then, on your DevTools, you can open the Performance Tab.

Figure 1. Chrome DevTools Performance Tab

There are some ways to record your websites speed.

1. Record your interactions on the web application. using the 🔴 button
2. Record first loading performance on the web application. using the 🔄 button

First loading performance is essential when users are access to your web application. You can read the useful article at Google Developers like User-centric Performance Metrics.

You click 🔄 button, then Chrome reloads your web applications and record page performance. For example, I measure blog editor service.

Figure 2. Measuring example on the Performance tab

When you measure your web applications, may, your devices are better than real users. This is one of my big mistakes when I measure web performance. When I measure my web applications, Everything is OK because I used iMac to measure web applications. You can use CPU throttle for slow down your Web application.

Moreover, also I recommend using Secret mode because extensions will load scripts and resources that will create some confusion.

The right top side of your DevTools, You can see the ⚙ Icon. You click that, the extent layer will open. You can choose the option when you measure your web site.

1. Disabled JavaScript Samples
2. Enable advanced paint instrumentation (This option can see layer Information and paint profiler)
3. Network Throttle
4. CPU Throttle (4x, 6x)

My team was touched Performance problem at IE, So we used 6x CPU slowdown and measure performance.

Figure 3. measure performance with 6x slowdown

There are four parts that can see your web page’s performance.

1. Network
2. Frames
3. Interactions
4. Main

Network shows network request in your web application. You click Network tab and can see your network request.

Frames show your pages frame information if you are using the frame.

Interactions show what interactions happened when you record your web applications. That also includes Animation information.

Main shows how Chrome renders your web pages, and this is the most critical part of the Performance.

1. Loading (Loading resources)
2. Scripting (parse and evaluate JavaScript)
3. Rendering (Rendering DOM)
4. Painting (Paint the DOM)
5. Other
6. Idle

So If you measure your websites in development, you can measure your site’s speed and can find what makes slow down your websites.

Using the 🔴 button, You can measure performance more deeply. You click 🔴 button then Chrome record your interactions on the web applications and What happened when you interact your web pages elements.

For example, I clicked some nodes on the editor service.

mouse down and mouse up event happen and script work

You can see Mouse Down and Mouse Up events, and you can check what happened when you click nodes. Some parts are in the library (We are using React and MobX), Some parts are in my script codes.

Next Time, We will find how can we remove some unused parts and how my team could improve the Rendering speed.

IE MAGIC

We were using the custom cursor for showing cursor: grab. But in the Internet Explorer, When using the custom cursor, it will slow down cause using that.

So we remove custom cursor, then we improved our page speed.

If you have any question about this article, please comment that! I will reply to you. Thank you for reading and see you soon.