dnspeed/index.html at main · FiorenMas/dnspeed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
          content="Experience the only web-based DNS Speed Test. Find the fastest DNS server for your location without any installations or downloads.">
    <meta name="keywords" content="DNS Speed Test, DNS Server, Fast DNS, Internet Speed, DNS Performance">
    <meta name="author" content="@SilviuStroe">
    <title>Fastest DNS Speed Test - Find Optimal DNS Server | No Install</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .spinner {
            display: inline-block;
            position: relative;
            width: 70px;
            height: 70px;
            vertical-align: middle;
        }

        .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #3498db;
            border-radius: 50%;
            animation: dot-blink 2s linear infinite;
        }

        .dot-1 {
            left: 30%;
            top: 50%;
            animation-delay: -1.6s;
        }

        .dot-2 {
            left: 50%;
            top: 30%;
            animation-delay: -0.8s;
        }

        .dot-3 {
            left: 70%;
            top: 50%;
            animation-delay: 0s;
        }

        @keyframes dot-blink {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "SoftwareApplication",
            "name": "DNS Speed Test",
            "description": "Discover the fastest DNS server for your specific location with our advanced DNS Speed Test tool. Enhance your browsing speed and internet reliability effortlessly.",
            "url": "https://dnsspeedtest.online/",
            "author": {
                "@type": "Person",
                "name": "@SilviuStroe"
            },
            "applicationCategory": "WebApplication",
            "operatingSystem": "All",
            "offers": {
                "@type": "Offer",
                "price": "0",
                "priceCurrency": "USD"
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js"></script>
</head>
<body class="pt-20 font-sans text-center p-5 bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
<div class="flex justify-center items-center">
    <div class="w-full md:w-2/3 mx-auto">
        <h1 id="cta" class="text-4xl text-blue-500 font-bold mb-2 text-center dark:text-blue-300">
            DNS Speed Test Benchmark - Find the Fastest DNS Server for Your Location
        </h1>
    </div>
</div>
<p class="text-lg mx-auto mb-5 leading-relaxed max-w-xl dark:text-gray-300">Optimize your internet experience by finding
    the fastest DNS server for your location. Just click the button below to start the test.</p>
<button id="checkButton"
        class="bg-green-500 text-white py-3 px-6 text-lg rounded-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-opacity-50 mb-5 dark:bg-green-600 dark:hover:bg-green-800">
    Check DNS Speed
</button>
<div class="absolute top-5 right-5">
    <div class="group relative inline-block">
        <button id="editButton"
                class="bg-white text-2xl text-white bg-transparent border-none rounded-full w-10 h-10 flex justify-center items-center shadow-lg">
            🛠️
        </button>
        <span class="pointer-events-none absolute top-full right-0 transform translate-y-2 w-max bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
            Edit hosts list
        </span>
    </div>
    <div class="group relative inline-block">
        <button id="editDoHButton"
                class="bg-white text-2xl text-white bg-transparent border-none rounded-full w-10 h-10 flex justify-center items-center shadow-lg">
            🛡️
        </button>
        <span class="pointer-events-none absolute top-full right-0 transform translate-y-2 w-max bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
            Add DoH servers
        </span>
    </div>
</div>
<div id="loadingMessage" class="hidden"></div>
<!-- Modal for editing DNS test hosts -->
<div id="websiteModal" class="hidden fixed z-50 inset-0 flex items-center justify-center bg-black bg-opacity-60">
    <div class="modal-content relative bg-white pt-4 pb-2 px-4 rounded-lg shadow-xl w-full sm:w-11/12 md:w-1/2 mx-auto my-2 sm:my-4 overflow-hidden dark:bg-gray-700 dark:text-white">
        <span class="close absolute top-2 right-2 text-3xl font-bold text-gray-500 hover:text-black cursor-pointer p-1 dark:text-gray-200 dark:hover:text-white">×</span>
        <h2 class="text-2xl sm:text-3xl mb-2 sm:mb-4 font-semibold dark:text-gray-200">Edit DNS Test Hosts</h2>
        <p class="mb-2 sm:mb-4 text-base sm:text-lg leading-relaxed dark:text-gray-300">
            Add or remove hostnames to tailor DNS server testing. Incorporate websites you frequently visit or popular
            services to refine the accuracy of your DNS speed test.
        </p>
        <!-- Scrollable List Container -->
        <div class="overflow-auto max-h-[50vh] sm:max-h-[60vh]"> <!-- Adjust max height as needed -->
            <ul id="websiteList" class="list-none p-0">
                <!-- Dynamic list items will be added here -->
            </ul>
        </div>
        <div class="flex mt-2 sm:mt-4 justify-center">
            <input type="text" id="newWebsite"
                   class="py-2 mr-2 px-4 w-3/4 border-2 border-gray-400 rounded focus:border-blue-500 focus:outline-none transition duration-200 ease-in-out placeholder-gray-600 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400"
                   placeholder="Add new hostname...">
            <button id="addHostname"
                    class="py-2 px-6 bg-green-500 text-white rounded hover:bg-green-600 text-lg dark:bg-green-700 dark:hover:bg-green-900">
                Add
            </button>
        </div>
    </div>
</div>
<div id="dnsResults" aria-live="polite" class="mt-5 overflow-x-auto">
    <table id="resultsTable" class="w-full border-collapse table-fixed">
        <thead>
        <tr>
            <th class="w-1/3 py-2 px-4 text-left border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
                DNS Server
            </th>
            <th onclick="sortTable(1)"
                class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
                Min (ms) &#x2195;
            </th>
            <th onclick="sortTable(2)"
                class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
                Median (ms) &#x2195;
            </th>
            <th onclick="sortTable(3)"
                class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
                Average (ms) &#x2195;
            </th>
            <th onclick="sortTable(4)"
                class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
                Max (ms) &#x2195;
            </th>
        </tr>
        </thead>
        <tbody class="text-gray-800 dark:text-gray-200">
        <!-- Table rows will be dynamically added here -->
        </tbody>
    </table>
</div>
<!-- Modal for adding new DoH servers -->
<div id="dohModal" class="hidden fixed z-50 inset-0 flex items-center justify-center bg-black bg-opacity-60">
    <div class="modal-content relative bg-white pt-4 pb-2 px-4 rounded-lg shadow-xl w-full sm:w-11/12 md:w-1/2 mx-auto my-2 sm:my-4 overflow-hidden dark:bg-gray-700 dark:text-white">
        <span class="close absolute top-2 right-2 text-3xl font-bold text-gray-500 hover:text-black cursor-pointer p-1 dark:text-gray-200 dark:hover:text-white">×</span>
        <h2 class="text-2xl sm:text-3xl mb-2 sm:mb-4 font-semibold dark:text-gray-200">Add Custom DoH Servers</h2>
        <p class="mb-2 sm:mb-4 text-base sm:text-lg leading-relaxed dark:text-gray-300">
            Enhance your DNS speed test by adding custom DNS-over-HTTPS (DoH) servers. Include popular DoH providers or
            your preferred services to expand the range of tested DNS servers.
        </p>
        <!-- Scrollable List Container -->
        <div class="overflow-auto max-h-[50vh] sm:max-h-[60vh]"> <!-- Adjust max height as needed -->
            <ul id="dohList" class="list-none p-0">
                <!-- Dynamic list items will be added here -->
            </ul>
        </div>
        <div class="flex mt-2 sm:mt-4 justify-center">
            <input type="url" id="newDoH"
                   class="py-2 mr-2 px-4 w-3/4 border-2 border-gray-400 rounded focus:border-blue-500 focus:outline-none transition duration-200 ease-in-out placeholder-gray-600 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400"
                   placeholder="Add new DoH server in the Name, URL format...">
            <button id="addDoH"
                    class="py-2 px-6 bg-green-500 text-white rounded hover:bg-green-600 text-lg dark:bg-green-700 dark:hover:bg-green-900">
                Add
            </button>
        </div>
    </div>
</div>
<div id="chartContainer" class="w-full md:w-4/5 mx-auto mt-5 px-2 md:px-0 hidden">
    <div class="chart-container" style="position: relative; height: 400px; width: 100%;">
        <canvas id="dnsChart"></canvas>
    </div>
    <div class="text-center mt-3">
        <p class="text-sm text-gray-600 dark:text-gray-400 hidden md:block">DNS Speed Comparison (Fastest → Slowest)</p>
    </div>
</div>
<div id="disclaimer"
     class="mt-10 px-5 py-4 bg-white border border-gray-300 rounded text-left max-w-7xl mx-auto leading-relaxed space-y-4 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
    <h2 class="text-2xl text-blue-500 mb-4 dark:text-blue-400">Disclaimer</h2>

    <p>
        This <strong>DNS Speed Test tool</strong> runs entirely in your browser, sending live DNS-over-HTTPS (DoH)
        queries from your local environment. No server-side code is involved, and no personal data is collected. By
        measuring directly from your current network, the tool aims to provide <strong>accurate, real-world
        results</strong>.
    </p>

    <p>
        <strong>Warm-Up Phase:</strong> Before timing each DNS server, the script primes connections and caches to
        minimize the overhead of TCP/TLS handshakes. This warm-up step helps ensure consistent, ready-to-go conditions
        when actual measurements begin. While it adds a small initial delay, it more fairly represents typical DoH
        performance once connections are established.
    </p>

    <p>
        <strong>Time Measurement & Browser Overhead:</strong> We use the browser’s <code>fetch</code> and
        <code>performance.now()</code> APIs to measure full DoH round-trip times. Because this includes HTTP/TLS
        overhead, results may be higher than raw DNS queries performed by other tools. Depending on server capabilities,
        our script may use <code>GET</code> or <code>POST</code>, CORS or <code>no-cors</code> mode. Some endpoints
        require a preflight request, which can slightly affect timings.
    </p>

    <p>
        <strong>Timeouts & Unavailable Results:</strong> Each query times out after 5 seconds. If a server does not
        respond in that window, it appears as <em>Unavailable</em>. This ensures the test continues promptly even when
        certain DNS endpoints are slow or unreachable.
    </p>

    <p>
        <strong>Influence of Local Conditions:</strong> Network latency, bandwidth, and browser load can cause
        variability. <strong>We recommend running multiple tests</strong> at different times or under different network
        conditions to get a broader picture. The tool’s output is best used as a <strong>relative comparison</strong>
        among DNS servers under your specific circumstances rather than an absolute global measure.
    </p>

    <p>
        While <strong>we strive for accuracy</strong> by testing each DNS server with the same set of hostnames (and
        reusing warm connections), results are still <strong>indicative</strong>. Use them as a guide when deciding
        which DNS server offers the best performance for your location and environment.
    </p>
</div>
<footer class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
    <div class="container mx-auto px-4 py-6">
        <!-- Support Section -->
        <div class="text-center mb-6">
            <p class="text-gray-600 dark:text-gray-400 mb-4">
                💚 Help keep this tool free and updated
            </p>

            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center">
                <a href="https://www.buymeacoffee.com/silviu"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="inline-flex items-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-black font-medium px-4 py-2 rounded-full transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg text-sm">
                    <span>☕</span>
                    <span>Buy me a coffee</span>
                </a>

                <span class="text-gray-400">or</span>

                <a href="https://brainic.io/contact-us/?utm_source=dnsspeedtest"
                   title="Professional software development services"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200 text-sm">
                    <span class="text-base">👨🏻‍💻</span>
                    <span>Hire me</span>
                </a>
            </div>
        </div>

        <!-- GitHub & Copyright -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex flex-col sm:flex-row justify-between items-center gap-3">
            <p class="text-xs text-gray-500 dark:text-gray-400">
                © 2024-2025 <span class="font-medium">DNSSpeedTest.online</span> • Made with ❤️ for the community
            </p>

            <div class="flex items-center gap-3">
                <span class="text-xs text-gray-500 dark:text-gray-400">⭐ Star on GitHub:</span>
                <a rel="noopener noreferrer"
                   class="github-button"
                   href="https://github.com/BrainicHQ/DoHSpeedTest"
                   data-show-count="true"
                   aria-label="Star BrainicHQ/DoHSpeedTest on GitHub">
                    Star
                </a>
            </div>
        </div>
    </div>
</footer>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="script.js"></script>
</body>
</html>