Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Get Started with Analyzing Network Performance in Chrome DevTools

Learn how to use the Chrome DevTools Network panel to understand why a page loads slowly in this step-by-step, interactive tutorial.

Step 1: Set up DevTools

Suppose that you're receiving reports from mobile users that a particular page on your site is slow. Your job is to make the page fast.

  1. Click Open Slow Page. The page opens in a new tab.

  2. While the page is in focus, press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools on the page.

  3. In DevTools, click the Network tab.

    The Chrome DevTools Network panel, opened on the slow
          page that you're going to diagnose.
    Figure 1. The Chrome DevTools Network panel, opened next to the slow page that you're going to diagnose.

  4. Enable Capture Screenshots Capture
   Screenshots, which turns blue when enabled. DevTools captures screenshots during the page load.

Step 2: Emulate a mobile user's experience

Testing network performance on a laptop or desktop can be deceiving. Your internet connection is much faster than a mobile user's, and your browser caches resources from previous visits.

  1. Check the Disable Cache checkbox. When this checkbox is enabled, DevTools doesn't serve any resources from the cache. This more accurately emulates what first-time users experience when they view your page.

  2. From the dropdown menu that currently says No Throttling, select Regular 2G. DevTools throttles the network connection to simulate a regular 2G experience. This is how mobile users experience your site in places with poor connections.

The Chrome DevTools Network panel, after setting up screenshots,
         cache disabling, and throttling.
Figure 2. The Chrome DevTools Network panel, set up to emulate a mobile user's experience. Screenshots, cache disabling, and throttling are outlined in blue, from left to right, respectively.

This is a worst-case setup. If you can get your page loading fast on this setup, it'll be fast for all your users!

Step 3: Analyze requests

Figure out what's making the page slow by reloading the page and analyzing the requests that come in.

Part A: Find render-blocking scripts

When the browser encounters a <script> tag, it must pause rendering and execute the script immediately. Find scripts that aren't needed for page load and mark them asynchronous or defer their execution to speed up load time.

  1. Press Command+R (Mac) or Control+R (Windows, Linux) to reload the page. On a good Wi-Fi connection, the page takes more than 10 seconds to load completely.

    The Chrome DevTools Network panel, after reloading the page.
    Figure 3. The Chrome DevTools Network panel, after reloading the page.

  2. Note the value for DOMContentLoaded in the Summary pane, on the bottom of the Network panel. You should see a value of at least 4 seconds. When you see this event firing late like this, be on the lookout for scripts that are delaying the main document's load and parse.

  3. Click main.js to investigate that request further. DevTools shows a set of new tabs that provide more information about this request.

  4. Click the Preview tab to view the request's source code. You can see that the script just hangs for 4000ms. By marking this script with the async attribute and moving it to the bottom of the document's <body>, the page can load without waiting for the script.

    Viewing the source code for main.js in the Preview pane.
    Figure 4. Viewing the source code for main.js in the Preview pane.

See Parser-blocking versus asynchronous JavaScript to learn more about render-blocking scripts.

Part B: Find large requests

When the page loaded, did you notice that the DevTools logo took a long time to load? It's not blocking the load, but it's making the page appear slow. Users like it when pages appear fast.

  1. Click Close Close so that you can see the Requests pane again.

  2. Double-click on the top-left screenshot.

  3. Press your right-arrow key to scan through the set of screenshots. The time below the screenshot indicates when the screenshot was taken. The screenshot takes multiple seconds to load. That means it's probably too large of a file.

  4. Click anywhere outside of the screenshot to minimize it.

  5. Hover over the Waterfall for the logo-1024px.png request. The request spends most of its time downloading the image. This confirms that the image is too large.

    The waterfall for logo-1024px.png.
    Figure 5. The waterfall for logo-1024px.png.

Step 4: Verify fixes on updated page

You're just about done. Suppose now that you've already made two changes to the page:

  • You moved the script to the bottom of the <body> and marked it async to prevent it from blocking the page load.
  • You converted the logo to SVG to reduce its size.

All that's left to do is to test out the updated page to verify that your fixes do indeed make the page load faster.

  1. Click Open Fast Page. The fixed page opens in a new tab.

  2. Set up DevTools the same as before. Screenshots and cache disabling should be on, and network throttling should be set to Regular 2G.

  3. Reload the page. The page loads much faster.

    A recording of the page's load, after applying the fixes.
    Figure 6. A recording of the page's load, after applying the fixes. The page used to take about 10 seconds to appear visually complete. Now it only takes about 1 second.

Next Steps

Good job. You are now a bona fide expert in the Chrome DevTools Network panel. Well... maybe not an expert. You do have an excellent foundation of skills and knowledge, though.


Was this page helpful?