Measuring Browser Loading Times

Here are instructions on how to measure the loading times for various Pivot Interactives assets within an activity.

Trevor Register avatar
Written by Trevor Register
Updated over a week ago

Overview

Sometimes as part of troubleshooting slow loading times, we will request that you send us additional data. Any image, video, or animation that's displayed on your screen has to be downloaded from a server into your browser. Various factors can affect how long that takes for each of these "assets", and we can measure how long it takes for each of them to download to your computer.

Please note that we will specifically ask you to gather this data if we feel that it will be helpful in troubleshooting your issue. If we've not asked you to gather this, we strongly advise opening up a chat with us first.

Below are detailed instructions on how to gather this data for different browsers.

Chrome

Open the Developer Tools window.

  1. Click the three vertical dots in the top-right corner of the browser.

  2. Scroll to More Tools

  3. Click Developer Tools (NOTE: If this option doesn't appear or is greyed out, then you don't have sufficient permissions on the device to access Developer Tools.)

Animation demonstrating the instructions written above on how to access the Network window in Chrome.

Access the Network tab.

  1. Click and drag the line separating the website view and the Developer Tools to reveal the Network tab.

  2. Click Network.

  3. The Network tab should now look like this.

    The Network tab within Developer Tools for Chrome.


    Note: if you see this below the 10ms, 20ms, 30ms, etc. boxes, you'll need to click the x across from Console.

    A red arrow points to an x showing how to close the Console window.

Collect the network data

  1. Refresh the page.

  2. Wait until everything stops loading.

  3. Take a screenshot of the results. Notice that there's a scroll bar on the far-right side of the Network tab. You will need to use that along with multiple screenshots to capture all of the results. Here's how to take a screenshot.

Safari (on a Mac)

In Safari Browser, console and network logs are available as a part of Develop Menu. By default, these options are disabled. To enable Develop Menu,

  1. Launch "Safari".

  2. Go to Safari >> Preferences >> Advanced (From the header).

  3. Enable Show Develop Menu in Menu Bar.

Once you've enabled the "Develop Menu" go to the activity page you are wishing to troubleshoot and click Develop > Show Javascript Console.

Opening the Network Log

  1. Open Safari JavaScript Console.

  2. Switch to Network Tab

  3. Refresh the webpage.

  4. Take a screenshot of the results. Notice that there's a scroll bar on the far-right side of the Network tab. You will need to use that along with multiple screenshots to capture all of the results. Here's how to take a screenshot.

Firefox

Open the Developer Tools window.

  1. Click the three horizontal lines in the top-right corner of the screen.

  2. Scroll down and click More Tools.

  3. Click Web Developer Tools.

Collect the network data

  1. Click Network to open the network tab.

  2. Use the line separating the network tab from the rest of the web page to increase it's size.


  3. Refresh the page.

  4. Wait for everything to stop loading.

  5. Take a screenshot of the results. Notice that there's a scroll bar on the far-right side of the Network tab. You will need to use that along with multiple screenshots to capture all of the results. Here's how to take a screenshot.

Did this answer your question?