Contatore FPS
Usa questo contatore FPS per misurare quanto è fluida la resa della pagina corrente nel tuo browser. Campiona i fotogrammi con requestAnimationFrame, mostra FPS attuali, medi, minimi e massimi e può tracciare un breve grafico per individuare i cali causati da schede pesanti, animazioni, estensioni, throttling o impostazioni dello schermo.
Come misurare gli FPS del browser
-
1
Scegli la durata del campionamento
Cinque secondi sono un buon valore predefinito. Usa un campione più lungo per intercettare micro scatti periodici o variazioni di carico in background.
-
2
Imposta lo smoothing e la soglia di avviso
La finestra di smoothing calcola la media dei fotogrammi recenti, mentre la soglia indica il livello di FPS che consideri accettabile sul dispositivo in prova.
-
3
Avvia il contatore e leggi la dispersione
Gli FPS attuali mostrano la velocità di rendering recente. I valori medio, minimo e massimo rivelano se la sessione è stata costantemente fluida o se ci sono stati cali visibili.
Che cosa misura il contatore FPS
Questo strumento misura la cadenza di rendering del browser, non le prestazioni della scheda grafica in un benchmark. Ogni volta che il browser è pronto a disegnare un nuovo fotogramma, requestAnimationFrame richiama il campionatore. L’intervallo fra due callback dà un frame rate istantaneo:
FPS = 1000 / frame_time_in_ms
Gli FPS attuali mostrati sono una media mobile calcolata sulla finestra di smoothing. Una finestra di 60 fotogrammi funziona bene sui normali schermi a 60 Hz perché smorza i picchi isolati senza nascondere i cali prolungati. Le finestre più piccole reagiscono prima, quelle più ampie appaiono più stabili.
Esempio pratico
Supponiamo che un campione di cinque secondi registri questi intervalli fra fotogrammi, semplificati:
| Intervallo fra fotogrammi | FPS istantanei | Che cosa indica |
|---|---|---|
| 16,7 ms | 59,9 FPS | Rendering tipico a 60 Hz |
| 8,3 ms | 120,5 FPS | Rendering tipico a 120 Hz |
| 25,0 ms | 40,0 FPS | Rallentamento visibile su molti schermi |
| 33,3 ms | 30,0 FPS | Carico elevato o throttling |
Se la soglia di avviso è 50 FPS e la media mobile misurata si ferma a 47 FPS, il risultato è sotto l’obiettivo anche se qualche fotogramma è stato più rapido. Se invece si assesta vicino a 60 FPS con cali occasionali a 45 FPS, la media è buona, ma il minimo segnala scatti che vale la pena indagare.
Come leggere i risultati
| Andamento del risultato | Significato probabile | Verifica successiva |
|---|---|---|
| Media vicina alla frequenza di aggiornamento, cali rari | Il rendering è sano | Confronta con un altro browser solo se serve |
| Media buona, minimo molto più basso | Micro scatti periodici | Chiudi le schede pesanti o controlla le animazioni |
| Media sotto la soglia | Carico di rendering costante | Controlla CPU, estensioni e script della pagina |
| FPS limitati intorno a 30 | Risparmio energetico o throttling | Controlla la modalità batteria e le impostazioni dello schermo |
Gli FPS del browser dipendono dalla frequenza di aggiornamento dello schermo, dal compositor del sistema operativo, dalla modalità batteria, dal throttling termico, dalle schede aperte e dalla pagina stessa. Esegui il test prima in una scheda tranquilla, poi ripetilo mentre la pagina o l’app che stai diagnosticando è attiva.
Domande frequenti
No. Questo contatore misura con quale frequenza il browser riceve le callback di requestAnimationFrame. È utile per verificare le animazioni web e la fluidità di una pagina, ma non è un benchmark GPU completo per i giochi nativi.
La maggior parte dei browser allinea i fotogrammi di animazione alla frequenza di aggiornamento dello schermo. Un monitor a 60 Hz riporta di solito circa 60 FPS, mentre gli schermi a 120 Hz o 144 Hz possono riportare valori più alti quando browser e sistema operativo lo consentono.
Usa 50 FPS per un normale controllo di fluidità a 60 Hz. Sui monitor ad alta frequenza imposta la soglia più vicina all’esperienza che ti aspetti, per esempio 90 FPS o 120 FPS.
No. La misurazione avviene nel tuo browser tramite le API di temporizzazione locali. Lo strumento non invia dati sui fotogrammi, screenshot o dettagli del dispositivo a un’API esterna.
Strumenti correlati
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Generatore di palette colori casuali
Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.
Generatore di colori casuali
Genera da 1 a 50 colori HEX casuali con campioni da visualizzare, copiare e usare in CSS, test o studio di palette.
Formattatore JSON
Incolla JSON per visualizzarlo con indentazione a 2 o 4 spazi, minificarlo in forma compatta o controllarne rapidamente la sintassi prima di copiare il risultato.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.
Selettore colore HEX
Scegli un colore a colpo d’occhio e ottieni i valori HEX, RGB, HSL, HSV e CMYK, con il contrasto su bianco e nero.