DevTools Tips

See the size of the transferred data for images, scripts, or other resources

To know how much data your website transfers between the server and the client to display images, or scripts, or anything else:

  1. Open the Network tool.

  2. Refresh the page to make sure the list of requests appears in the tool.

  3. Filter the list of requests to only what you're interested in:

  4. Look at the transferred size in the status bar at the bottom of the Network tool. The first number is the amount of data transferred for the filtered resources displayed in the tool.

In the screenshot below, the CSS and JS tags have been checked in the toolbar, filtering the list of resources down to just stylesheets and JavaScript files, and the status bar shows that these resources amount to 73.8kB total.

The Network tool in Chrome, with the transferred size highlighted