If you have ever planned a gaming PC build, you have probably come across the term bottleneck. It is one of those words you see in every forum thread, often followed by confusing advice like “your CPU will bottleneck your GPU” or “just upgrade your graphics card.”
When I was learning about PC hardware, I wanted a simple way to know whether two parts would actually work well together. That curiosity led me to build a small project: a PC Bottleneck Calculator.
This tool shows you the bottleneck percentage between a CPU and GPU. The lower the percentage, the better the balance.
Why bottlenecks matter
A bottleneck happens when one part of your system is slowing down the rest.
• A very strong GPU paired with a weak CPU means the GPU is waiting around for instructions.
• A powerful CPU with a weak GPU means the CPU is barely being used while the GPU struggles to keep up.
Neither setup is “wrong,” but both waste performance you already paid for. A balanced build is usually the best value.
How I designed the calculator
I kept the concept very simple:
- Every CPU and GPU gets a performance score.
- The weaker and stronger score are compared.
- The tool shows a bottleneck percentage. Unlike some sites that show a “compatibility score,” this calculator flips it around. Lower percentages mean less bottlenecking and better balance. Examples:
• 5 percent means a great match
• 20 to 30 percent means you may notice limits in some games
• 40 percent or more means one part is clearly holding the other back
The code behind it
Here’s a stripped down version of how the logic works with plain HTML and JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PC Bottleneck Calculator</title>
</head>
<body>
<h2>PC Bottleneck Calculator</h2>
<label>CPU:
<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>
</label>
<label>GPU:
<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>
</label>
<button onclick="calculate()">Check Bottleneck</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>
If you run this in a browser, you can select a CPU and GPU and instantly see the bottleneck percentage (Its a demo). The real tool uses a larger database of hardware, but this is the core idea.
Lessons I learned
• Start simple: A calculator does not need a complex framework to be useful. HTML, CSS, and JS were enough.
• Numbers need context: Just showing a percentage is confusing. Adding explanations for what “low,” “medium,” or “high” bottleneck means made the tool more helpful.
• Accuracy is hard: Hardware scores change depending on which benchmarks you use. Normalizing the data took more effort than the code itself.
• Small tools can help: What started as a learning project turned into something useful for other PC builders.
Try the full version
If you want to try the complete version with many CPUs and GPUs, you can check it out here: https://pcbottleneckcalculator.io
It might help you avoid wasting money on mismatched parts and make your next build more balanced.
Top comments (0)