Web Development
How To Create an Internet Speed Test Website đģ⚡
Build your own functional speed test tool using HTML, CSS, and JavaScript. Measure download/upload speeds in real time, host it for free, and monetize with Adsterra or Google AdSense.
Table of Contents
Introduction
What You'll Build & Tools Used
Our speed test tool will measure download speed by fetching a known file from a fast CDN and calculating the time it takes. It will also estimate upload speed by sending dummy data to a server. We'll display results in Mbps (megabits per second) with a sleek, animated user interface.
You only need a basic text editor (Notepad, VS Code) and a browser. The project uses pure HTML, CSS, and JavaScript – no frameworks. For hosting, we'll use free static hosting like GitHub Pages or Netlify.
How it works
• Download test: Downloads a ~10 MB file from Cloudflare's speed test servers multiple times.
• Upload test: Sends random data to a server that accepts POST requests (e.g., httpbin.org).
• Speed is calculated as (file size in bits) / (time in seconds).
• Download test: Downloads a ~10 MB file from Cloudflare's speed test servers multiple times.
• Upload test: Sends random data to a server that accepts POST requests (e.g., httpbin.org).
• Speed is calculated as (file size in bits) / (time in seconds).
Step 1
Create the HTML Layout
The HTML consists of a start button, a speedometer display area for download and upload results, and a status message. Copy the code below into index.html.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Speed Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>⚡ Internet Speed Test</h1>
<div class="speed-panel">
<div class="meter">
<div class="speed-value" id="downloadSpeed">--</div>
<div class="label">Download Mbps</div>
</div>
<div class="meter">
<div class="speed-value" id="uploadSpeed">--</div>
<div class="label">Upload Mbps</div>
</div>
</div>
<button id="startBtn">Start Test</button>
<p id="status"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2
Add Professional Styling
Create a file named style.css with the following CSS. It gives a modern, centered layout with gradient backgrounds and smooth animations.
style.css
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 40px;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
text-align: center;
max-width: 450px;
width: 90%;
}
h1 { color: #1f2937; margin-bottom: 30px; }
.speed-panel {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 30px;
}
.meter {
text-align: center;
}
.speed-value {
font-size: 2.8rem;
font-weight: 800;
color: #2563EB;
margin-bottom: 5px;
}
.label {
font-size: 0.9rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
}
button {
padding: 14px 40px;
background: #2563EB;
color: white;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
button:hover { background: #1D4ED8; }
button:active { transform: scale(0.97); }
#status {
margin-top: 15px;
color: #374151;
font-weight: 500;
}
Step 3
Implement the Speed Test Engine
The JavaScript fetches a test file from Cloudflare (or any CDN) and measures the time. For upload, it uses httpbin.org/post which echoes back data. Create script.js with the code below.
script.js
const downloadUrl = "https://speed.cloudflare.com/__down?bytes=10000000"; // 10 MB
const uploadUrl = "https://httpbin.org/post";
const downloadEl = document.getElementById('downloadSpeed');
const uploadEl = document.getElementById('uploadSpeed');
const statusEl = document.getElementById('status');
const startBtn = document.getElementById('startBtn');
async function measureDownload() {
statusEl.textContent = "Testing download...";
const startTime = performance.now();
const response = await fetch(downloadUrl);
const blob = await response.blob();
const endTime = performance.now();
const duration = (endTime - startTime) / 1000; // seconds
const bitsLoaded = blob.size * 8;
const speedBps = bitsLoaded / duration;
const speedMbps = (speedBps / 1000000).toFixed(2);
downloadEl.textContent = speedMbps;
return speedMbps;
}
async function measureUpload() {
statusEl.textContent = "Testing upload...";
const data = new ArrayBuffer(5000000); // 5 MB of random data
const startTime = performance.now();
await fetch(uploadUrl, { method: 'POST', body: data });
const endTime = performance.now();
const duration = (endTime - startTime) / 1000;
const bitsUploaded = data.byteLength * 8;
const speedBps = bitsUploaded / duration;
const speedMbps = (speedBps / 1000000).toFixed(2);
uploadEl.textContent = speedMbps;
return speedMbps;
}
startBtn.addEventListener('click', async () => {
startBtn.disabled = true;
downloadEl.textContent = "--";
uploadEl.textContent = "--";
try {
await measureDownload();
await measureUpload();
statusEl.textContent = "Test completed!";
} catch (error) {
statusEl.textContent = "Error: Could not complete test.";
}
startBtn.disabled = false;
});
Now open index.html in your browser, click the button, and you'll see real‑time speed measurements.
Pro Tip
For more accurate results, run the test multiple times and take the average. You can also increase the file size for download to get a better measurement.
Step 4
Complete Single‑File Version
You can combine everything into one HTML file. This is the easiest way to get started – just copy and save as speedtest.html.
speedtest.html (All-in-One)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Speed Test</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.container { background: white; padding: 40px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); text-align: center; max-width: 450px; width: 90%; }
h1 { color: #1f2937; margin-bottom: 30px; }
.speed-panel { display: flex; justify-content: center; gap: 40px; margin-bottom: 30px; }
.meter { text-align: center; }
.speed-value { font-size: 2.8rem; font-weight: 800; color: #2563EB; margin-bottom: 5px; }
.label { font-size: 0.9rem; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; }
button { padding: 14px 40px; background: #2563EB; color: white; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
button:hover { background: #1D4ED8; }
button:active { transform: scale(0.97); }
#status { margin-top: 15px; color: #374151; font-weight: 500; }
</style>
</head>
<body>
<div class="container">
<h1>⚡ Internet Speed Test</h1>
<div class="speed-panel">
<div class="meter">
<div class="speed-value" id="downloadSpeed">--</div>
<div class="label">Download Mbps</div>
</div>
<div class="meter">
<div class="speed-value" id="uploadSpeed">--</div>
<div class="label">Upload Mbps</div>
</div>
</div>
<button id="startBtn">Start Test</button>
<p id="status"></p>
</div>
<script>
const downloadUrl = "https://speed.cloudflare.com/__down?bytes=10000000";
const uploadUrl = "https://httpbin.org/post";
const downloadEl = document.getElementById('downloadSpeed');
const uploadEl = document.getElementById('uploadSpeed');
const statusEl = document.getElementById('status');
const startBtn = document.getElementById('startBtn');
async function measureDownload() {
statusEl.textContent = "Testing download...";
const startTime = performance.now();
const response = await fetch(downloadUrl);
const blob = await response.blob();
const endTime = performance.now();
const duration = (endTime - startTime) / 1000;
const bitsLoaded = blob.size * 8;
const speedBps = bitsLoaded / duration;
const speedMbps = (speedBps / 1000000).toFixed(2);
downloadEl.textContent = speedMbps;
return speedMbps;
}
async function measureUpload() {
statusEl.textContent = "Testing upload...";
const data = new ArrayBuffer(5000000);
const startTime = performance.now();
await fetch(uploadUrl, { method: 'POST', body: data });
const endTime = performance.now();
const duration = (endTime - startTime) / 1000;
const bitsUploaded = data.byteLength * 8;
const speedBps = bitsUploaded / duration;
const speedMbps = (speedBps / 1000000).toFixed(2);
uploadEl.textContent = speedMbps;
return speedMbps;
}
startBtn.addEventListener('click', async () => {
startBtn.disabled = true;
downloadEl.textContent = "--";
uploadEl.textContent = "--";
try {
await measureDownload();
await measureUpload();
statusEl.textContent = "Test completed!";
} catch (error) {
statusEl.textContent = "Error: Could not complete test.";
}
startBtn.disabled = false;
});
</script>
</body>
</html>
Step 5
Deploy Your Speed Test Website for Free
You can make your speed test tool available to the world in minutes using these free hosting platforms:
- GitHub Pages: Push your code to a repository and enable Pages in the settings. Your site will be at
yourusername.github.io/speedtest. - Netlify Drop: Drag and drop your project folder onto netlify.com/drop and it's live instantly.
- Vercel: Similar to Netlify, connect your GitHub repo and deploy with one click.
All these services offer free SSL and custom domain support. Once deployed, share the URL with anyone.
Step 6
Earn Money with Adsterra & Google AdSense
Speed test websites get high traffic and are great for ad monetization. Add advertising to your page by inserting the ad code before the closing </body> tag.
For Google AdSense:
AdSense Ad Unit
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
For Adsterra:
Adsterra Banner
<script type="text/javascript">
var ad_id = "YOUR_ADSTERRA_ZONE_ID";
var ad_width = 728;
var ad_height = 90;
</script>
<script type="text/javascript" src="//www.adsterra.com/js/adsterra.js"></script>
Replace the placeholder IDs with your own ad units. Place the code strategically – a banner at the top or bottom works well without ruining the user experience.
Checklist
Speed Test Website Launch Checklist
- HTML/CSS/JS files created and tested locally
- Download and upload speeds display correctly
- Deployed to GitHub Pages or Netlify
- Mobile responsiveness checked
- Ad codes inserted (optional)
- Custom domain connected (optional)
Key Takeaways
Pure HTML/CSS/JS – no frameworks
Measures download from Cloudflare CDN
Upload test via httpbin.org
Host for free on GitHub Pages
Monetize with AdSense or Adsterra
Fully responsive and modern UI
⚡ Build Your Own Speed Test Tool Today
Copy the code, deploy it for free, and start earning with ads. It's a perfect project to learn front‑end development and create a useful web tool.
Join the tech debate...
We love a good discussion, but please keep it respectful and relevant to the topic. Vulgarity, personal attacks, and spam will be removed. Let’s keep the community smart, helpful, and welcoming to all tech fans!