How to reliably track actual page load times using Chrome developer tool or Firebug?

Question

I am trying to optimize a Magento site using the chrome developer tool to analyse the page load times. Aim is to build a report for the next 15 days to keep track of the page load time improvements. But the problem is every time I load the page there's a different load time recorded by developer tools for instance currently it's varying between 5 to 9 seconds.

I am confused about how to measure the page load times reliably? I understand that my pages have some external content and that is the main reason of this variation. But How can I ignore these variations and identify the real load time so that I am sure that I am actually optimizing this thing?

For example below are the screenshots of two consecutive F5s.

Answer 1

First of all, you should disable the cache when you take the readings, since the load times will be less if Chrome only has to load resources from cache. See my answer here regarding that.

Secondly, you will get a more accurate reading by exporting the HAR. You can do this by right-clicking and selecting "Save as HAR with Content" as per below:

You will more accurate and detailed data of the individual requests. Just open the resulting *.har file in a text editor and take a look at the JSON.

The "real" load times include the external requests. You can filter out the requests that are shown in the panel, for example, by domain. See Network Advanced Filter.

With an example below using the BBC News website, I included the Domain column in the panel by right-clicking on the headings and selecting the column name. In the filter bar, I added domain:www.bbc.co.uk, which shows all requests to that domain. You could also try using "Remote Address" and sorting the grid based on that.

You will have all the data you want in the HAR. It's just a matter of digging out the stuff you want.

Important Note: The total transfer time doesn't change based on the filter. You would need to sum up the totals, either in the panel, which includes rounding (not as accurate), or using the unrounded HAR values (more accurate).

For more information, check out Evaluating Network Performance.