Müasir veb tətbiqləri çox zaman böyük framework-lər, yüzlərlə MB-lıq node_modules qovluğu və izləmə skriptləri ilə gəlir. Amma bəzən ən sadə həll ən effektiv olur. Alman tərtibatçı Nevik Schmidt, heç bir npm paketi, React, Vue və ya digər alətlər olmadan, tamamilə Vanilla JS ilə işləyən bir sürət testi qurub. Nəticə? Tək bir HTML faylı, cəmi 50 KB, və tam şəffaf ölçmə mexanizmi.
Niyə öz sürət testini yazmalısan?
Bazarda Speedtest.net, FAST.com kimi onlarla hazır həll var. Bəs niyə təkrarlamaq? Nevik üç əsas səbəb göstərir: şəffaflıq – ölçülən məlumatın nə olduğunu dəqiq bilmək; ölçü – kommersiya testləri MB-larla izləmə skripti yükləyir, onunki isə minimaldır; nəzarət – istifadəçinin öz tarifi ilə müqayisə edib dəqiq tövsiyə verə bilmək.
Üç əsas ölçü: Ping, Download, Upload
Yaxşı bir sürət testi üç parametri ölçməlidir: ping (latentlik), yükləmə sürəti (download) və göndərmə sürəti (upload). Nevik bu üç ölçmə üçün Cloudflare'ın ictimai API-sindən istifadə edir. Cloudflare dünyanın ən böyük edge şəbəkələrindən biridir və onun speed.cloudflare.com/__down və __up endpoint-ləri CORS icazəsi ilə birbaşa brauzerdən çağırıla bilir. Heç bir API açarı, limit və ya xərc yoxdur.
Ping ölçməsi üçün 1 KB-lıq fayl beş dəfə yüklənir, ən yüksək dəyər atılır, qalanların ortalaması götürülür. Bu, HTTP RTT-dir (Round-Trip Time) – əsl ICMP ping deyil, amma istifadəçi təcrübəsi üçün daha vacibdir, çünki əksər əməliyyatlar HTTP üzərindən gedir.
Download testi ümumilikdə 25 MB məlumatı üç hissədə (5 MB, 10 MB, 10 MB) yükləyir. Burada maraqlı məqam odur ki, fetch əvəzinə ReadableStream API-si (response.body.getReader()) istifadə olunur. Hər bir gələn data chunk'ı anında sayılır və canlı sürət göstəricisi yenilənir. Üç hissəli yükləmə TCP slow-start effektini aradan qaldırır – ikinci və üçüncü hissədə əlaqə artıq “isti” olur.
Upload testi isə bir az çətinlik yaradır, çünki fetch API-də upload progress event'i yoxdur. Nevik burada XMLHttpRequest'ə qayıdır və upload.onprogress ilə canlı məlumat ötürür. 8 MB-lıq yükün kompressiyaya uğramaması üçün hər 4 KB-da bir təsadüfi bayt əlavə edilir – bu, provayderin və ya proxy'nin məlumatı sıxışdırıb sürəti saxtalaşdırmasının qarşısını alır.
Vizual effekt: SVG tachometr
Sadə bir progress bar əvəzinə, Nevik SVG ilə çəkilmiş analoq tachometr düzəldib. stroke-dasharray və stroke-dashoffset xüsusiyyətləri ilə yarımdairəvi miqyas yaradılır, requestAnimationFrame ilə isə hamar animasiya təmin edilir. Sürət dəyəri dəyişəndə iynə “easeOutCubic” funksiyası ilə yumşaq şəkildə hədəfə çatır – sanki əsl avtomobil tachometri kimi.
Tarif müqayisəsi: “Nə alırsan, nə almalısan?”
Alətin ən güclü tərəfi sadəcə rəqəm göstərmək deyil, həm də istifadəçinin öz tarifini daxil edib nəticəni müqayisə etməsidir. Məsələn, 100 Mbit/s-lik tarifdə yalnız 73 Mbit/s alırsınızsa, alət “Tarifinizin 73%-nə çatırsınız – LAN kabeli ilə bu daha yüksək olmalıdır” kimi konkret rəy verir. Almaniyada 2022-ci ildən qanunvericiliyə görə, müştərilər sifariş etdikləri sürəti ala bilmədikdə müqaviləni ləğv edə bilər.
Dərslər və tövsiyələr
- Vanilla JS kifayətdir: 95% hallarda framework lazım deyil. Onlar yalnız fayl ölçüsünü və hücum səthini artırır.
- performance.now() istifadə edin: Date.now() ilə müqayisədə daha dəqiq (mikrosaniyə dəqiqliyi) və monotondur (NTP yeniləmələrindən təsirlənmir).
- Streams API güclüdür: ReadableStream böyük veriləri canlı emal etmək üçün idealdır.
- XHR hələ də canlıdır: Upload progress üçün fetch alternativi hələ yoxdur.
- Cloudflare'a təşəkkür: Bu endpoint-lərin açıq və pulsuz olması veb tərtibatçıları üçün böyük hədiyyədir.
Layihənin tam kodu və canlı demo bu linkdə mövcuddur. İstəyən birbaşa brauzerdə “View Source” ilə mənbə koduna baxa bilər. Siz də öz sürət testinizi yazmısınız? Hansı API-lərdən istifadə etdiniz? Fikirlərinizi şərhlərdə gözləyirik.
