Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Measure Resource Loading Times

Measure the network performance of your site using the Network panel.

The Network panel records information about each network operation on a page, including detailed timing data, HTTP request and response headers, cookies, and more.


  • Use the Network panel to record and analyze network activity.
  • View load information in aggregate or for individual resources.
  • Filter and sort how resources are displayed.
  • Save, copy, and clear network recordings.
  • Customize the Network panel to your needs.

Network panel overview

The Network panel consists of five panes:

  1. Controls. Use these options to control how the Network panel looks and functions.
  2. Filters. Use these options to control which resources are displayed in the Requests Table. Tip: hold Cmd (Mac) or Ctrl (Window/Linux), and then click on a filter to select multiple filters at the same time.
  3. Overview. This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously.
  4. Requests Table. This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it. Tip: right-click on any of the table headers except Timeline to add or remove columns of information.
  5. Summary. At a glance this pane tells you the total number of requests, amount of data transferred, and load times.

network panel panes

The Requests Table displays the following columns by default. You can add and remove columns.

  • Name. The name of the resource.
  • Status. The HTTP status code.
  • Type. The MIME type of the requested resource.
  • Initiator. The object or process that initiated the request. It can have one of the following values:
  • Parser. Chrome's HTML parser initiated the request.
  • Redirect. An HTTP redirect initiated the request.
  • Script. A script initiated the request.
  • Other. Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.
  • Size. The combined size of the response headers (usually a few hundred bytes) plus the response body, as delivered by the server.
  • Time. The total duration, from the start of the request to the receipt of the final byte in the response.
  • Timeline. The Timeline column displays a visual waterfall of all network requests. Clicking the header of this column reveals a menu of additional sorting fields.

Record network activity

When the Network panel is open, DevTools records all network activity by default. To record, just reload a page while the panel is open, or wait for network activity on the currently loaded page.

You can tell whether or not DevTools is recording via the record button. When it's red (record button on), DevTools is recording. When it's grey (record button off), DevTools is not recording. Click this button to start or stop recording, or press the keyboard shortcut Cmd/Ctrl+e.

Capture screenshots during recording

The Network panel can capture screenshots during a page load. This feature is known as the Filmstrip.

Click on the camera icon to enable the Filmstrip. When the icon is grey, the Filmstrip is disabled (filmstrip
disabled). When the icon is blue, it is enabled (filmstrip enabled).

Reload the page to capture the screenshots. The screenshots are displayed above the Overview.

recording with filmstrip

When you hover over a screenshot, the Timeline displays a vertical yellow line indicating when the frame was captured.

filmstrip overlay on timeline

Double-click on a screenshot to view a zoomed version of the screenshot. While a screenshot is zoomed, use the left and right arrows of your keyboard to navigate between screenshots.

zoomed filmstrip screenshot

View DOMContentLoaded and load event information

The Network panel highlights two events: DOMContentLoaded and load.

DOMContentLoaded is fired when the initial markup of a page has been parsed. It is displayed in two places on the Network panel:

  1. The blue vertical bar in the Overview pane signifies the event.
  2. In the Summary pane you can see the exact time of the event.

DOMContentLoaded event on network panel

load is fired when a page has fully loaded. It is displayed in three places:

  1. The red vertical bar in the Overview pane signifies the event.
  2. The red vertical bar in the Requests Table signifies the event, too.
  3. In the Summary pane you can see the exact time of the event.

load event on network panel

View details for a single resource

Click on a resource name (under the Name column of the Requests Table) to view more information about that resource.

The tabs available change depending on what type of resource you've selected, but the four tabs below are most common:

  • Headers. HTTP headers associated with the resource.
  • Preview. Previews of JSON, image, and text resources.
  • Response. HTTP response data (if any).
  • Timing. A granular breakdown of the request lifecycle for the resource.

viewing details for a single resource

View network timing

Click the Timing tab to view a granular breakdown of the request lifecycle for a single resource.

The lifecycle shows how much time is spent in the following categories:

  • Queuing
  • Stalled
  • If applicable: DNS lookup, initial connection, SSL handshake
  • Request sent
  • Waiting (Time to first byte (TTFB))
  • Content Download

timing tab

You can also view this same information by hovering your mouse over a resource within the Timeline graph.

timing data for one resource in timeline

Related Guides:

View HTTP headers

Clicking the Headers shows the headers for that resource.

