Test de fluidité du défilement – Mesurez les à-coups de scroll

Ce test de fluidité du défilement mesure le type de mouvement que vous rencontrez plus que tout autre : une page ou une liste qui se déplace sous votre doigt ou votre molette. Le défilement est l'endroit où les à-coups apparaissent en premier, car il se produit en permanence et vos yeux sont entraînés à les repérer. Une page qui accroche en bougeant, un fil qui saute lorsque vous le faites glisser, un document qui tressaute ligne par ligne — tout cela dépend de la capacité du navigateur à fournir une nouvelle image à chaque rafraîchissement pendant que le contenu est en mouvement. Ce test fait défiler une haute bande de lignes numérotées avec un pas fixe par image et compte les images qui arrivent en retard.

Comme les lignes portent des numéros nets et des bords francs, vos yeux peuvent juger la fluidité directement, tandis que le compteur y met un chiffre. Cela vous permet de comparer navigateurs, extensions et machines avec des données plutôt qu'une vague impression.

Comment utiliser le test de défilement

La bande défile d'elle-même dès le chargement de la page. Pour bien la lire :

• Observez les lignes se déplacer. Un défilement fluide ressemble à un glissement continu et unique ; les à-coups ressemblent à des lignes qui sautent ou hésitent en passant.
• Suivez un numéro de ligne des yeux à mesure qu'il monte. S'il glisse régulièrement, la synchronisation est bonne ; s'il sursaute, une image est arrivée en retard.
• Lisez le compteur. Le temps d'image attendu est votre intervalle normal entre les images, le plus grand écart entre images est le délai le plus long enregistré, et le nombre d'à-coups compte chaque image en retard.
• Essayez-le en plein écran, et ajustez la vitesse pour qu'elle corresponde à votre manière habituelle de défiler — une lecture posée ou un défilement rapide.

Utilisez Réinitialiser le compteur pour repartir d'un décompte à zéro. Laisser le test tourner pendant trente secondes donne une image plus honnête qu'un simple coup d'œil, car les accrocs d'arrière-plan vont et viennent.

Pourquoi le défilement saccade

Un défilement fluide demande au navigateur de produire une nouvelle image à chaque rafraîchissement — toutes les 16,7 millisecondes à 60 Hz, toutes les 8,3 à 120 Hz — tout en faisant tourner la page. Lorsque quoi que ce soit retarde ce travail, une image est manquée et le défilement saute. Les coupables habituels sont précis et corrigeables.

Pages et scripts lourds

Les grandes images, les mises en page complexes et les scripts chargés rendent chaque image défilée coûteuse à dessiner. Les pages qui exécutent du code à chaque événement de défilement sont particulièrement sujettes aux à-coups. C'est autant une propriété de la page que de votre machine, ce qui explique pourquoi certains sites défilent en douceur et d'autres non sur le même ordinateur.

Extensions de navigateur

Les extensions de blocage de contenu, d'achat et d'accessibilité inspectent la page à mesure qu'elle bouge. Une seule extension mal optimisée peut ajouter juste assez de travail par image pour provoquer des saccades visibles. Tester dans une fenêtre de navigation privée, où la plupart des extensions sont désactivées, est un moyen rapide de vérifier.

Composition et accélération matérielle

Les navigateurs essaient de confier le défilement au GPU pour qu'il reste fluide même lorsque la page est chargée. Lorsque l'accélération matérielle est désactivée ou qu'une page renvoie le travail vers le thread principal, le défilement retombe sur le chemin le plus lent et saccade. Activer l'accélération matérielle dans les paramètres de votre navigateur aide généralement.

Économie d'énergie et charge en arrière-plan

Comme pour tout mouvement, un ordinateur portable en mode économie de batterie, un appareil surchauffé qui se bride lui-même, ou une tâche d'arrière-plan qui vole du temps processeur feront tous arriver les images en retard. Le test de défilement reflète le même état de santé du système qui régit tous les autres types de mouvement.

À quoi ressemble un bon résultat

Un défilement sain se traduit par une fréquence d'images élevée et stable, un nombre d'à-coups proche de zéro et un plus grand écart entre images proche du temps d'image attendu. Le tableau ci-dessous indique le temps d'image cible pour les fréquences de rafraîchissement courantes — la valeur autour de laquelle le test devrait se maintenir pendant le défilement.

Une fréquence de rafraîchissement plus élevée rend le défilement nettement plus fluide, mais seulement si le navigateur parvient à remplir ce budget plus serré. Confirmez la fréquence de rafraîchissement que vous utilisez réellement avec notre guide sur la fréquence de rafraîchissement, et mesurez votre fréquence d'images brute avec le test FPS principal.

Comment rendre le défilement plus fluide

• Activez l'accélération matérielle dans les paramètres de votre navigateur pour que le défilement s'exécute sur le GPU.
• Désactivez les extensions lourdes une par une, ou testez dans une fenêtre de navigation privée, pour identifier le coupable.
• Fermez la charge en arrière-plan et gardez l'appareil au frais et branché.
• Augmentez votre fréquence de rafraîchissement si votre écran le permet, puis refaites le test pour confirmer que le navigateur suit le rythme.
• Mettez à jour votre navigateur et vos pilotes graphiques, qui apportent souvent des améliorations du compositeur et du défilement.

