This article describes how to use Google Chrome's Developer Tools to measure and monitor a website's performance.
The following image shows Developer Tools open on the Google home page:
On the Network tab of the Developer Tools pane, Chrome lists all connections for the current page. To test a specific page, open Developer Tools and navigate to the page you want to test. Alternatively, if you want to test the current page, simply refresh the page.
Chrome displays information for each page resource and its request:
Name: The name or URL of the requested resource.
Method: The HTTP method (GET or POST).
Status: The HTTP status code returned by the server.
Type: The MIME type of the resource.
Initiator: The referer sent to the server; this is usually the URL of the page you are viewing.
Size: The size of the resource as received by the browser (if the page was compressed by the server, this value is smaller than the actual filesize).
Time: The total time to retrieve the resource, including DNS lookup and download time.
Timeline: The timeline is a “waterfall” time-lapse view of each request. If you hover your mouse pointer over a bar on the waterfall, a tooltip appears with a detailed breakdown of the download time:
The combination of waiting and receiving times is the most important factor in determining site speed. However, internet connection speed can also affect performance, so you should always compare times from the same location when you are establishing site performance benchmarks.
At the bottom of the Network tab is a summary of the page load process. This summary includes the total number of requests, the total size of the entire page including its resources, and a breakdown of the time spent rendering the page in the browser.
The two time values Inside the parentheses are events important for site optimization:
To view the Google documentation for Developer Tools, please visit https://developer.chrome.com/devtools.