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.
Click Open Slow Page. The page opens in a new tab.
While the page is in focus, press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools on the page.
In DevTools, click the Network tab.
Enable 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.
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.
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.
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.
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.
Note the value for
DOMContentLoadedin 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.
Click main.js to investigate that request further. DevTools shows a set of new tabs that provide more information about this request.
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
asyncattribute and moving it to the bottom of the document's
<body>, the page can load without waiting for the script.
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.
Click Close so that you can see the Requests pane again.
Double-click on the top-left screenshot.
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.
Click anywhere outside of the screenshot to minimize it.
Hover over the Waterfall for the
logo-1024px.pngrequest. The request spends most of its time downloading the image. This confirms that the image is too large.
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
asyncto 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.
Click Open Fast Page. The fixed page opens in a new tab.
Set up DevTools the same as before. Screenshots and cache disabling should be on, and network throttling should be set to Regular 2G.
Reload the page. The page loads much faster.
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.
- See Critical Rendering Path to learn more about the theory of lightning-fast page loading.
- See Network Issues Guide to learn how to spot more network issues.
- See Network Panel Reference for a comprehensive list of Network panel features.
Was this page helpful?