Si le défilement est saccadé ici mais qu'un jeu tourne en douceur, la cause est généralement le navigateur ou la page plutôt que votre matériel. Si le mouvement est heurté partout, mesurez-le de façon isolée avec le test de saccades, qui utilise le même compteur de temps d'image sans le contenu défilant.

Foire aux questions

Le défilement est fluide ici mais saccadé sur certains sites web. Pourquoi ?

Parce que la fluidité dépend de la page autant que de votre machine. Les scripts lourds, les grandes images et les gestionnaires d'événements de défilement rendent certains sites coûteux à parcourir. Un résultat propre ici signifie que votre navigateur et votre matériel sont capables ; c'est le site chargé qui constitue le goulot d'étranglement.

Une fréquence de rafraîchissement plus élevée rend-elle le défilement plus fluide ?

Oui, à condition que le navigateur puisse fournir une image à chaque rafraîchissement. Un écran 120 Hz glisse plus doucement qu'un écran 60 Hz, mais seulement tant que la page continue de remplir le budget d'image plus court. Si elle n'y parvient pas, vous voyez simplement les à-coups plus tôt.

Pourquoi la même page défile-t-elle différemment dans deux navigateurs ?

Les navigateurs diffèrent dans leur manière de composer et de confier le défilement au GPU, ainsi que dans la façon dont les extensions s'accrochent à la page. Il est courant qu'un navigateur fasse défiler une page en douceur alors qu'un autre saccade sur un matériel identique.

Est-ce la même chose qu'un test de saccades ?

Ils partagent le compteur de temps d'image, mais ce test fait passer du contenu défilant réel par le compositeur du navigateur, ce qui correspond au cas quotidien qui intéresse la plupart des gens. Le test de saccades isole la synchronisation brute des images sans la couche de défilement.

Ce test évalue-t-il mon écran ou mon navigateur ?

Principalement votre navigateur et la machine sur laquelle il tourne. Les lignes se déplacent à travers le chemin de rendu et de composition du navigateur, donc un mauvais résultat pointe généralement vers le navigateur, une extension ou la charge du système plutôt que vers la dalle. Votre écran fixe tout de même le plafond — un écran 60 Hz ne pourra jamais défiler aussi doucement qu'un écran 120 Hz — mais en supposant que la fréquence de rafraîchissement soit suffisante, ce test évalue la capacité du logiciel à suivre le rythme.

Paramètres de défilement fluide et défilement à haute fréquence

La plupart des navigateurs et systèmes d'exploitation proposent une option de défilement fluide qui anime chaque pas de défilement au lieu de sauter. Cela rend le mouvement plus doux, mais ne crée pas des images que le navigateur ne peut pas dessiner — si la page est lourde, le défilement fluide se contente d'animer les à-coups. Le véritable gain vient d'une fréquence de rafraîchissement élevée associée à une page assez légère pour suivre. Sur un écran 120 Hz, faire défiler une page simple est visiblement plus fluide que sur 60 Hz, car deux fois plus d'images décrivent le même mouvement. Ce test vous permet de confirmer que votre navigateur fournit réellement ces images plutôt que d'en abandonner la moitié.

Défilement sur mobile, pavé tactile et molette

La façon dont vous défilez change ce que vous ressentez. Une molette de souris avance par pas discrets, donc la fluidité dépend de la qualité avec laquelle le navigateur anime les transitions entre eux. Un pavé tactile ou un écran tactile défile en continu et est confié au compositeur, ce qui est généralement le chemin le plus fluide — mais aussi le plus révélateur lorsqu'une image est abandonnée, car votre doigt crée une attente que l'écran doit satisfaire. Les téléphones et tablettes y sont particulièrement sensibles, puisque le défilement est le principal moyen de tout parcourir. Si une page saccade sous votre doigt mais pas sous une molette, c'est que le compositeur est forcé d'attendre le thread principal.

De quoi dépend un défilement sans à-coups

Un défilement fluide est une chaîne, et le maillon le plus faible détermine le résultat : la page doit être assez légère pour être dessinée à temps, le navigateur doit confier le défilement au GPU, le système ne doit pas être occupé ni se brider, et l'écran doit disposer de la marge de rafraîchissement nécessaire pour afficher les images. Ce test sollicite toute la chaîne d'un coup. Quand le chiffre est bon, chaque maillon tient ; quand il est mauvais, les sections ci-dessus permettent de cerner quel maillon examiner en premier. Comme le défilement est si courant, de petites améliorations paient partout — une mise à jour du navigateur, une extension désactivée ou le passage à l'accélération matérielle peuvent transformer un résultat saccadé en un résultat propre, et vous sentirez la différence sur chaque site que vous visiterez ensuite.

Tests d'affichage et de mouvement associés

Le défilement n'est qu'une tranche quotidienne des performances de mouvement. Poursuivez avec ces outils complémentaires :

• Test de fréquence d'images (test FPS) — mesurez votre fréquence d'images et de rafraîchissement en direct.
• Test de flou de mouvement — voyez à quel point votre écran étale les détails en mouvement.
• Test de saut d'images — vérifiez si la dalle dessine bien chaque image.
• Test de déchirure d'écran — vérifiez si les images sont alignées sur le rafraîchissement.
• Test de saccades — mesurez la régularité du temps d'image au niveau logiciel.