Module 2: Improving mobile site speed
2.1.1 Tools to get started
Learn how to use the Chrome DevTools Network panel to understand why a page loads slowly in this step-by-step tutorial.
Note: This tutorial is based on Chrome 57, which is currently Canary.
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.
- OPEN SLOW PAGE
- 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.
Figure 1. The Chrome DevTools Network panel, opened next to the slow page that you're going to diagnose.Note: For the rest of the screenshots, DevTools is undocked to a separate window, so that you can see its contents better.
- 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 3G. DevTools throttles the network connection to simulate a regular 3G experience. This is how mobile users experience your site in places with poor connections.
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.
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.
Figure 3. The Chrome DevTools Network panel, after reloading the page.
- 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.
- 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 async attribute and moving it to the bottom of the document's
<body>, the page can load without waiting for the script.
Figure 4. Viewing the source code for main.js in the Preview pane.
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.png request. The request spends most of its time downloading the image. This confirms that the image is too large.
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.
- Click Open Fast Page. The fixed page opens in a new tab.
- OPEN FAST PAGE
- Set up DevTools the same as before. Screenshots and cache disabling should be on, and network throttling should be set to Regular 3G.
- Reload the page. The page loads much faster.
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.