Performance Optimisez un site Web JavaScript avec Chrome DevTools

Mesurer les performances des applications Web JavaScript est un moyen important de donner à vos utilisateurs la vitesse à laquelle ils s'attendent. Nous allons discuter de quelques outils de développement Chrome qui peuvent nous aider à mesurer les performances de nos applications.

Aujourd'hui, JavaScript alimente de nombreux sites Web et applications Web sur le Web. Ces sites Web et applications devraient être extrêmement rapides si nous prévoyons de conserver nos utilisateurs. Mesurer avec précision les performances des applications Web est un aspect important pour rendre les applications Web plus rapides.

Dans cet article, nous aborderons quelques outils qui peuvent nous aider à mesurer les performances de nos applications. Ils comprennent:

• Panneau de performances de Chrome DevTools
• Phare

Conditions préalables

Une connaissance de base de Chrome DevTools vous aidera à tirer le meilleur parti de ce didacticiel.

Panneau de performances

Le panneau de performances de Chrome fournit: nous avec des outils pour nous aider à analyser la performance d'exécution de nos applications. Les performances d’exécution d’une application correspondent aux performances de l’application lorsqu’elle est exécutée.

Lorsqu’on analyse les performances d’une application, il est préférable de le faire en mode Incognito du navigateur. Ceci garantit que la mesure des performances ne soit pas affectée par d'autres facteurs tels que les extensions installées.

Pour accéder au panneau Performances, appuyez d'abord sur . Commande + Option + I sur Mac ou Control + Shift + I sur Windows et Linux, pour ouvrir DevTools. Une fois dans DevTools, cliquez sur l'onglet Performance :

Le panneau de performances contient quelques éléments:

• Un bouton d'enregistrement pour métrique de performance de capture
• Bouton de rechargement permettant d’enregistrer et d’évaluer le chargement de page
• Case à cocher de capture d’écran permettant de capturer des captures d’écran lors du profilage de performances
• Case à cocher permettant de capturer les problèmes de mémoire ayant une incidence sur les performances
• Icône de paramètres de capture révélant davantage de paramètres liés au mode de capture des mesures de performance

Enregistrement des performances d'exécution

Pour enregistrer les performances d'exécution d'une page de votre application, ouvrez le panneau Performances de cette page, sélectionnez les options souhaitées, cliquez sur l'enregistrement. DevTools capture les métriques de performance au fur et à mesure que la page s’exécute:

Lorsque vous avez terminé cting avec la page, cliquez sur le bouton stop. Le profil de performances s'arrête et les résultats s'affichent dans le panneau Performances:

Analyse du résultat de profilage

Le résultat de performances renvoyé contient des données sur Réseau Les cadres Les interactions Le fil principal et quelques autres. Chaque donnée est dans une section et une section agrandie vous montre les données associées.La partie Overview contient des captures d'écran et des informations sur d'autres sections, en haut du résultat (encadré en rouge ci-dessus) et au bas de celui-ci, un résumé . Onglet contenant la ventilation de toutes les activités.

La section Images contient les données de l'un des indicateurs les plus importants pour la mesure des performances d'animation dans votre application (le taux recommandé est de 60 images par seconde). et tout ce qui précède conduit à caca r performance. En survolant les barres vertes de la section Images, vous affichez la cadence de cette image. Toute image supérieure à 60 images par seconde signifie que vous devez optimiser les performances:

La section Main contient des données sur l'activité sur le fil principal. Ces données sont présentées sous forme d'un diagramme de flamme. L'axe des x représente l'enregistrement dans le temps, -axis représente la pile d'appels. Chaque barre du graphique représente un événement, et plus une barre est large, plus l'événement a été long. Lorsque les événements sont empilés les uns sur les autres, l'événement supérieur déclenche ceux qui se trouvent en dessous.

Le diagramme de flammes dans la section principale contient généralement beaucoup de données.Vous pouvez zoomer sur des événements individuels en cliquant, en maintenant et en faisant glisser votre souris sur la section de vue d'ensemble: [19659003]

Dans la vue agrandie, nous pouvons voir un événement de souris et un Animation Frame Fired avec un triangle rouge. Le triangle rouge correspondant à un événement est un avertissement indiquant un problème de performances lié à cet événement.

En cliquant sur l'événement, l'onglet de résumé vous indique plus d'informations sur l'événement:

Dans l'image ci-dessus, nous pouvons voir que l'événement a pris 100,12 ms. Le graphique agrégé nous indique que 97,9 ms du temps total passé ont été passés par des enfants. le lien révèle met en évidence l'événement qui a initié l'événement Animation Frame Fired en cliquant sur le lien après le texte run @ qui vous conduit à la ligne correspondante de la source De cette façon, vous savez quelle ligne doit être modifiée.

Lighthouse

Lighthouse est un outil open source de Google permettant d’améliorer la qualité des pages Web. Il effectue une série d’audits sur une page et génère un rapport sur la performance de la page avec des suggestions comment améliorer la page.

Un phare alimente l’onglet Audits de Chrome, facilitant ainsi l’établissement d’un rapport sur les performances de votre page. Le phare a également une extension Chrome. Pour accéder à Lighthouse, ouvrez DevTools, puis cliquez sur l'onglet Audits :

L'onglet Audits contient les options de périphérique permettant à Lighthouse de mesurer les performances. Il existe des options de performance parmi lesquelles choisir, ainsi que des options permettant de limiter le réseau / l'UC.

Pour effectuer un audit du phare sur votre page, sélectionnez les options que vous préférez, puis cliquez sur le bouton . Ce bouton démarre un audit de performance basé sur les options sélectionnées:

L’audit de performance dure environ une à deux minutes et renvoie un rapport sur le fonctionnement de la page:

Le rapport contient une vue d'ensemble de la manière dont la page est réalisée. sur les critères de performance choisis. n contient une section détaillée des problèmes de performances, avec des solutions spécifiques pour les résoudre.

Conclusion

Dans cet article, nous avons présenté les outils de développement que Chrome nous offre pour améliorer les performances d’une application JavaScript. J'espère que vous avez beaucoup appris pour vous aider à créer des applications JavaScript plus performantes.

Ce blog vous a été proposé par Kendo UI

Vous souhaitez en savoir plus sur la création d'applications Web exceptionnelles? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.