The Network panel in the browser’s DevTools helps determine which resources are loaded and when. Each row in the Network panel corresponds to a URL that the web application has loaded. This tutorial is based on screenshots of Chrome’s DevTools interface. Other browsers support similar features, but the interface will be slightly different.
Use the F12 button to open the DevTools tool. It is recommended to use the DevTools of Chrome, Microsoft Edge, and Firefox.
Why you need to know what’s loaded on a web page
- To formulate the correct caching strategy, you must first know which static resources are loaded, the size of these static files, and the loading speed before caching.
- Whether the resources loaded on the webpage are all necessary for the webpage, and whether there are resources that are not actually used but loaded.
DevTools tool to view loaded resource names and types
The “Name” and “Type” columns help provide a meaningful picture of what’s loading, providing a clear view of what’s loading. In the example below, there are four URLs, each representing a unique content type.
The name represents the URL requested by the browser, although only the last part of the URL path listed (the filename) will be seen. https://example.com/main.cssFor example, you will only end up seeing if it is loaded main.css.
The last few characters of the URL path, the part after the last decimal point (for example: “css”), is called the extension of the URL. The extension of the URL usually tells you the type of resource being requested and maps directly to the information displayed in the Type column. For example, v2.html is a document and main.css is a stylesheet.
Waterfall column helps to see loading speed and order
Starting at the top and going all the way down, the length of each bar represents the total time it took to load each resource.
Once v2.html is loaded, requests for the resources it references (also known as sub-resources) begin. The browser can request multiple sub-resources at the same time. In the above figure, main.css and logo.svg are loaded at the same time. Main.js is not loaded until the first three resources are loaded.