Apprenez à diagnostiquer les tâches coûteuses qui empêchent toute interaction avec l'utilisateur.
Les longues tâches peuvent occuper le thread principal, ce qui retarde les interactions utilisateur. Les outils pour les développeurs Chrome permettent désormais de visualiser les tâches longues, ce qui vous permet de voir plus facilement les tâches à optimiser.
Si vous utilisez Lighthouse pour auditer vos pages, vous connaissez peut-être la métrique Délai avant interactivité, qui représente le moment où les utilisateurs peuvent interagir avec votre page et obtenir une réponse. Mais saviez-vous que les tâches longues (JavaScript) peuvent contribuer grandement à un TTI médiocre ?
Que sont les longues tâches ?
Une tâche longue est un code JavaScript qui monopolise le thread principal pendant de longues périodes, ce qui "fige" l'UI.
Lors du chargement d'une page Web, les tâches longues peuvent relier le thread principal et empêcher la page de répondre aux entrées utilisateur, même si elle semble prête. Les clics et les appuis ne fonctionnent généralement pas, car les écouteurs d'événements, les gestionnaires de clics, etc. n'ont pas encore été associés.
Les tâches longues gourmandes en ressources processeur sont dues à des tâches complexes qui prennent plus de 50 ms. Pourquoi 50 ms ? Le modèle RAIL vous suggère de traiter les événements d'entrée utilisateur en 50 ms pour obtenir une réponse visible dans les 100 ms. Si vous ne le faites pas, le lien entre action et réaction sera rompu.
Ma page contient-elle des tâches longues qui pourraient retarder l'interactivité ?
Jusqu'à présent, vous deviez rechercher manuellement les "longs blocs jaunes" du script de plus de 50 ms dans les Outils pour les développeurs Chrome ou utiliser l'API Long Tasks pour identifier les tâches qui retardaient l'interactivité. Cela peut être un peu fastidieux.
Pour faciliter votre workflow d'audit des performances, DevTools visualise désormais les tâches longues. Les tâches (affichées en gris) sont accompagnées d'un drapeau rouge s'il s'agit de tâches longues.
- Enregistrez une trace dans le panneau Performances du chargement d'une page Web.
- Recherchez un indicateur rouge dans la vue principale des threads. Les tâches doivent maintenant apparaître en gris ("Tâche").
- Pointez sur une barre pour connaître la durée de la tâche et si elle était considérée comme "longue".
Qu'est-ce qui cause mes longues tâches ?
Pour déterminer la cause d'une longue tâche, sélectionnez la barre des tâches grise. Dans le panneau situé en dessous, sélectionnez Ascendant et Grouper par activité. Cela vous permet de voir quelles activités ont le plus contribué (au total) à la tâche qui a pris si longtemps. Dans l'exemple ci-dessous, l'ensemble de requêtes DOM semble coûteux.
Quelles sont les méthodes courantes d'optimisation des tâches longues ?
Les scripts volumineux sont souvent l'une des principales causes des tâches longues. Par conséquent, pensez à les diviser. Surveillez également les scripts tiers, car leurs tâches longues peuvent retarder l'interactivité du contenu principal.
Divisez tout votre travail en petits fragments (qui s'exécutent en moins de 50 ms) et exécutez-les au bon endroit et au bon moment. Le bon endroit peut même se trouver en dehors du thread principal, dans un worker. L'ouvrage Idle Once Urgent de Phil Walton est une bonne lecture sur ce sujet. Consultez également l'article Optimiser les tâches longues pour connaître les stratégies générales de gestion et de répartition des tâches longues.
Préservez la réactivité de vos pages. Réduire le nombre de tâches longues est un excellent moyen de garantir une expérience agréable aux visiteurs de votre site. Pour en savoir plus sur les tâches longues, consultez Métriques de performances axées sur l'utilisateur.