Tests de performances JavaScript avec MilleCheck

MilleCheck.ai et l’analyse JavaScript

MilleCheck offre des fonctionnalités avancées pour analyser en profondeur l’impact WebPerf du JavaScript sur la performance de votre site web. Dans ses tests de performances JavaScript, comme le temps de chargement des pages ne dépend pas que de la bande passante, notre outil ne se contente pas de lister les fichiers JavaScript, il fournit des données cruciales pour comprendre leur comportement et optimiser la performance : temps de réponse, poids, minification, compression Gzip ou Brotli, taux de couverture… Il fournit aussi, à partir d’une simple URL, des mesures précises pour évaluer la rapidité d’exécution dans une version mobile ou desktop.

Mesure des temps d’exécution et du Blocking Time

• Temps d’exécution : MilleCheck.ai mesure précisément combien de temps chaque script JavaScript prend pour s’exécuter. Cela vous permet d’identifier rapidement les scripts qui ralentissent votre page en consommant trop de ressources. Dès lors, vous pouvez prioriser vos efforts d’optimisation sur ces scripts spécifiques.
• Blocking Time : Le « blocking time » est le temps pendant lequel un script empêche le navigateur d’analyser le HTML et de construire la page. Un blocking time élevé retarde l’affichage du contenu et dégrade l’expérience utilisateur. MilleCheck.ai identifie les scripts qui contribuent le plus à ce blocage, vous permettant de les optimiser pour réduire le temps de chargement et accélérer l’affichage.

Le résultat des tests de performances JavaScript, présenté sous forme de tableaux triables, vous permet de classer les fichiers JavaScript en fonction de leur temps d’exécution total ou de leur temps de blocage, facilitant ainsi l’identification des scripts les plus gourmands en ressources et à optimiser en priorité, afin d’améliorer la vitesse d’exécution.

Console embarquée dans le rapport

Classique des outils disponibles dans un navigateur, une console JS est aussi présente dans le rapport MilleCheck. Elle permet :

• d’inspecter les erreurs et les avertissements liés au JavaScript et au réseau,
• d’afficher les différents Logs (console.log(), console.warn(), console.error() : Messages de débogage, avertissements et erreurs),
• d’afficher les messages liés aux CSP : Violations de politique de sécurité.

Liste des accès DOM

MilleCheck.ai va encore plus loin en fournissant une liste complète et horodatée de toutes les interactions de vos scripts avec le DOM (Document Object Model), c’est-à-dire, avec la structure, l’architecture de votre page web.

Notre intelligence augmentée va donc lister toutes les manipulations suivantes :

Liste des Events

Un nombre excessif d’événements liés peut entraîner une utilisation élevée de la mémoire, ce qui peut ralentir le navigateur. Au lieu d’attacher des écouteurs d’événements à de nombreux éléments individuels, MilleCheck.ai vous recommande d’utiliser la délégation d’événements pour attacher un seul écouteur à un élément parent. MilleCheck vous aide à identifier les événements qui utilisent beaucoup de mémoire en listant les événements suivants afin de les optimiser :

• eventsBound: Événements liés – fait référence aux événements qui ont été attachés à des éléments du DOM, prêts à être déclenchés en réponse à des interactions de l’utilisateur ou à d’autres événements.
• eventsDispatch: Événements déclenchés – déclenchement manuel d’événements sur des éléments du DOM.

Liste des DOMqueries…

Toutes les manières de requêter des éléments dans la page sont souvent cause de problèmes de performance, car les éléments recherchés sont fréquemment re-sélectionnés, au lieu d’être stockés dans des variables et réutilisés. Parmi elles, MilleCheck est capable de lister, pour vous aider à les regrouper :

• DOMqueriesByClassName: Requêtes DOM par nom de classe – sélectionne des éléments du DOM en fonction du nom de leur classe.
• DOMqueriesById: Requêtes DOM par ID – sélectionne un élément du DOM en fonction de son ID unique.
• DOMqueriesByQuerySelector ou DOMqueriesByQuerySelectorAll: Requêtes DOM par QuerySelectorAll – sélectionne des éléments du DOM en utilisant une chaîne de requête CSS.
• DOMqueriesByTagName: Requêtes DOM par nom de balise – sélectionne des éléments du DOM en fonction de leur nom de balise (par exemple, « div », « p », « a »).

Liste des manipulations DOM

Les manipulations du DOM peuvent déclencher des opérations coûteuses en performance, comme le recalcul du style (reflow) et le réaffichage (repaint) de la page, impactant particulièrement les utilisateurs sur mobile. MilleCheck.ai identifie ces manipulations et recommande l’utilisation de fragments de document pour construire la structure hors DOM, optimisant ainsi les performances en limitant les interactions coûteuses avec le DOM.

• DOMinserts: Insertions dans le DOM – ajout de nouveaux éléments au DOM.
• DOMmutationsAttributes: Mutations d’attributs du DOM – modifications des attributs d’un élément du DOM (par exemple, changer la valeur de l’attribut « src » d’une image).
• DOMmutationsInserts: Mutations d’insertion dans le DOM – ajout de nouveaux nœuds enfants à un élément du DOM.
• DOMmutationsRemoves: Mutations de suppression dans le DOM – suppression de nœuds enfants d’un élément du DOM.

