How I Built a PC Bottleneck Calculator and the Lessons Learned

David Clarke — Thu, 02 Oct 2025 05:36:36 +0000

When I started looking into PC building, one of the most confusing topics I ran into was bottlenecks. Everyone on forums had strong opinions, but there was never a clear or simple way to check if a CPU and GPU would work well together. Some said it depends on the game, others said it is all about benchmarks, and many simply said “it depends.”
That confusion gave me the idea to build a simple tool: a PC Bottleneck Calculator. It lets you pick a CPU and GPU from a list and tells you the bottleneck percentage. The lower the percentage, the better the balance.

What is a bottleneck

In simple words, a bottleneck happens when one component is holding back the performance of the other.
• If you use a very strong GPU with a weak CPU, the GPU will sit idle because the CPU cannot process instructions fast enough.
• If you use a powerful CPU with a low tier GPU, the CPU will be underutilized because the GPU cannot keep up.
The key point is that bottlenecks are not about “bad hardware.” They are about balance. Even good parts can bottleneck each other if they are mismatched.

How the calculator works

The goal of the calculator was to give users a quick way to see whether their build was balanced without having to read through dozens of benchmarks.
Here is the simple logic:

Each CPU and GPU is given a performance score.
The scores are compared.
The calculator shows the percentage of how much one part is limiting the other. Unlike some tools that show a “match score” where higher is better, my tool shows the bottleneck percentage, where lower is better. For example: • If the bottleneck is below 10 percent, the build is very balanced. • If it is 20-30 percent, you will notice some limitations. • If it is above 30 percent or more, one part is clearly holding back the other.

The core code

Here is a simplified version of the calculation logic:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>PC Bottleneck Calculator</title>
</head>
<body>
  <h2>Check CPU and GPU Bottleneck</h2>
  <select id="cpu">
    <option value="95">Intel Core i9-14900K</option>
    <option value="75">Ryzen 5 5600</option>
    <option value="60">Intel Core i5-10400F</option>
  </select>

  <select id="gpu">
    <option value="100">NVIDIA RTX 4090</option>
    <option value="85">NVIDIA RTX 4070</option>
    <option value="65">GTX 1660 Super</option>
  </select>

  <button onclick="calculate()">Calculate</button>
  <p id="result"></p>

  <script>
    function calculate() {
      const cpuScore = parseFloat(document.getElementById("cpu").value);
      const gpuScore = parseFloat(document.getElementById("gpu").value);

      const weaker = Math.min(cpuScore, gpuScore);
      const stronger = Math.max(cpuScore, gpuScore);

      const bottleneck = ((stronger - weaker) / stronger * 100).toFixed(1);

      document.getElementById("result").innerText = 
        `Estimated Bottleneck: ${bottleneck}% (lower is better)`;
    }
  </script>
</body>
</html>

Open this in a browser, pick a CPU and GPU, and you will see the bottleneck percentage right away (Its demo). The real version on my site uses a much larger dataset, but the core idea is the same.

Challenges I faced

• Data accuracy: Getting performance scores that reflect real world performance is tricky. Benchmarks differ from site to site, and results vary by workload. I had to normalize scores to keep comparisons consistent.
• Explaining results: A percentage alone is not helpful. I added explanations to tell users whether the bottleneck is minor, noticeable, or severe.
• Edge cases: Older CPUs or integrated graphics sometimes broke the logic. I had to add conditions so the tool does not give misleading results.
What I learned
• You do not need a huge framework or complex backend to make something useful. This project was built with plain HTML, CSS, and JavaScript.
• Clear communication matters more than complex math. The hardest part was explaining what the percentage really means to an everyday PC builder.
• Even a small tool can save time and help people. What started as a personal experiment turned into something useful for anyone planning a new PC build.
Try it out
If you are curious, you can try the full version here: https://pcbottleneckcalculator.io
It might save you some frustration before buying parts that do not work well together.

How I Built My First Web Tool as a Developer (and What I Learned Along the Way)

David Clarke — Tue, 23 Sep 2025 21:55:03 +0000

Like most beginner web developers, I spent a lot of time following tutorials and building “to-do apps” that never made it beyond my own computer. They were good practice, but I wanted to build something real that people could actually use.
That’s how I ended up creating a gamepad tester a small web tool that lets you check whether your game controller is working properly right in the browser.

The Idea

The inspiration came from frustration. I plugged in my Xbox controller one day, and it just wasn’t behaving right in a game. Was it the controller, the USB cable, or the game itself?
I thought: Wouldn’t it be great to have a quick online tool that tells me if all buttons and sticks are responding?
Turns out the browser already has a neat feature for this: the HTML5 Gamepad API. That was enough to spark the project.

Building the Tool

I didn’t overcomplicate it. Just HTML, CSS, and JavaScript.
Here’s a simplified version of the core script that detects and displays button presses and stick movement:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Gamepad Tester</title>
  <style>
    body { font-family: sans-serif; }
    .button {
      display: inline-block;
      width: 40px; height: 40px;
      margin: 5px; text-align: center; line-height: 40px;
      border: 1px solid #333; border-radius: 8px;
    }
    .pressed { background: #4caf50; color: white; }
  </style>
</head>
<body>
  <h2>Press any button on your controller to start</h2>
  <div id="buttons"></div>
  <script>
    let controllers = {};

    function connectHandler(e) {
      addGamepad(e.gamepad);
    }

    function addGamepad(gamepad) {
      controllers[gamepad.index] = gamepad;
      const buttonsDiv = document.getElementById("buttons");
      buttonsDiv.innerHTML = "";
      gamepad.buttons.forEach((btn, i) => {
        const b = document.createElement("div");
        b.className = "button";
        b.innerText = i;
        buttonsDiv.appendChild(b);
      });
      requestAnimationFrame(updateStatus);
    }

    function updateStatus() {
      scanGamepads();
      for (let j in controllers) {
        const controller = controllers[j];
        const buttons = document.getElementById("buttons").children;
        controller.buttons.forEach((btn, i) => {
          if (btn.pressed) {
            buttons[i].classList.add("pressed");
          } else {
            buttons[i].classList.remove("pressed");
          }
        });
      }
      requestAnimationFrame(updateStatus);
    }

    function scanGamepads() {
      const gamepads = navigator.getGamepads();
      for (let i = 0; i < gamepads.length; i++) {
        if (gamepads[i]) controllers[gamepads[i].index] = gamepads[i];
      }
    }

    window.addEventListener("gamepadconnected", connectHandler);
  </script>
</body>
</html>

Open this in your browser, plug in a controller, and you will see the buttons light up when pressed. It’s a very stripped-down version of what I later turned into gamepadtest.com but the principle is the same.

What I Learned

• Start small: You don’t need React, a backend, or a database to make something useful.
• APIs are fun: Browsers can do more than you think. The Gamepad API was surprisingly powerful once I understood it.
• Feedback is gold: Friends tested it and pointed out things I never thought of, like displaying joystick axes.
• Shipping feels amazing: Even though it was a small project, publishing it online felt better than any tutorial app I had ever built.

Building my first web tool taught me that it’s not about making something huge or perfect. It’s about making something useful, no matter how small.
If you want to try out the full version I built, check out https://gamepadtester.co. It might save you some frustration the next time your controller acts up.

DEV Community: David Clarke