Viewing the Critical Rendering Path in the browser

Estimated Reading Time: 2 minutes

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

  1. Open the app: https://yonatankra.com/performance/crp.html
  2. Start profiling
  3. Click the button a few times
  4. Stop the profiling
  5. 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

Leave a Reply

Your email address will not be published. Required fields are marked *