Tester le délai de première entrée dans le rapport UX Chrome

L'objectif du rapport d'expérience utilisateur Chrome est d'aider la communauté Web à comprendre la répartition et l'évolution des performances réelles des utilisateurs. Jusqu'à présent, nous nous sommes concentrés sur les métriques "Paint" et "Chargement de page", telles que First Contentful Paint (FCP) et Onload (OL), qui nous ont aidés à comprendre les performances visuelles des sites Web pour les utilisateurs. Depuis la version de juin 2018, nous testons une nouvelle métrique axée sur l'utilisateur et axée sur l'interactivité des pages Web : le délai de première entrée (FID). Cette nouvelle métrique nous permettra de mieux comprendre la réactivité des sites Web aux entrées utilisateur.

Le FID a été récemment lancé dans Chrome en tant qu'phase d'évaluation, ce qui signifie que les sites Web peuvent choisir d'expérimenter cette nouvelle fonctionnalité de plate-forme Web. De même, le FID sera disponible dans le rapport d'expérience utilisateur Chrome en tant que métrique expérimentale, ce qui signifie qu'il sera disponible pendant toute la durée de la phase d'évaluation dans un espace de noms "expérimental" distinct.

Comment le FID est-il mesuré ?

Alors, qu’est-ce que le FID exactement ? Voici comment il est défini dans l'article de blog concernant le First Input Delay:

Le FID (First Input Delay) mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec votre site (par exemple, lorsqu'il clique sur un lien, appuie sur un bouton ou utilise une commande JavaScript personnalisée) et le moment où le navigateur est réellement en mesure de répondre à cette interaction.

Animation montrant comment un thread principal occupé retarde la réponse à une interaction utilisateur.

C'est un peu comme mesurer le temps qui s'écoule entre le moment où quelqu'un sonne à la porte et le moment où il répond à la porte. Si cela prend beaucoup de temps, il peut y avoir plusieurs raisons. Par exemple, il se peut que la personne soit loin de la porte ou qu'elle ne puisse pas se déplacer rapidement. De même, les pages Web peuvent être occupées à effectuer d'autres tâches ou l'appareil de l'utilisateur peut être lent.

Découverte du FID dans le rapport UX Chrome

Avec un mois de données FID provenant de millions d'origines, il existe déjà une multitude d'insights intéressants à découvrir. Examinons quelques requêtes montrant comment extraire ces insights du rapport UX Chrome sur BigQuery.

Commençons par demander le pourcentage d'expériences FID rapides pour developers.google.com. Nous pouvons définir une expérience rapide comme une expérience dans laquelle le FID est inférieur à 100 ms. Conformément aux recommandations RAIL, si le délai est d'au moins 100 ms, il devrait sembler instantané pour l'utilisateur.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

Les résultats montrent que 95% des expériences FID sur cette origine sont perçues comme instantanées. Cela semble vraiment bien, mais en quoi se compare-t-il à toutes les origines de l'ensemble de données ?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

Les résultats de cette requête montrent que 84% des expériences FID durent moins de 100 ms. Developers.google.com est donc au-dessus de la moyenne.

Essayons ensuite de diviser ces données pour voir s'il existe une différence entre le pourcentage de FID rapide sur ordinateur et sur mobile. Une hypothèse est que les appareils mobiles ont des valeurs FID plus lentes, peut-être en raison d'un matériel plus lent que sur les ordinateurs de bureau. Si le processeur est moins puissant, il peut être plus sollicité pendant plus longtemps, ce qui ralentit les expériences FID.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
form_factor fast_fid
desktop 96.02%
téléphone 79.90%
de la tablette 76.48%

Les résultats confirment notre hypothèse. Les ordinateurs ont une densité cumulée d'expériences FID rapides plus élevée que les facteurs de forme des téléphones et des tablettes. Pour comprendre pourquoi ces différences existent, comme les performances du processeur, il vous faudrait effectuer des tests A/B en dehors du champ d'application du rapport d'expérience utilisateur Chrome.

Maintenant que nous avons vu comment déterminer si une origine offre des expériences FID rapides, examinons quelques origines qui fonctionnent très bien.

Exemple 1: http://secretlycanadian.com

Pellicule WebPageTest de secretlycanadian.com

Cette origine présente 98% des expériences FID inférieures à 100 ms. Comment font-ils ? En analysant la façon dont elle est intégrée dans WebPageTest, nous constatons qu'il s'agit d'une page WordPress contenant beaucoup d'images, mais qu'elle dispose de 168 Ko de JavaScript qui s'exécute en 500 ms sur notre machine d'atelier. D'après l'archive HTTP, il ne s'agit pas vraiment de JavaScript, ce qui place cette page au 28e centile.

Cascade AWebPageTest de secretlycanadian.com

La barre rose s'étendant sur 2,7 à 3 secondes correspond à la phase Analyse HTML. Pendant ce temps, la page n'est pas interactive et semble incomplète (voir "3.0s" dans la pellicule ci-dessus). Ensuite, toutes les longues tâches qui doivent être traitées sont divisées pour que le thread principal reste au repos. Les lignes roses de la ligne 11 montrent comment le travail JavaScript est réparti en rafales rapides.

Exemple 2: https://www.wtfast.com

Pellicule WebPageTest de wtfast.com

Cette origine offre 96% d'expériences FID instantanées. Elle charge 267 Ko de JavaScript (38e centile dans les archives HTTP) et le traite pendant 900 ms sur la machine de l'atelier. La pellicule indique que la page met environ cinq secondes à peindre l'arrière-plan et environ deux secondes de plus pour peindre le contenu.

Cascade WebPageTest de wtfast.com

Ce qui est le plus intéressant à propos des résultats, c'est que rien d'interactif n'est même visible lorsque le thread principal est occupé entre trois et cinq secondes. La lenteur du FCP de cette page améliore le FID. Voici un bon exemple de l'importance d'utiliser de nombreuses métriques pour représenter l'expérience utilisateur.

Commencer l'exploration

Pour en savoir plus sur le FID, consultez l'épisode de cette semaine de L'état du Web:

La présence du FID dans le rapport d'expérience utilisateur Chrome nous permet d'établir une base de référence des expériences d'interactivité. Cette référence nous permet d'observer son évolution dans les futures versions ou de comparer des origines individuelles. Si vous souhaitez commencer à collecter le FID dans les mesures de terrain de votre propre site, inscrivez-vous à la phase d'évaluation en accédant à bit.ly/event-timing-ot et sélectionnez la fonctionnalité "Durée de l'événement". Bien sûr, commencez à explorer l'ensemble de données pour obtenir des informations intéressantes sur l'état de l'interactivité sur le Web. Il s'agit encore d'une métrique expérimentale. N'hésitez donc pas à nous faire part de vos commentaires et à partager votre analyse dans le groupe de discussion sur les rapports d'expérience utilisateur Chrome ou sur @ChromeUXReport sur Twitter.