Reading the Network Panel: What Loads and When
The Network panel answers two basic questions about any web page: what resources are being requested, and when those requests go out. To see this in practice, open the demo app in Chrome and press Control+Shift+J (or Command+Option+J on Mac), click the Network tab, and reload the page.
Initial Navigation Traffic
Every row in the panel is a single request–response pair. The first row, with type document, is the initial navigation request for the page's HTML. All subsequent asset loads are subresources derived from that main document. In the sample, the next two rows are the stylesheet and script requests that the HTML initiates.
The waterfall diagram shows these subresource requests do not start until late in the navigation response. Together, the HTML, CSS, and JavaScript constitute everything needed to render the page on first load.
Runtime Requests After Load
Many apps also issue requests after the initial render, typically in response to user interaction. To see this pattern, keep the Network panel recording and click Find Me in the app, then Allow when the browser asks for location access. After that, click Find Nearby Wikipedia Entries.
The new entries start with a fetch request to the Wikipedia API. The subsequent png and jpeg rows are images referenced by the API response; their waterfall entries flow directly from that response. The timing of these requests depends on when you click the button—unlike the initial load, there is no fixed relationship to the navigation request. The visible gap in the waterfall between the document load and these entries marks the idle period before user interaction triggered them.
Two Categories of Network Activity
Most web app traffic falls into one of two buckets:
- Initial requests: issued immediately after navigation for the HTML, JavaScript, CSS, and other assets needed to paint the first view.
- Runtime requests: triggered later by user actions, often beginning with one API call that cascades into several follow-up fetches for the data it returns.
Using the URL list in the Name column, the resource type in the Type column, and the timing in the waterfall, you can identify both groups for any application you inspect.
