Analyzing network usage

The Network panel can show the time used to load resources.

The Network panel allows you to determine the network efficiency of your content. The panel displays information about each HTTP request made as the browser engine requests and downloads resources.

The Network panel

Click the Network icon in the toolbar to display the Network panel. Initially, the panel shows no information; you must reload the content on the device or simulator to allow Web Inspector to track the HTTP requests. When loading is complete, the Network panel displays a table.

Figure 1. The Network panel

By default, the table lists each of the requested resources in their requested order, and then charts the network activity as a waterfall timeline, with resources color-coded by type.

The waterfall timeline plots resources by the total time required to load the resource, from the initial request to the completion of the download. The pale segment of the resource bar in the chart represents the total latency; that is, the time the browser engine must wait from the moment it initially makes the request to the moment it receives the first packet of data for the resource. Two vertical lines on the chart show key page-load milestones:

You can customize how the content is displayed in the Network panel by filtering based on type, or by sorting by any of the table headings. You can also reformat the chart to highlight different time measures.