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:

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:

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