Une tâche longue est un code JavaScript qui monopolise le thread principal pendant de longues périodes, ce qui entraîne le "gel de l'interface utilisateur".
Lors du chargement d'une page, les tâches longues peuvent relier le thread principal et empêcher la page de répondre à l'entrée utilisateur, même si elle semble prête. Les clics et les appuis ne fonctionnent souvent pas, car les fonctionnalités interactives telles que les écouteurs d'événements et les gestionnaires de clics n'ont pas encore été associées aux éléments d'interface utilisateur. De ce fait, les tâches longues peuvent considérablement augmenter votre délai avant interactivité.
Les outils pour les développeurs Chrome peuvent désormais visualiser les tâches longues, ce qui permet d'identifier plus facilement les tâches à optimiser.
Qu'est-ce qu'une tâche longue ?
Les tâches longues gourmandes en ressources processeur sont causées par une tâche complexe qui prend plus de 50 ms. Le modèle RAIL suggère de traiter les événements d'entrée utilisateur en 50 ms pour garantir une réponse visible dans les 100 ms et préserver le lien entre action et réaction.
Point clé: Bien que le modèle RAIL suggère de fournir une réponse visuelle à l'entrée utilisateur dans un délai de 100 ms, les seuils de la métrique Interaction to Next Paint (INP) autorisent un délai maximal de 200 ms pour définir des attentes plus réalisables, en particulier pour les appareils lents.
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é.
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.
Pour utiliser le nouvel outil de visualisation:
- Enregistrez une trace dans le panneau Performances lors du chargement d'une page Web.
- Recherchez un indicateur rouge dans la vue principale des threads. Vous devriez voir que les tâches sont maintenant marquées en gris et associées au libellé Task.
- Maintenez le pointeur sur une barre grise. Une boîte de dialogue indique la durée de la tâche et indique si elle est considérée comme longue.
Qu'est-ce qui cause mes longues tâches ?
Pour découvrir la cause d'une longue tâche, sélectionnez la barre des tâches grise. Dans le panneau en dessous, sélectionnez Bottom-Up (Ascendant) et Group by Activity (Regrouper par activité). Cela vous permet de voir quelles activités ont le plus contribué (au total) à la tâche qui a duré si longtemps. Dans l'exemple suivant, la cause du retard ressemble à un ensemble coûteux de requêtes DOM.
Quelles sont les méthodes courantes d'optimisation des tâches longues ?
Les scripts volumineux sont souvent l'une des causes principales des longues tâches. Envisagez de les répartir. Surveillez également les scripts tiers, qui peuvent également contenir des tâches longues qui retardent l'interaction du contenu principal.
Divisez tout votre travail en fragments qui s'exécutent en moins de 50 ms, et exécutez-les au bon endroit et au bon moment. Certaines d'entre elles peuvent être placées en dehors du thread principal, dans un service worker. Pour savoir comment décomposer les tâches longues, consultez Optimize Long Tasks (Optimiser les tâches longues) et le rapport Idle Your Urgent (Inactif jusqu'à urgent) de Phil Walton.
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 la page Métriques de performances axées sur l'utilisateur.