Browser Throttling: Simulate Slow Internet & CPU for Testing

PDF download Download Article
Use Chrome DevTools to test your website on a slow internet connection or hardware
PDF download 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.
Section 1 of 4:

Using Device Mode

PDF download Download Article
  1. "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]
    • 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.
  2. 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
  3. 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.
  4. 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]
  5. It's at the top of the right panel.
  6. 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.
  7. 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.
    8. Advertisement
Section 2 of 4:

Network Throttling

PDF download Download Article
  1. 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]
  2. 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.
  3. You'll see this in the right panel between "Sources" and "Performance."
  4. 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.
  5. Click the No throttling menu at the top of the right panel, then select a preset. [4]
    • 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."
  6. 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.
  7. 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 .
    8. Advertisement
Section 3 of 4:

CPU Throttling

PDF download Download Article
  1. 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 .
  2. 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.
  3. 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.
  4. It's at the top of the right panel.
  5. 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.
  6. 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]
  7. 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."
  8. 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.
  9. 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.
    10. Advertisement
Section 4 of 4:

Why throttle your browser?

PDF download Download Article
  1. It's important that you know how your website performs in real-world conditions. More than half of internet users access the web on mobile devices, which means you should always test your site on a variety of screen sizes, network speeds, and CPUs. [6] Though some smartphone owners have speedy 5G or Wi-Fi connections, plenty use slower 3G cellular networks, which can frustrate your visitors. Browser throttling will give you an idea of how quickly your website displays on these slower connections and devices so you can make changes for visitor satisfaction.
  2. Google uses the mobile contents of a website for indexing and ranking, so the mobile version of your website should load quickly on all devices. [7] Optimizing your website for Android and iPhones using cellular connections should be a crucial part of your SEO strategy . [8] Before your site goes live, use network and CPU throttling in your browser to see which elements on your website take a long time to load in different conditions. Then, you can adjust the mobile version (or tweak the responsive design ) of your website as needed.
    3. Advertisement

Expert Q&A

Search
Add New Question
  • Question
    Can I do this test locally without an internet connection?
    Théo Dufort
    Software Engineer and Full-Stack Web Developer
    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.
    Théo Dufort
    Software Engineer and Full-Stack Web Developer
    Expert Answer
    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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 0
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]
        Thanks
        Helpful 0 Not Helpful 0
      • The throttling feature of DevTools is also available in Microsoft Edge and Opera, as both browsers are built on the Chromium browser.
        Thanks
        Helpful 0 Not Helpful 0
      • Safari's developer tools do not currently have a built-in throttling tool.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Install Google Chrome Using Terminal on Linux
      3 Easy Ways to Install the Google Chrome Web Browser
      Automatically Reload a Page in Chrome: Easy Extension & Script
      Turn Off and Disable Private Browsing on Any Web Browser
      3 Simple Ways to Save a Web Page as a PDF in Google Chrome
      Why Your Pinned Tabs Disappear & How to Fix It
      How to
      Add Google Drive to File Explorer in Windows
      How to
      Turn Any Website Into an App Shortcut With Chrome
      Easy Ways to View & Manage Bookmarks in Google Chrome
      How to
      Transfer Bookmarks from One Computer to Another
      How to
      Remove Suggestions on Google Chrome: 2 Easy Ways
      How to
      Override the Ctrl+Shift+QQ Shortcut in Google Chrome
      2 Fast Ways to Remove Bing from Chrome: PC, Mac, & Mobile
      4 Simple Ways to Block Adult Websites on Google Chrome
      Advertisement

      Expert Interview

      Thanks for reading our article! If you’d like to learn more about internet browsers, check out our in-depth interview with Théo Dufort .

      References

      1. ↑ https://developer.chrome.com/docs/devtools/open/
      2. ↑ https://developer.chrome.com/docs/devtools/device-mode/#type
      3. ↑ https://developer.chrome.com/docs/devtools/open/
      4. ↑ https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/reference#emulate-slow-network-connections-from-the-network-conditions-drawer
      5. ↑ https://developer.chrome.com/docs/devtools/performance/reference/
      6. ↑ https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/
      7. ↑ https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search
      8. ↑ https://developers.google.com/search/blog/2016/11/mobile-first-indexing
      9. ↑ 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 17,455 times.

      Is this article up to date?

      Advertisement