Compteur de FPS
Ce compteur de FPS mesure la fluidité avec laquelle votre navigateur affiche la page en cours. Il échantillonne les images via requestAnimationFrame, indique les FPS actuels, moyens, minimaux et maximaux, et peut tracer un petit graphique pour repérer les chutes dues aux onglets gourmands, aux animations, aux extensions, à la limitation des ressources ou aux réglages d’affichage.
Comment mesurer les FPS du navigateur
-
1
Choisissez la durée de mesure
Cinq secondes constituent une bonne valeur par défaut. Allongez la mesure pour capter des saccades périodiques ou des variations de charge en arrière-plan.
-
2
Réglez le lissage et le seuil d'alerte
La fenêtre de lissage moyenne les dernières images, tandis que le seuil marque le niveau de FPS que vous jugez acceptable sur l'appareil testé.
-
3
Lancez le compteur et lisez l'écart
Les FPS actuels reflètent la vitesse d'affichage récente. La moyenne, le minimum et le maximum indiquent si la session est restée fluide ou si des chutes visibles sont survenues.
Ce que mesure le compteur de FPS
Cet outil mesure la cadence d’affichage du navigateur, pas les performances de la carte graphique dans un benchmark. Chaque fois que le navigateur est prêt à peindre une nouvelle image, requestAnimationFrame appelle l’échantillonneur. Le temps écoulé entre deux rappels donne une fréquence d’images instantanée :
FPS = 1000 / frame_time_in_ms
Les FPS actuels affichés correspondent à une moyenne mobile calculée sur la fenêtre de lissage. Une fenêtre de 60 images convient bien aux écrans 60 Hz classiques : elle atténue les pics ponctuels sans masquer les chutes durables. Les petites fenêtres réagissent plus vite, les grandes paraissent plus stables.
Exemple concret
Supposons qu’une mesure de cinq secondes enregistre ces intervalles entre images, simplifiés :
| Intervalle entre images | FPS instantanés | Interprétation |
|---|---|---|
| 16,7 ms | 59,9 FPS | Affichage typique en 60 Hz |
| 8,3 ms | 120,5 FPS | Affichage typique en 120 Hz |
| 25,0 ms | 40,0 FPS | Ralentissement visible sur de nombreux écrans |
| 33,3 ms | 30,0 FPS | Charge lourde ou limitation des ressources |
Si votre seuil d’alerte est de 50 FPS et que la moyenne mobile mesurée finit à 47 FPS, le résultat reste sous l’objectif même si quelques images ont été plus rapides. Si elle finit près de 60 FPS avec des chutes ponctuelles à 45 FPS, la moyenne est saine, mais le minimum signale des saccades à examiner.
Interpréter les résultats
| Profil du résultat | Cause probable | Vérification suivante |
|---|---|---|
| Moyenne proche du taux de rafraîchissement, chutes rares | L’affichage est sain | Comparer avec un autre navigateur seulement si nécessaire |
| Moyenne correcte, minimum bien plus bas | Saccades périodiques | Fermer les onglets gourmands ou inspecter les animations |
| Moyenne sous le seuil | Charge d’affichage durable | Vérifier la charge CPU, les extensions et les scripts de la page |
| FPS plafonnés autour de 30 | Économie d’énergie ou limitation | Vérifier le mode batterie et les réglages d’affichage |
Les FPS du navigateur dépendent du taux de rafraîchissement de l’écran, du compositeur du système, du mode batterie, de la limitation thermique, des onglets actifs et de la page elle-même. Lancez d’abord le test dans un onglet calme, puis répétez-le pendant que la page ou l’application que vous diagnostiquez est active.
Questions fréquentes
Non. Ce compteur mesure la fréquence à laquelle le navigateur reçoit les rappels requestAnimationFrame. Il est utile pour vérifier les animations web et la fluidité d’une page, mais ce n’est pas un benchmark GPU complet pour les jeux natifs.
La plupart des navigateurs alignent les images d’animation sur le taux de rafraîchissement de l’écran. Un moniteur 60 Hz affiche généralement près de 60 FPS, tandis qu’un écran 120 Hz ou 144 Hz peut monter plus haut si le navigateur et le système le permettent.
Utilisez 50 FPS pour un contrôle de fluidité classique en 60 Hz. Sur un moniteur à haute fréquence, réglez le seuil au plus près de l’expérience attendue, par exemple 90 FPS ou 120 FPS.
Non. La mesure s’exécute dans votre navigateur à l’aide des API de chronométrage locales. L’outil n’envoie aucune donnée d’images, capture d’écran ni détail sur votre appareil vers une API externe.
Outils similaires
Générateur de lettres aléatoires
Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.
Générateur de palette de couleurs
Créez des palettes monochromatiques, analogues, complémentaires, triadiques ou tétradiques depuis une couleur HEX de base et exportez des variables CSS prêtes à copier.
Sélecteur de couleur HEX
Choisissez une couleur visuellement et obtenez ses valeurs HEX, RGB, HSL, HSV et CMYK, avec le contraste sur blanc et noir.
Formateur JSON
Collez du JSON pour l'afficher avec un retrait de 2 ou 4 espaces, le minifier en sortie compacte ou vérifier rapidement sa syntaxe avant de copier le résultat.
Générateur de palettes de couleurs aléatoires
Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.
Convertisseur ASCII en binaire
Convertissez n'importe quelle chaîne ASCII en sa représentation binaire. Chaque caractère devient huit bits, séparés par des espaces, prêts à être collés dans un suivi de protocole ou un devoir.