The Headers tab displays the resource's request URL, HTTP method, and response status code. Additionally, it lists the HTTP response and request headers and their values, and any query string parameters.

HTTP headers for a single resource

You can view response headers, request headers, or query string parameters in source or parsed format by clicking the view source or view parsed link next to each section.

view header source

You can also view query string parameters in URL-encoded or decoded format by clicking the view URL encoded or view decoded link next to that section.

view URL encoded

Preview a resource

Click the Preview tab to view a preview of that resource. The Preview tab may or may not display any useful information, depending on the type of resource you've selected.

image resource preview

View HTTP response content

Click the Response tab to view the resource's unformatted HTTP response content. The Response tab may or may not contain any useful information, depending on the type of resource you've selected.

JSON resource response data

View cookies

Click the Cookies tab to view a table of cookies transmitted in the resource's HTTP request and response headers. This tab is only available when cookies are transmitted.

Below is a description of each of the columns in the table:

  • Name. The cookie's name.
  • Value. The cookie's value.
  • Domain. The domain the cookie belongs to.
  • Path. The URL path the cookie came from.
  • Expires / Max-Age. The value of the cookie's expires or max-age properties.
  • Size. The size of the cookie in bytes.
  • HTTP. Indicates that the cookie should only be set by the browser in the HTTP request, and cannot be accessed with JavaScript.
  • Secure. The presence of this attribute indicates that the cookie should only be transmitted over a secure connection.

resource cookies

View WebSocket frames

Click the Frames tab to view WebSocket connection information. This tab is only visible when the selected resource initiated a WebSocket connection.

websocket frames tab

The list below describes each of the columns in the table on the Frames tab:

  • Data. The message payload. If the message is plain text, it's displayed here. For binary opcodes, this field displays the opcode's name and code. The following opcodes are supported:
  • Continuation Frame
  • Binary Frame
  • Connection Close Frame
  • Ping Frame
  • Pong Frame
  • Length. The length of the message payload in bytes.
  • Time. The time stamp when the message was created.

Messages are color-coded according to their type:

  • Outgoing text messages are color-coded light-green.
  • Incoming text messages are white.
  • WebSocket opcodes are light-yellow.
  • Errors are light-red.

Notes about current implementation:

  • To refresh the Frames table after new messages arrive, click the resource name on the left.
  • Only the last 100 WebSocket messages are preserved by the Frames table.

View resource initiators and dependencies

Hold Shift and hover over a resource to view its initiators and dependencies. This section refers to the resource that you are hovering over as the target.

The first resource above the target that is color-coded green is the initiator of the target. If there is a second resource above that which is color-coded green, that's the initiator of the initiator. Any resources below the target that are color-coded red are dependencies of the target.

In the screenshot below, the target is dn/. The initiator of the target is the script beginning with rs=AA2Y. The initiator of the initiator (rs=AA2Y) is google.com. Last, dn.js is a dependency of the target (dn/).

viewing resource initiators and

Keep in mind that for pages with lots of resources it's possible that you may not be able to see all of the initiators or dependencies.

Sort requests

By default, the resources in the Requests Table are sorted by the start time of each request, starting with the earliest requests at the top.

Click on the header of a column to sort the table by each resource's value for that header. Click the same header again to change the sort order to ascending or descending.

The Timeline column is unique from the others. When clicked, it displays a menu of sort fields:

  • Timeline. Sorts by the start time of each network request. This is the default sort, and is the same as sorting by the Start Time option.
  • Start Time. Sorts by the start time of each network request (same as sorting by the Timeline option).
  • Response Time. Sorts by each request's response time.
  • End Time. Sorts by the time when each request completed.
  • Duration. Sorts by the total time of each request. Select this filter to determine which resource takes the longest time to load.
  • Latency. Sorts by the time between the start of the request and the beginning of the response. Select this filter to determine which resource takes the longest time to first byte (TTFB).

Timeline sort fields

Filter requests

The Network panel provides numerous ways to filter which resources are displayed. Click the filters button (filters button) to hide or display the Filters pane.

Use the content type buttons to only display resources of the selected content type.

multiple content type filters selected

The filter text field is deceptively powerful. If you enter an arbitrary string in it, the Network panel only displays the resources whose filenames match the given string.

resource name filtering

The filter text field also supports various keywords that let you sort resources by various properties, such as file size using the larger-than keyword.

