Viewing the Critical Rendering Path in the browser

The critical rendering path (CRP from now on) is also known as The Pixel Path. It’s actually what happens from the moment your javascript code runs, until the moment the pixels are shown on screen. We can also call it a “frame”.

This is the flow of the CRP:

**Figure 1:** The Critical Rendering Path

The colors are purposefully as they are. This is how they are represented in the profile visualization.

Here’s a performance recording of a simple app:

**Figure 2:** Recording of a simple application. In this recording each arrow shows the different phases of the CRP. The parts in the recording are: Yellow for JS, purple for Style and Layout and green for Paint and Composite.

Do it yourself

Open the app: https://yonatankra.com/performance/crp.html
Start profiling
Click the button a few times
Stop the profiling
Zoom into one of the click events

You can view the CRP in your app – just go to chrome dev tools’ performance tab and start recording.

I’ve recently added a video to egghead.io about this topic. If you prefer to watch a video – here is it: See the Critical Rendering Path in the browser

Facebook Tweet Pin LinkedIn

Javascript

Viewing the Critical Rendering Path in the browser

Do it yourself

Related