MilleCheck : l’outil d’analyse de performance de site web nouvelle génération

Qu’est-ce que MilleCheck ?

MilleCheck est un outil d’analyse de performance (en terme de rapidité) de site web qui analyse les ressources utilisées sur un site internet (JavaScript, CSS, images, etc.) et identifie celles qui ont un impact sur sa vitesse de chargement et donc, sa performance web. Il fournit des informations détaillées sur le temps de réponse du serveur web, le taux de couverture (le taux code utilisé  par rapport au code non utilisé), le poids de toutes les ressources, leurs formats de compression (Gzip, Brotli,..), le temps de blocage durant lequel la page est “figée”, et le temps CPU de chaque ressource. Le tout en distinguant les ressources internes ou  first-party (qui sont sous votre contrôle direct) et externes ou third-party (dépendant de services tiers).

Pourquoi utiliser MilleCheck ?

• Améliorer l’expérience utilisateur : en identifiant et en corrigeant les problèmes de performance, MilleCheck vous aide à offrir une expérience utilisateur optimale, avec des temps de chargement rapides et une navigation fluide, et surtout limiter le taux de rebond.
• Optimiser votre référencement (SEO) : les moteurs de recherche, comme Google, privilégient les sites rapides et performants. MilleCheck vous permet d’améliorer votre positionnement dans les résultats de recherche en mesurant la vitesse du site mais aussi en identifiant les mots-clefs.
• Augmenter votre taux de conversion : un site e-commerce rapide et performant est plus susceptible d’inciter les visiteurs à effectuer des actions, comme passer une commande ou remplir un formulaire de contact.
• Réduire les coûts d’hébergement : en optimisant l’utilisation des ressources, MilleCheck peut vous aider à réduire vos coûts d’hébergement.

Comment fonctionne MilleCheck ?

MilleCheck fonctionne en analysant le code source de votre page web et en simulant le chargement des pages dans un navigateur en version mobile ou desktop. Il collecte des données sur les différentes ressources utilisées par la page et calcule des indicateurs de performance. Ces indicateurs sont ensuite présentés dans un rapport détaillé, qui vous permet d’identifier les optimisations possibles sur votre site internet.

Les avantages de MilleCheck

Quels sont les avantages de  cet outil d’analyse de performance de site web ?

• Simple d’utilisation : MilleCheck est très facile à utiliser, même pour les personnes qui ne sont pas familiarisées avec les aspects techniques du web.
• Complet : il analyse un grand nombre de critères de performance et fournit des recommandations concrètes pour améliorer votre site web.
• Data visualisation : l’outil utilise un grand nombre de data visualisation permettant d’identifier rapidement les points d’amélioration.
• Francophone : MilleCheck est un outil francophone, ce qui facilite son utilisation pour les utilisateurs français.

Un rapport basé sur un triptyque fonctionnel

Un rapport MilleCheck est découpé de prime abord en 2 zones distinctes.

Les indicateurs à suivre

Dans la bande supérieure sur fond sombre, les indicateurs à suivre. Pour le moment essentiellement axé web performance (ils pourront évoluer dans le temps), cette première partie se compose de 3 parties :

• La performance mesurée
  • avec les indicateurs chers à Google : LCP, TBT, CLS, TTFB et SpeedIndex
  • mais aussi le ratio de responsabilité de la perf entre le code first party (1P) et le code des services externes autrement nommées Tierces parties (3P). Le tout calculé via une formule d’Impact WebPerf© conçue par artwaï.
• L’EcoIndex avec les composantes de son calcul, à savoir le nombre d’éléments dans le DOM, le poids et le nombre de requêtes.
• Le résumé des notes relatives aux bonnes pratiques de web performance.

Les bonnes pratiques

Dans la partie inférieure sur fond clair, on retrouve la liste des bonnes pratiques classées en 5 catégories : Performance, Éco Conception, Accessibilité, SEO et Sécurité. Chaque catégorie et sous catégorie dispose de sa propre note.

Chaque bonne pratique dispose d’une évaluation représentée sur une échelle à partir de laquelle une note entre 0 et 100 est établie. De plus, chaque bonne pratique dispose d’une documentation et de liens de référence pour permettre au développeur d’appréhender les solutions à d’éventuels problèmes. Bien sûr, toutes ces recommandations font consensus auprès des grands acteurs du marché et des spécialistes comme Google, LightHouse, Page Speed, WebPageTest, le W3C, etc

L’outil d’analyse de performance de site web augmenté !

Issues du travail des équipes d’artwaï, les vues complémentaires apportent des “vues” pour analyser de manière synthétique ou détaillée différents points d’attention. L’idée étant de permettre aux utilisateurs de MilleCheck de :

• mesurer où placer leur effort de correction ou d’évolution technique,
• comment résoudre un point particulier,
• ou relever une anomalie de manière plus visuelle.

Liste des vues complémentaires

Fruit du travail conjoint avec l’agence Polux, nous avons amélioré la navigation en mettant en place un accès rapide à toutes ces vues et même à toute partie du rapport.

