Come distribuire il tuo speed test con JavaScript puro senza servizi esterni

Ti è mai capitato che il tuo abbonamento dichiari internet gigabit, i file si scarichino velocemente, ma le chiamate di lavoro o l'accesso al tuo server di casa siano dolorosamente lenti? La tua prima reazione è aprire un noto sito di speed test e premere il grande pulsante rotondo. Il problema è che i test pubblici mostrano la velocità verso i server del provider, non la velocità effettiva all'interno della tua rete locale, dell'ambiente office o del cloud personale.

Ho scoperto il repository Speed-Test del progetto OpenSpeedTest. L'autore lo sviluppa da oltre dieci anni, dal 2011. È uno strumento open-source per testare la larghezza di banda della rete, scritto interamente in HTML5 puro, CSS e JavaScript vanilla. Nessun React, Vue, bundle pesanti o dipendenze esterne.

Cosa c'è sotto il cofano

Il punto di forza principale del codice sorgente è la sua eleganza. Tutta la logica lato client è compressa in uno script gzippato di meno di 8 KB. L'interfaccia è interamente renderizzata in SVG vettoriale, quindi appare nitida sia su un monitor vecchio che su un display smartphone 4K.

Per il funzionamento dello strumento, il lato client richiede solo un browser che supporti XMLHttpRequest (XHR2). Funziona persino con l'antico Internet Explorer 10. Sul lato server, è sufficiente servire file statici tramite qualsiasi web server: Nginx, Apache, Caddy o Express.

Non ci sono script backend nascosti o binari complessi, quindi la superficie di attacco è minima. In sostanza, stai servendo al browser un set di file statici, dopodiché il client inizia a inviare una serie di richieste POST e GET parallele di una dimensione specificata.

Gestire i test tramite parametri URL

Invece di creare menu di impostazioni complessi, l'autore ha implementato il controllo tramite parametri GET nella barra degli indirizzi. È comodo se vuoi fornire ai colleghi un link già pronto con un comportamento preconfigurato.

Ecco alcuni parametri utili:

• Avvio automatico del test non appena la pagina si apre:

http://192.168.1.5?Run

• Stress test della rete. Puoi impostare un preset o specificare la durata del test in secondi. Ad esempio, eseguire il traffico per 300 secondi in entrambe le direzioni:

http://192.168.1.5?Stress=300

Oppure una sintassi più breve:

http://192.168.1.5?S=L

• Limita il numero di flussi HTTP paralleli (predefinito è 6, massimo è 32):

http://192.168.1.5?XHR=4

• Esegui una fase specifica, ad esempio solo upload o controllo della latenza:

http://192.168.1.5?Test=Upload

Se vuoi raccogliere statistiche da un parco macchine office, nel file index.html puoi decommentare le variabili saveData e specificare l'indirizzo webhook del tuo database:

var saveData = true;
var saveDataURL = "//metrics.internal.lan/save?data=";

Come eseguirlo da solo

Il modo più rapido per distribuire il tuo speed test è un'immagine Docker già pronta. È basata su Alpine leggera con un utente Nginx non-root:

docker run -d \
  --name openspeedtest \
  --restart=unless-stopped \
  -p 3000:3000 \
  -p 3001:3001 \
  openspeedtest/latest

Se preferisci lavorare con compose, la configurazione è compatta:

version: '3.3'
services:
  speedtest:
    container_name: openspeedtest
    image: openspeedtest/latest
    restart: unless-stopped
    ports:
      - '3000:3000'
      - '3001:3001'

Dopo l'avvio, l'interfaccia sarà disponibile su http://IP_СЕРВЕРА:3000.

Se stai installando il servizio dietro il tuo reverse proxy, assicurati di aumentare il limite della dimensione del corpo della richiesta client_max_body_size ad almeno 35 MB. Altrimenti, i test di upload inizieranno a fallire con un errore 413.

A proposito, se prevedi di testare velocità superiori a 1 Gbps, l'autore consiglia di usare un host Linux. Su Docker Desktop per macOS o Windows, la velocità spesso raggiunge il tetto a causa della virtualizzazione e del sovraccarico del bridge di rete.

Perché tenere uno speed test locale

Ci sono diversi scenari in cui i servizi web regolari sono inutili:

1. Diagnosticare Wi-Fi e ripetitori. Quando installi un ripetitore di segnale a casa o in ufficio, la velocità in media si dimezza. Testare il collegamento localmente da diverse stanze ti permette di scegliere con precisione il punto migliore per un punto di accesso senza essere influenzato dalle fluttuazioni della tua connessione internet esterna.
2. Verificare l'impatto delle estensioni del browser. A volte strumenti come iperf mostrano un onesto gigabit, ma le pagine web si aprono lentamente. Esegui OpenSpeedTest nel tuo profilo normale, poi in una finestra privata. La differenza nei risultati mostrerà quanti millisecondi stanno mangiando i plugin installati.
3. Valutare i canali verso un ufficio remoto. Quando i lavoratori remoti si lamentano dell'accesso lento all'archivio file, un container locale sul server mostrerà la velocità reale del tunnel.

Vale la pena provare

Speed-Test risolve un problema specifico senza pubblicità, telemetria di terze parti o dipendenze superflue. Se hai regolarmente bisogno di configurare reti locali, trovare patch cable difettosi o controllare le prestazioni di un NAS di casa, tieni questa immagine a portata di mano. Si distribuisce in un minuto, consuma risorse minime e porta un valore enorme.