Renforcez vos compétences de détective des performances avec Lighthouse et les outils pour les développeurs Chrome.
En tant que développeur, vous n'avez souvent aucun contrôle sur les scripts tiers que votre site charge. Avant d'optimiser les contenus tiers, vous devez mener une enquête pour déterminer ce qui ralentit votre site. 🕵️
Dans cet article, vous allez découvrir comment utiliser Lighthouse et les outils pour les développeurs Chrome pour identifier les ressources tierces lentes. L'article présente des techniques de plus en plus robustes, qui sont mieux utilisées en combinaison.
Si vous ne disposez que de cinq minutes
L'audit des performances Lighthouse vous aide à identifier les possibilités d'accélérer le chargement des pages. Les scripts tiers lents sont susceptibles d'apparaître dans la section Diagnostics, sous les audits Réduire le temps d'exécution de JavaScript et Éviter les charges utiles réseau énormes.
Pour effectuer un audit:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Lighthouse (Phare).
- Cliquez sur Mobile.
- Cochez la case Performances. (Vous pouvez décocher les autres cases de la section "Audits".)
- Cliquez sur Connexion 3G rapide simulée, processeur 4 fois plus lent.
- Cochez la case Effacer l'espace de stockage.
- Cliquez sur Effectuer des audits.
Utilisation tierce
L'audit Utilisation de code tiers de Lighthouse affiche 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 le code tiers redondant. L'audit est disponible dans l'extension Lighthouse et sera bientôt ajouté à DevTools dans Chrome 77.
Réduire le temps d'exécution de JavaScript
L'audit Réduire le temps d'exécution de JavaScript de Lighthouse met en évidence les scripts qui prennent beaucoup de temps à analyser, compiler ou évaluer. Cochez la case Afficher les ressources tierces pour détecter les scripts tiers gourmands en CPU.
Évitez d'énormes charges utiles de réseau
L'audit Éviter d'énormes charges utiles de réseau de Lighthouse identifie les demandes réseau, y compris celles provenant de tiers, qui peuvent ralentir le temps de chargement des pages. L'audit échoue lorsque la charge utile réseau dépasse 4 000 ko.
Bloquer les requêtes réseau dans Chrome DevTools
Le blocage des requêtes réseau des outils pour les développeurs Chrome vous permet de voir comment votre page se comporte lorsqu'un script, une feuille de style ou une autre ressource spécifique n'est pas disponible. Après avoir identifié les scripts tiers qui, selon vous, affectent les performances, mesurez l'évolution de votre temps de chargement en bloquant les requêtes envoyées à ces scripts.
Pour activer le blocage des requêtes : 1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools. 1. Cliquez sur l'onglet Réseau. 1. Effectuez un clic droit sur une demande dans le panneau Network (Réseau). 1. Sélectionnez Bloquer l'URL de la requête.
Un onglet Blocage des requêtes s'affiche dans le panneau des outils de développement. Vous pouvez y gérer les requêtes 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 de bande passante réseau et la limitation du processeur. (Sur les connexions plus rapides et les ordinateurs, l'impact des scripts coûteux peut ne pas être aussi 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 est possible que le blocage occasionnel de scripts tiers n'ait pas l'effet escompté. Si tel est le cas, réduisez la liste des URL bloquées jusqu'à ce que vous identifiiez celle qui est à l'origine de la lenteur.
Notez que si vous effectuez trois mesures ou plus et que vous examinez les valeurs médianes, vous obtiendrez probablement des résultats plus stables. Étant donné que le contenu tiers peut parfois importer différentes ressources à chaque chargement de page, cette approche peut vous donner une estimation plus réaliste. DevTools accepte désormais plusieurs enregistrements dans le panneau Performances, ce qui facilite la tâche.