Boostez vos compétences de détective avec Lighthouse et Chrome DevTools.
En tant que développeur, vous ne contrôlez souvent pas les scripts tiers chargés par votre site. Avant de pouvoir optimiser le contenu tiers, vous devez faire des recherches pour déterminer ce qui ralentit votre site. 🕵️
Cet article vous explique comment identifier les ressources tierces lentes à l'aide de Lighthouse et des outils pour les développeurs Chrome. Cet article présente des techniques toujours plus efficaces qu'il est préférable de combiner.
Si vous n'avez que 5 minutes
L'audit des performances Lighthouse vous aide à découvrir comment accélérer le chargement des pages. Les scripts tiers lents sont susceptibles de s'afficher dans la section Diagnostic sous les audits Réduire le temps d'exécution JavaScript et Éviter d'énormes charges utiles de réseau.
Pour exécuter un audit:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Cliquez sur Mobile.
- Cochez la case Performances. (Vous pouvez décocher les autres cases de la section "Audits".
- Cliquez sur Simulation 3G rapide, ralentissement du processeur 4x.
- Cochez la case Vider l'espace de stockage.
- Cliquez sur Exécuter des audits.
Utilisation tierce
L'audit Utilisation tierce de Lighthouse indique la liste des fournisseurs tiers utilisés par une page. Cette présentation peut vous aider à mieux comprendre la situation dans son ensemble et à identifier les codes tiers redondants. L'audit est disponible dans l'extension Lighthouse et sera bientôt ajouté aux outils de développement dans Chrome 77.
Réduire le temps d'exécution JavaScript
L'audit Lighthouse Réduire le temps d'exécution JavaScript met en évidence les scripts dont l'analyse, la compilation ou l'évaluation prennent beaucoup de temps. Cochez la case Afficher les ressources tierces pour détecter les scripts tiers qui utilisent de manière intensive le processeur.
Éviter d’énormes charges utiles de réseau
L'audit Lighthouse Éviter les charges utiles réseau volumineuses identifie les requêtes réseau, y compris celles provenant de tiers, susceptibles de ralentir le chargement des pages. L'audit échoue lorsque la charge utile du réseau dépasse 4 000 Ko.
Bloquer les requêtes réseau dans les outils pour les développeurs Chrome
Le blocage des requêtes réseau dans les outils pour les développeurs Chrome vous permet de déterminer le comportement de votre page lorsqu'un script, une feuille de style ou une autre ressource spécifique n'est pas disponible. Après avoir identifié les scripts tiers susceptibles d'avoir une incidence sur les performances, mesurez l'évolution de votre temps de chargement en bloquant les requêtes vers ces scripts.
Pour activer le blocage des requêtes : 1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement. 1. Cliquez sur l'onglet Réseau. 1. Effectuez un clic droit sur n'importe quelle requête dans le panneau Network (Réseau). 1. Sélectionnez Bloquer l'URL de la demande.
Un onglet Blocage des requêtes s'affiche dans le panneau "Outils de développement". Vous pouvez y gérer les requêtes qui ont été bloquées.
Pour mesurer l'impact des scripts tiers:
- Mesurez le temps de chargement de votre page à l'aide du panneau Network (Réseau). Pour émuler des conditions réelles, activez la limitation du réseau et la limitation du processeur. En cas de connexion plus rapide et de matériel de bureau, l'impact de scripts coûteux peut s'avérer moins représentatif que sur un téléphone mobile.
- Bloquez les URL ou les domaines responsables des scripts tiers qui, selon vous, posent problème.
- Actualisez la page et mesurez à nouveau le temps de chargement sans les scripts tiers bloqués.
Vous devriez constater une amélioration de la vitesse, mais il peut arriver que le blocage de scripts tiers n'ait pas l'effet escompté. Dans ce cas, réduisez la liste des URL bloquées jusqu'à ce que vous isoliez celle qui cause un problème de lenteur.
Notez qu'effectuer trois exécutions de mesure ou plus et examiner les valeurs médianes produira probablement des résultats plus stables. Étant donné que le contenu tiers peut parfois intégrer différentes ressources par chargement de page, cette approche peut vous donner une estimation plus réaliste. Pour simplifier les choses, les outils de développement sont désormais compatibles avec plusieurs enregistrements dans le panneau Performance.