When testing websites, simulating real-world network conditions is essential to understand how your site will perform for users on slower or unstable internet connections.
Safari’s Developer Tools offer a built-in feature called network throttling, which allows to simulate different connection speeds like 3G, 4G, or even custom bandwidth settings.
This feature is crucial for developers and testers who need to ensure their websites load quickly and function smoothly, regardless of network conditions.
This guide explains how to perform network throttling in Safari, helping to identify performance issues and optimize website performance across various network environments.
What is Network Throttling and its Benefits?
Network throttling refers to intentionally limiting the bandwidth or speed of a network connection to simulate slower or unstable internet conditions. This technique allows developers and testers to evaluate how their websites or applications perform under different network speeds, including 3G, 4G, and custom bandwidth settings.
By throttling the network, it becomes possible to test the responsiveness, load times, and overall user experience of a site or app in real-world conditions.
Benefits of Network Throttling
- Realistic Testing Conditions: Network throttling enables developers to replicate how users with varying internet speeds experience a website or application.
- Identifying Performance Bottlenecks: By simulating slower connections, network throttling helps pinpoint areas where performance issues might arise, such as long load times, delayed interactions, or incomplete page rendering.
- Optimizing User Experience: Testing under throttled conditions ensures that websites and apps remain functional and provide a smooth experience for all users, regardless of their internet connection.
- Preventing Negative User Impact: By testing with throttled network speeds, developers can anticipate potential issues that users on slower connections might face, enabling them to make proactive changes that prevent frustration or abandonment due to slow loading times.
BrowserStack allows developers to simulate different network conditions using network throttling. It allows to replicate real-world scenarios like 4G, 3G, or define custom profiles with specific download and upload speeds, latency, and packet loss.
It helps identify performance bottlenecks and ensures a consistent user experience, even in low-bandwidth or unstable network environments.
How to Perform Network Throttling in Safari
Throttling allows simulating slow networks to identify performance issues and optimize load times. Here are three main methods for throttling the network in Safari:
Method 1: Using Network Link Conditioner in iOS Device
Here’s the step-by-step process to perform network throttling in Safari for testing purposes:
Step 1 – Open Mac App Store and install “XCode”
- First, open the Mac App Store on your Mac.
- Search for “XCode” and install it on your Mac.
Step 2 – Connect your iPhone to your Mac
- Use a USB cable to connect your iPhone to your Mac.
- Click (confirm/yes) for any requests on your Mac or iPhone.
Step 3 – Open XCode
Once the XCode is installed successfully, launch the application.
Step 4 – Go to Developer Settings
- Now, go to your iPhone setting. You’ll find a new option, “Developer” in your iPhone’s settings.
If you cannot see this option, try to rerun the XCode in Mac and reconnect your iPhone with Mac to search for the option in your iPhone setting.
Step 5 – Turn on “Network Link Conditioner” on iPhone
- Then, click on the “Developer” option and scroll down below.
- You’ll see an option “Network Link Conditioner,” which you will have to turn on.
- Now you’ve different bandwidth options to throttle your internet connection on Safari.
Note: Don’t forget to turn off the “Network Link Conditioner” after the testing is done.
Method 2: Using Network Link Conditioner in MacOS
According to Apple’s official website, network simulation can be done for testing by “Network Link Conditioner.”
Here’s the step-by-step process to install and use Network Link Conditioner in Mac:
Step 1 – Download the “XCode” Package on your Mac
To download and install XCode on your Mac, you’ve two options:
- First, you can download XCode via Mac App Store (latest version)
- Or, you can go to Apple’s Developer Site to download any specific version of the XCode Package.
Step 2 – Install “Additional Tools for XCode”
- Once you’ve installed XCode as per your suitability, go to XCode on your Mac, click “Open Developer Tool,” and select “More Developer Tool.”
- Now, search for “Additional Tools for XCode.” (You need to download the version as per your XCode version)
Step 3 – Use “Network Link Conditioner”
- Once you’ve downloaded the “Additional Tools for XCode, open the DMG file and go to the Hardware directory.
- You’ll see an icon of “Network Link Conditioner.prefPane” that you need to install by double-clicking.
Step 4 – Use Safari Throttle Network (MacOS)
Now, you’ve different bandwidth options:
- 100% Loss
- 2G
- 3G
- DSL
- Edge
- 4G
Developers can conduct Safari throttle network by using Network Link Conditioner on Mac.
Method 3: Network Throttling on BrowserStack (Real iOS Device)
The most accurate way for developers to use network throttling and test performance in different bandwidths in mobile browsers is through BrowserStack. Similar to how developers would conduct network throttling in Chrome seamlessly, you can follow a similar approach while throttling network speeds on iOS Safari.
BrowserStack Real Device Cloud is the industry-leading infrastructure for developers to test network performance on different bandwidths to achieve maximum efficiency by identifying and eliminating connectivity bottlenecks.
Step 1. Sign Up for free for BrowserStack Live. Once you Sign up /Login, you can access the Live Dashboard.
Step 2. Select an iOS Device to start running web apps on Safari by simulating Network.
Step 3. Select Throttle Network Option and test on different Internet speeds.
Step 4. You can select from different options to Simulate Internet Connection such as 2G, Edge, 3G, 4G, 4G – high latency, Custom value options
With BrowserStack, developers can efficiently conduct network throttling because of its user-friendly interface, fast response, and Safari throttle network options to test performance under real user conditions.
You can also enable network tracking that uses proxy to monitor HTTP(S) request and response in realtime.
Conclusion
An accurate way of validating how web pages load in poor network connections is to test them on real browsers installed on real devices. BrowserStack’s real device cloud enables developers and QAs to test their websites in real user conditions, including different internet bandwidths.
Testers and teams can access:
- Multiple browser versions of Chrome, Safari, Opera, Edge etc.
- DevTools for Chrome and Safari for accurate web elements inspection
- Latest and legacy versions of real Android smartphones from vendors like Google Pixel, Samsung, OnePlus, Motorola, etc.
- Latest and legacy versions of real Apple devices like iPhone 14, iPhone 13, iPhone 12 Mini, iPhone 11, iPad, iPhone 6, etc.