Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.
Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.
Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.
Frame rate et réactivité
Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.
Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.
Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.
Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).
En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.
Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.
Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.
Graphique du Frame rate
Le graphique du frame rate se trouve dans la vue d'ensemble de l'enregistrement de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.
L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.
Utiliser le graphique du frame rate
Le principal intérêt de ce graphique est que tout comme la Console web, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :
Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.
Le graphique du frame rate est en relation avec la vue d'ensemble de la Chronologie et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.
Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la Chronologie en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :
Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.
Pour savoir de quelle fonction il s'agit exactement, il faut passer au Flame Chart (Graphique JS) pour voir la pile d'appels à ce moment donné :
La fonction coupable est doPointlessComputations(), et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans requestAnimationFrame, ou bien même d'exécuter la fonction dans un worker. L'article JavaScript intensif expose des stratégies pour résoudre ce genre de problèmes.