Search⌘ K
AI Features
Home
Courses
Performance Test Automation 101: Gatling, Lighthouse, & Jenkins

Simulating Network Throttling - Desktop Web and Mobile Web

Explore how to simulate various network conditions on desktop and mobile web using Puppeteer automation. Understand how to measure page load times under different throttling presets and emulate devices like iPhone X to optimize web performance across network speeds.

We'll cover the following...

In the previous lesson we discussed network throttling and its importance. Now let’s learn to simulate it via automation.

Example 1 - simulate network throttling for educative.io on desktop web

In this example, we will simulate the educative.io website launch under different network conditions.

Let’s look at the below code and explanation.

Javascript (babel-node)
const puppeteer = require('puppeteer');
let networkPresets = {
  'Good2G': {
    'offline': false,
    'downloadThroughput': 450 * 1024 / 8,
    'uploadThroughput': 150 * 1024 / 8,
    'latency': 150
  },
  'Regular3G': {
    'offline': false,
    'downloadThroughput': 750 * 1024 / 8,
    'uploadThroughput': 250 * 1024 / 8,
    'latency': 100
  },
  'Good3G': {
    'offline': false,
    'downloadThroughput': 1.5 * 1024 * 1024 / 8,
    'uploadThroughput': 750 * 1024 / 8,
    'latency': 40
  },
  'Regular4G': {
    'offline': false,
    'downloadThroughput': 4 * 1024 * 1024 / 8,
    'uploadThroughput': 3 * 1024 * 1024 / 8,
    'latency': 20
  },
  'WiFi': {
    'offline': false,
    'downloadThroughput': 30 * 1024 * 1024 / 8,
    'uploadThroughput': 15 * 1024 * 1024 / 8,
    'latency': 2
  }
};
(async () => {
  let keys = Object.keys(networkPresets);
  for (let key of keys) {
    let throttleConf = networkPresets[key];
    puppeteer.launch({ headless: false, args: ['--no-sandbox', '--headless', '--window-size=1920,1200'] }).then(async browser => {
      const page = await browser.newPage();
      let url = "https://www.educative.io/";
      const client = await page.target().createCDPSession();
      await client.send('Network.emulateNetworkConditions', throttleConf);
      let start = Date.now();
      await page.goto(url);
      let timeTaken = Date.now() - start;
      console.log(`time taken to load url ${url} with network throttle conf '${key}': '${JSON.stringify(throttleConf)}'=> ${timeTaken} ms`);
      await browser.close();
    });
  }
})();

Code output

Here, in the output, we can see the throughput, latency, and overall page load time for different network presets.

time taken to load url https://www.educative.io/ with network throttle conf 'Regular4G': '{"offline":false,"downloadThroughput":524288,"uploadThroughput":393216,"latency":20}'=> 5532 ms

time taken to load url https://www.educative.io/ with network throttle conf 'WiFi': '{"offline":false,"downloadThroughput":3932160,"uploadThroughput":1966080,"latency":2}'=> 6289 ms

time taken to load url https://www.educative.io/ with network throttle conf 'Good3G': '{"offline":false,"downloadThroughput":196608,"uploadThroughput":96000,"latency":40}'=> 7267 ms

time taken to load url https://www.educative.io/ with network throttle conf 'Regular3G': '{"offline":false,"downloadThroughput"
...