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.
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:
- The blue line indicates the time when parsing of the content is complete and the DOMContent event fires.
- The red line indicates the time when all the resources have been loaded and the load event fires.
You can customize how the content is displayed in the Network panel by filtering based on type or sorting by any of the table headings. You can also reformat the chart to highlight different time measures.