Cela signifie que vous pouvez identifier à quel moment ces manipulations interviennent. De plus, cette liste est mise en parallèle avec le taux d’occupation CPU ; ce qui permet de repérer les opérations coûteuses en termes de performance, comme les manipulations trop fréquentes ou les accès inefficaces aux éléments. En optimisant ces interactions, vous réduisez les recalculs de style et les re-agencements de la page, ce qui améliore significativement le temps de rendu et la réactivité de votre site.

Le nombre d’accès DOM est aussi présent dans le filmstrip permettant ainsi de visualiser la progression du rendu tout en identifiant leur influence.

Tests de performances JavaScript First et Third Parties

Au cours des tests de performances JavaScript, MilleCheck.ai distingue clairement les scripts internes (first-party) que vous contrôlez, des scripts externes (third-party) provenant d’autres domaines, comme ceux utilisés pour les analyses ou les publicités.

Cette distinction est cruciale car les scripts tiers peuvent fortement impacter la performance web de votre site sans que vous ayez un contrôle direct sur leur code source. MilleCheck.ai vous aide à évaluer l’impact WebPerf de chaque catégorie de script tiers (Pubs, Tag Manager, Statistiques, CMP, etc) et à prendre des décisions éclairées, comme remplacer un script tiers lent par une alternative plus performante ou limiter son utilisation.

Test de vulnérabilité des librairies

Accessoirement, MilleCheck.ai détecte aussi les librairies JavaScript utilisées sur votre site et vérifie si elles contiennent des vulnérabilités connues. Cette fonctionnalité vous aide à maintenir votre site sécurisé et à jour en vous alertant sur les risques potentiels.

Optimiser votre JavaScript avec MilleCheck.ai

MilleCheck.ai propose un système de notation, basé sur les bonnes pratiques web, par catégorie, incluant le JavaScript. Un système de points vous permet de trier par priorité les bonnes pratiques les moins respectées. Et, au delà des tests de performances JavaScript, cela vous permet surtout d’agir en conséquence.

Ainsi selon le relevé d’indicateurs précis, chaque rapport MilleChek.ai vous met en évidence un certain nombre d’actions comme par exemple :

• Minifier et compresser votre code JavaScript pour réduire sa taille et accélérer son téléchargement.
• Différer le chargement des scripts non essentiels jusqu’à ce que le contenu principal de la page ait été rendu.
• Eliminer le code JavaScript inutilisé pour réduire la quantité de code exécutée par le navigateur.
• Réduire les dépendances externes en limitant l’utilisation de scripts tiers ou en les chargeant de manière asynchrone.
• Optimiser les interactions avec le DOM pour minimiser les recalculs de style et les réagencements de la page.

En suivant les recommandations de MilleCheck.ai, vous pouvez améliorer la performance, la maintenabilité et la sécurité de votre code JavaScript. Ainsi, ce travail d’optimisation de la vitesse, vous permettra d’améliorer le référencement naturel de votre site, diminuer le taux de rebond et, in fine, augmenter le taux de conversion.

L’œil de l’expert associé

aux tests de performances JavaScript

En plus d’optimiser votre code JavaScript avec millecheck.ai, profitez de nos experts artwaï, adeptes du “No Fucking JS Spirit”. Ils mettront leur expertise à votre service pour évincer les composants JavaScript vieillissants et inefficaces. Ils vous dénicheront des alternatives Front-End pour le coup vraiment natives en HTML et CSS, pour que votre site soit plus rapide et plus léger que jamais !

Pour améliorer le temps de chargement selon l’ensemble des indicateurs, nous pouvons :

• vous aider dans la mise en place d’un ordonnanceur (script de chargement),
• identifier les scripts trop lents et éventuellement utiliser le chargement différé et/ou asynchrone, voir un système de lazy load,
• configurer votre site WordPress ou autre CMS pour améliorer les performances des sites
  • avec un plugin dédié à la performance (comme WP Rocket, W3 Total Cache ou autre)
  • ou sans plugin avec un code fait sur mesure et généralement indépendant des frameworks (dans votre thème WordPress ou développent une extension dédiée)
• accompagner vos développeurs pour développer leurs compétences et leur appétence pour la webperf.

Conclusion

En tant qu’expert WebPerf, nous sommes les plus consommateurs de ces tests de performances JavaScript. En somme, MilleCheck.ai nous donne les clés pour déceler et résoudre les problèmes de performance liés à JavaScript, vous permettant ainsi d’offrir une expérience utilisateur fluide et agréable à vos utilisateurs.

N’attendez plus pour libérer

tout le potentiel de votre site web !

Testez MilleCheck gratuitement

et découvrez instantanément les axes d’amélioration de votre site.

Ou

Contactez-nous

pour planifier un diagnostic gratuit de votre site avec un de nos experts.