The list below describes all of the keywords.

  • domain. Only display resources from the specified domain. You can use a wildcard character (*) to include multiple domains. For example, *.com displays resources from all domain names ending in .com. DevTools populates the autocomplete dropdown menu with all of the domains it has encountered.
  • has-response-header. Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete dropdown with all of the response headers that it has encountered.
  • is. Use is:running to find WebSocket resources.
  • larger-than. Show resources that are larger than the specified size, in bytes. Setting a value of 1000 is equivalent to setting a value of 1k.
  • method. Show resources that were retrieved over a specified HTTP method type. DevTools populates the dropdown with all of the HTTP methods it has encountered.
  • mime-type. Show resources of a specified MIME type. DevTools populates the dropdown with all MIME types it has encountered.
  • mixed-content. Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).
  • scheme. Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
  • set-cookie-domain. Show the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. DevTools populates the autocomplete with all of the cookie domains that it has encountered.
  • set-cookie-name. Show the resources that have a Set-Cookie header with a name that matches the specified value. DevTools populates the autocomplete with all of the cookie names that it has encountered.
  • set-cookie-value. Show the resources that have a Set-Cookie header with a value that matches the specified value. DevTools populates the autocomplete with all of the cookie values that it has encountered.
  • status-code. Only show resources whose HTTP status code match the specified code. DevTools populates the autocomplete dropdown menu with all of the status codes it has encountered.

filtering by file size

Some of the keywords above mention an autocomplete dropdown menu. To trigger the autocomplete menu, type in the keyword followed by a colon. For example, in the screenshot below typing domain: triggered the autocomplete dropdown.

filter text field autocomplete

Copy, save, and clear network information

Right-click within the Requests Table to copy, save, or delete network information. Some of the options are context-sensitive, so if you want to operate on a single resource, you need to right-click on that resource's row. The list below describes each of the options.

  • Copy Response. Copies the HTTP response of the selected resource to the system clipboard.
  • Copy as cURL. Copies the network request of the selected resource as a cURL command string to the system clipboard. See Copying requests as cURL commands.
  • Copy All as HAR. Copies all resources to the system clipboard as HAR data. A HAR file contains a JSON data structure that describes the network "waterfall". Several third-party tools can reconstruct the network waterfall from the data in the HAR file. See Web Performance Power Tool: HTTP Archive (HAR) for more information.
  • Save as HAR with Content. Saves all network data to an HAR file along with each page resource. Binary resources, including images, are encoded as Base64-encoded text.
  • Clear Browser Cache. Clear the browser cache. Tip: You can also enable or disable the browser cache from the Network Conditions drawer.
  • Clear Browser Cookies. Clear the browser's cookies.
  • Open in Sources Panel. Open the selected resource in the Sources panel.
  • Open Link in New Tab. Opens the selected resource in a new tab. You can also double-click the resource name in the Network table.
  • Copy Link Address. Copies the resource URL to the system clipboard.
  • Save. Save the selected text resource. Only displayed on text resources.
  • Replay XHR. Re-send the selected XMLHTTPRequest. Only displayed on XHR resources.

copy and save context menu

Copy one or all requests as cURL commands

cURL is a command line tool for making HTTP transactions.

Right-click on a resource within the Requests Table, hover over Copy and then select Copy as cURL to copy a string of cURL requests for all resources that have been detected by the Network panel.

Copy single request as cURL command

Select Copy All as cURL to copy a string of cURL requests for all resources that have been detected by the Network panel.

When you copy all, filtering is ignored (e.g. if you filter the Network panel to only display CSS resources and then press Copy All as cURL, you'll get all the detected resources, not just the CSS).

Customize the Network panel

By default the Requests Table displays resources with small rows. Click the Use large resource rows button (large resource rows button) to increase the size of each row.

Large rows enable some columns to display two text fields: a primary field and a secondary field. The column header indicates the meaning of the secondary field.

large resource rows

Add and remove table columns

Right-click on any of the headers in the Requests Table to add or remove columns.

Add or remove columns

Preserve the network log upon navigation

By default, the network activity recording is discarded whenever you reload the current page or load a different page. Enable the Preserve log checkbox to save the network log across these scenarios. New records are appended to the bottom of the Requests Table.

Additional resources

To learn more optimizing the network performance of your application, see the following resources:


Was this page helpful?