Download Article
Use Chrome DevTools to test your website on a slow internet connection or hardware
Download Article
When you're developing a website, it's important that your site looks great on all devices. Your website might load quickly on your powerful computer with broadband connectivity, but how will it look on a 3G smartphone or a computer with a sluggish internet connection? To test your website or web app in real world conditions, you can throttle your browser to simulate slow networks and devices. This wikiHow article will teach you three simple ways to use Chrome DevTools to throttle your web browser for testing.
Things You Should Know
- To quickly throttle both the CPU and network speed by selecting a preset, use Device Mode .
- To simulate a slow internet connection, you can throttle the network .
- Throttle the CPU to simulate your website on devices with slow processors.
- These steps will also work in any Chromium-based browser, including Microsoft Edge.
Steps
Section 1 of 4:
Using Device Mode
Download Article
-
Open Chrome DevTools. "Device Mode" in Chrome DevTools allows you to quickly throttle both the network and the CPU at the same time to emulate slower devices on 3G connections. To open DevTools in your browser, press Ctrl + Shift + i (Windows or Linux) or Cmd + Option + i (Mac).
- You can also right-click the page you want to test, then click Inspect Element . [1] X Research source
- Device Mode only has 2 throttling presets for basic testing. If you need to specify custom network throttling speeds, use the network throttling method instead.
-
Expand the left panel to show all toolbar options. Some options are hidden from the toolbar at the top of the left panel by default, so you'll need to expand it. Hover your mouse over the center vertical bar that divides the left and right panels until you see a double-arrow cursor, then drag the bar right until you see the "No throttling" menu atop the left panel.Advertisement
-
Select a viewport profile. First, if you don't see a toolbar above the left panel of DevTools that begins with a "Dimensions" menu, press Ctrl + Shift + M (PC) or Cmd + Shift M (Mac) to toggle on the Device Toolbar. Then, select a device profile from the "Dimensions" menu in the upper-left corner.
- By default, the view in DevTools is Mobile . If you'd rather emulate a computer user, click the menu that's set to Mobile and select Desktop .
- You can select from a variety of profiles for different models, such as Samsung Galaxy A51/71 or iPhone 5/SE .
- If you don't see the device you're looking for, click the Dimensions menu and select Edit . Then, check the box next to the device you want to add, or click Add custom device to add your own viewport profile.
- This option only changes the screen dimensions to the selected device. It's not possible to emulate that device's hardware entirely.
-
Select an option from the "No throttling" menu. This is the last menu at the top of the left panel. Here, you'll find two options:
- Mid-tier mobile: This option simulates a fast 3G connection while throttling your CPU 4 times slower than it is normally.
- Low-end mobile: Choose this option to emulate a slower 3G connection and throttle the CPU 6 times slower than normal.
- Both throttling options are relative to the CPU in your computer. In other words, choosing one of these options on a computer with an ultra-fast CPU will yield faster results than the same test on a slower computer. [2] X Research source
-
Click the Network tab. It's at the top of the right panel.
-
Check the box next to "Disable cache." You'll see this in the toolbar below "Network." This turns off your browser's cache for this site so you can load a fresh version.
-
Refresh the page to throttle the browser. Click the Refresh button at the top of Chrome (the curved arrow), or press Ctrl + R (PC) or Cmd + R (Mac) to refresh the page. You'll now see the throttled version of the page in the left panel.
- You will see the load times for each element in the right panel on the Network tab, along with the total load time and amount of data transferred.
Advertisement
Section 2 of 4:
Network Throttling
Download Article
-
Open Chrome DevTools. Network throttling allows you to see how quickly your website loads on slower internet connections. You can throttle the network to test a website in your browser at any network speed without throttling the CPU. To open DevTools, press Ctrl + Shift + i (Windows or Linux) or Cmd + Option + i (Mac).
- You can also right-click the page you want to test, then click Inspect Element . [3] X Research source
-
Select a viewport profile. If you don't see a toolbar above the left panel of DevTools that begins with a "Dimensions" menu, press Ctrl + Shift + M (PC) or Cmd + Shift M (Mac) to toggle on the Device Toolbar. Then, choose the device or screen dimensions of the device you want to emulate.
- To emulate a phone or tablet screen size, select a profile from the "Dimensions" menu in the upper-left corner. You can select from a variety of profiles for different models, such as Surface Duo or Galaxy Note III . Note that these profiles only affect the viewport size, not the device's actual hardware.
- By default, the view is Mobile . If you'd rather test the desktop version of the site, click the menu that's set to Mobile and select Desktop . If you don't see this option, just hover your mouse cursor over the center vertical bar that divides the two panels, then drag the bar right until you it.
- You can also add other device profiles (or create a custom profile) if you don't see the screen size or device you're looking for. To do this, click the Dimensions menu and select Edit . Then, check the box next to the device you want to add, or click Add custom device to add your own dimensions.
-
Click the Network tab. You'll see this in the right panel between "Sources" and "Performance."
-
Add a custom network throttling profile (optional). Near the top of the right panel, you'll see a menu that's set to "No Throttling" by default. While there are some speed presets you can use, you can also add your own custom profile to throttle the network by specifying download and upload speeds:
- Click the No Throttling menu and select Add under "Custom."
- Click Add custom profile .
- Type a name for your custom profile, and enter the download and upload speeds you want to test (in kb/s).
- To test the website with latency , enter how much latency you want to test with (in ms).
- Click Add to create your profile.
-
Select a network throttling option. Click the No throttling menu at the top of the right panel, then select a preset. [4] X Research source
- The built-in presets are Fast 3G , Slow 3G , or Offline .
- If you created a custom network throttling profile, you can select it under "Custom."
-
Check the box next to "Disable cache." By default, you'll be loading the cached version of the site, which loads faster than in typical network conditions. Because people visiting your site for the first time won't be loading the site from cache, checking this box at the top of the right panel emulates a user's first visit.
-
Reload the page in your throttled environment. You can refresh the page by pressing Ctrl + R (PC) or Cmd + R . As the site reloads, you'll see the emulated version of the site in the left panel. You'll also see how long each element took to load in the "Time" column, and the total loading time next to "Load" at the bottom of the list of elements.
- You can also interact with the page in the viewport area to see how each element of your site is impacted by the throttled connection.
- If you also want to use your custom network throttling settings with CPU throttling, see CPU Throttling .
Advertisement
Section 3 of 4:
CPU Throttling
Download Article
-
Open Chrome DevTools. If you want to test your website on a low-powered CPU, you can use the CPU throttling tools built in to Chrome DevTools. To open DevTools, press Ctrl + Shift + i (Windows or Linux) or Cmd + Option + i (Mac).
- You can also right-click the page you want to test, then click Inspect Element .
- If you want to throttle both the internet connection and the CPU, complete the steps in the Network Throttling method, then skip to step 4 .
-
Show the Device Toolbar (if not visible). When you open DevTools, the view of the current page is split vertically. On the left panel, you will see the site you're testing. If you don't see a bar running along the top-left corner of DevTools that begins with a "Dimensions" menu, press Ctrl + Shift + M (PC) or Cmd + Shift M (Mac) to toggle on the Device Toolbar.
-
Select a viewport profile. By default, the view in DevTools is Mobile . If you want to emulate a smartphone or tablet screen size, you can select a device from the "Dimensions" menu in the upper-left corner of the DevTools view. The viewport is set to "Responsive" by default, but you can select from a variety of profiles for different models, such as Galaxy Fold or iPhone Pro .
- If you'd rather emulate a computer user, click the menu that's set to Mobile and select Desktop . If you don't see this menu in the left panel, hover your mouse over the center dividing bar until the cursor turns into a double-arrow, then drag right until it's visible.
- If you don’t see the device or dimensions you're looking for, click the Dimensions menu, then click Edit . You can then check the box for any device you want to add to the list, or click Add custom device… to specify the resolution that you want to test.
-
Click the Performance tab. It's at the top of the right panel.
-
Click the gear icon in the Capture Settings toolbar. You'll actually see two gear icons in the right panel—one in the top toolbar, and one the toolbar just below it. You'll want to click the second gear icon, which is in the same row as the Record button (the circle). More options will appear in the right panel.
-
Select an option from the "CPU throttling" menu. Choose either of the two throttling options— 4x slowdown throttles the CPU to 4 times slower than its normal operating speed, while 6x slowdown throttles to 6 times slower than its normal operating speed.
- Keep in mind that throttling the CPU is relative to your own CPU. In other words, throttling 6 times lower than your normal CPU speed will produce a faster load on a modern Intel i9 processor than a Celeron.
- If your web app uses the navigator.hardwareConcurrency property to read the number of processors in the user's device, you can optionally check the box next to "Hardware concurrency" and enter the number of processor cores to emulate. [5] X Research source
-
Disable the cache. To prevent your browser from loading a cached version of the website while you're throttling, click the Network conditions tab at the bottom of the right panel, then check the box next to "Disable cache."
-
Enable network throttling (optional). If you want to throttle the network while throttling the CPU, you'll see a "Network throttling" menu on the "Network conditions" tab. You can select either Fast 3G or Slow 3G to simultaneously throttle both the CPU and internet speed for your test.
-
Press Ctrl + ⇧ Shift + E (PC) or ⌘ Cmd + ⇧ Shift + E (Mac). Alternatively, you can click the small curved arrow at the top of the right panel. This is the "Start profiling and reload page" option, which refreshes the page and then displays the results of your throttling test. Once the page is finished loading, you'll see how long each element took to load, and details about each element's load on the simulated CPU.
- If you want to test more than just the page load, click the Record button at the top of the right panel instead, and then interact with the page in the left panel as a user would. When you're finished, click Stop to view the report in the right panel.
Advertisement
Expert Q&A
Search
-
QuestionCan I do this test locally without an internet connection?Théo Dufort is a Software Engineer and Full-Stack Web Developer based in Quebec, Canada. With nearly 6 years of experience, Théo is a full-stack developer specializing in web development. At just 16, he launched his own consulting business to advise on all things web design and development. Most recently he created MyBookQuest, designed to be an all-in-one platform for book lovers to track, organize, and fill their personal library. MyBookQuest aims to fill the gaps of the popular Goodreads app owned by Amazon by rewarding its users with points to give them different perks like discount coupons as an incentive to read, review, and rate their latest book.Yes, modern browsers like Chrome and Firefox come with developer tools that let you simulate slower network speeds or limit bandwidth, making it easy to see how your app performs under different conditions. You can even simulate being offline to check how well your app handles things like caching and local storage when there’s no internet connection. For example, if your app relies on large data files, like a huge JSON file for translations, using these simulations can help you see how smoothly it loads and switches data. It's a great way to catch any potential slowdowns before they become a problem for users post launch.
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
Advertisement
Tips
- You can also use Firefox's Network Monitor for throttling. To get there, press Ctrl + Shift + E (PC) or Cmd + Opt + E (Mac), then select a network speed from the No throttling menu. [9] X Research sourceThanks
- The throttling feature of DevTools is also available in Microsoft Edge and Opera, as both browsers are built on the Chromium browser.Thanks
- Safari's developer tools do not currently have a built-in throttling tool.Thanks
Submit a Tip
All tip submissions are carefully reviewed before being published
Name
Please provide your name and last initial
Thanks for submitting a tip for review!
Advertisement
References
- ↑ https://developer.chrome.com/docs/devtools/open/
- ↑ https://developer.chrome.com/docs/devtools/device-mode/#type
- ↑ https://developer.chrome.com/docs/devtools/open/
- ↑ https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#emulate-slow-network-connections-from-the-network-conditions-drawer
- ↑ https://developer.chrome.com/docs/devtools/performance/reference/
- ↑ https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
- ↑ https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search
- ↑ https://developers.google.com/search/blog/2016/11/mobile-first-indexing
- ↑ https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/
About This Article
Thanks to all authors for creating a page that has been read 16,596 times.
Advertisement