1. Filmstrip :  Capture d’images séquentielles du chargement de la page, comme une bande de film, visualisant la progression du rendu et les décalages de pixels.
2. Vidéo : Enregistrement vidéo du chargement de la page, montrant le rendu en temps réel et potentiellement les interactions utilisateur.
3. Performance mesurée : Indicateurs clés de performance (KPIs) mesurés lors du chargement, comme le temps de chargement complet, le temps de rendu, etc.
4. Score Lighthouse : Note attribuée par l’outil d’analyse Lighthouse de Google, évaluant la qualité de site web selon divers critères de performance, accessibilité, etc.
5. Temps de traitement : Liste des temps de traitements par type de tâches du navigateur (Parse, Layout, Scripting…)
6. Impact WebPerf First vs Third Parties : Comparaison de l’impact sur la performance entre les ressources internes au site et celles provenant de tiers (ex: scripts externes).
7. Impact WebPerf par entités :  Évaluation de l’impact de chaque type de ressource (images, scripts, CSS) sur la performance globale.
8. Liste des domaines : Inventaire de tous les noms de domaine contactés lors du chargement de la page (utile pour identifier les dépendances externes).
9. Empreinte environnementale : Estimation de l’impact environnemental du chargement de la page (consommation d’énergie, émissions de CO2) basé sur l’Ecoindex.
10. Hébergements écoresponsables : Listes d’hébergements  web utilisés dans la page ayant une démarche écologique ou non (serveurs alimentés par énergies renouvelables, etc.).
11. Analyse du poids : Détail du poids total de la page et de ses composants (HTML, CSS, images, scripts), aidant à identifier les éléments lourds.
12. Analyse des requêtes :  Examen du nombre et du type de requêtes HTTP effectuées lors du chargement (utile pour optimiser le nombre de requêtes).
13. Poids vs requêtes : Visualisation de la relation entre le poids des ressources et le nombre de requêtes, pour trouver un équilibre optimal.
14. Liste des requêtes : Détail de toutes les requêtes HTTP avec leurs caractéristiques (URL, type, DNS, SSL, temps de réponse, mise en cache, etc.).
15. Waterfall : Diagramme en cascade visualisant le séquencement et la durée de chaque requête, mettant en évidence les goulots d’étranglement.
16. Request Map : Carte des requêtes montrant les relations entre les différentes ressources et les domaines, utile pour comprendre les dépendances.

17. Analyse du DOM : Examen de la structure du Document Object Model (DOM), pour révéler des problèmes de complexité ou d’efficacité.
18. Liste des éléments HTML : la liste des balises présentes dans la page HTML, avec leur nombre d’occurrences.
19. <head> order : Vérification de l’ordre des éléments dans la section <head> du HTML, comme les balises meta, impactant le rendu initial.
20. Validation W3C : Test de conformité du code HTML aux standards du W3C, garantissant la compatibilité entre navigateurs.
21. Liste des images : Répertoire de toutes les images chargées, avec leur poids, leurs dimensions, leur format (jpeg,webp, avif, svg …) pour optimiser leur taille. Mais aussi si elles sont affichées au dessus ou au dessous de la ligne de flottaison.
22. Analyse du JS : Examen du code JavaScript, incluant potentiellement la taille, la complexité et les bonnes pratiques.
23. Liste des fichiers JS : Inventaire des fichiers JavaScript chargés, avec leur poids (compression et minification) et leur emplacement et surtout les timings d’exécution identifiant les Blocking Times.
24. Console JavaScript : Affichage des erreurs et avertissements JavaScript remontés par le navigateur lors du chargement.
25. Accès DOM : Analyse des opérations d’accès et de manipulation du DOM par le JavaScript, pouvant ralentir le rendu.
26. Vulnérabilités du code JavaScript : Détection de failles de sécurité potentielles dans le code JavaScript.
27. Analyse du CSS : Examen du code CSS, incluant potentiellement la taille, la complexité et les bonnes pratiques.
28. Liste des fichiers CSS : Inventaire des fichiers CSS chargés, avec leur poids et leur emplacement.
29. Liste des polices : Répertoire des polices utilisées, avec leur format et leur poids, pour optimiser le chargement.
30. Liste des codes couleurs utilisés en CSS : Inventaire des couleurs utilisées dans le CSS, potentiellement utile pour l’analyse de la charte graphique.

31. Analyse du contenu : Évaluation du contenu textuel de la page.

32. Mots-Clefs : Liste des mots-clés présents dans le contenu, utile pour le référencement naturel (SEO).
33. Plan de page : Représentation structurée du contenu de la page, montrant la hiérarchie des titres et des sections.
34. Réseaux sociaux : Analyse de l’intégration des réseaux sociaux.
35. Schémas : Détection des données structurées (schémas) utilisées pour enrichir le contenu pour les moteurs de recherche.
36. Analyse des liens : Examen des liens internes et externes présents sur la page, incluant leur nombre et leur qualité pour évaluer le crawl.
37. Liste des liens sortants : Inventaire des liens pointant vers des domaines externes, utile pour l’analyse du netlinking.
38. Popularité : Indicateurs de popularité de la page fournis par Moz et Majestic.

Conclusion

MilleCheck est un outil d’analyse essentiel pour tout propriétaire de site web qui souhaite améliorer ses performances, son référencement, l’expérience utilisateur et même son empreinte environnementale. Sa simplicité d’utilisation, sa capacité d’analyse complète et ses fonctionnalités avancées de data visualisation en font un allié incontournable dans votre stratégie digitale.

Envie d’optimiser votre site web avec MilleCheck ?

Testez notre outil en ligne gratuitement ou demandez une démonstration.

Nos experts répondront à toutes vos questions et vous accompagneront pour améliorer la performance de votre site.