Progressive Web Apps with React

Waterfall

Here, we have a detailed breakdown of what Chrome is actually doing at any time during the rendering process.

The Waterfall tool is detailed and complex, so we'll have to be content with a surface glimpse here. There are two insights we can draw just from looking at it, however. First, we can see all the idle time visualized. Most of it is at the start, which is somewhat unavoidable as we first load the document, but there's that great gap in the middle that we can try to fill.

Second, you can see when the application receives the messages from Firebase, in the rightmost waterfall section. If you hover over each block, you can actually ...