Panalyzer

Une extension pour visualiser le trafic réseau des pages web.

Sommaire

La raison d’être de Panalyzer

Pour piloter sereinement l’évolution technique de son service numérique, il faut mesurer. Régressions et progrès techniques peuvent s’évaluer selon que l’on consomme plus ou moins de ressources pour un même parcours utilisateur. Savoir d’où l’on part est alors essentiel pour savoir où l’on va.

Faire mieux avec moins est un bon objectif lorsque l’on souhaite écoconcevoir un logiciel.

Panalyzer ne vous donnera pas de solutions clés en main pour améliorer votre site ou votre application web (notre pôle écoconception, si), mais peut vous aider à y voir plus clair.

Et c’est déjà un bon début.

Présentation rapide de Panalyzer

Panalyzer, pour Page Analyzer, est un outil de restitution visuelle et neutre du trafic réseau d’une ou plusieurs pages web avec indicateurs d’impacts environnementaux. Il repose sur l’interprétation des journaux HAR (HTTP Archive) générés par les outils de développement des navigateurs web.

Panalyzer est développé par Julien Wilhelm et proposé gratuitement par Temesis.

Son code source est public.

Installation de Panalyzer

Panalyzer est une extension pour navigateur web validée par les magasins d’applications.

Obtenir l’extension sur Chrome :
- Visitez la page officielle du Chrome Web Store ;
- Cliquez sur le bouton « Ajouter à Google Chrome » pour installer.
Obtenir l’extension sur Firefox :
- Visitez la page officielle de Mozilla Add-ons ;
- Cliquez sur le bouton « Ajouter à Firefox » pour installer.

Une fois installé, Panalyzer est disponible dans les outils de développement du navigateur, dans un panneau qui lui est dédié.

Bon à savoir : Panalyzer ne collecte aucune information à votre sujet. Vous pouvez donc autoriser son exécution dans les fenêtres privées sans crainte.

Guide d’utilisation

Procédure type pour réaliser une mesure de type atterrissage avec les outils de développement

Pour obtenir des résultats fiables avec Panalyzer, il est nécessaire de savoir réaliser une mesure. Voici un pas-à-pas pour y parvenir avec le parcours utilisateur le plus simple possible (chargement initial d’une seule page sans interaction avec cette dernière) :

Désactivez toutes les autres extensions de votre navigateur web.
Affichez la page à mesurer dans l’onglet actif.
Pressez la touche F12 pour ouvrir les outils de développement.
Allez dans le panneau Réseau.
Cochez l’option Désactiver le cache.
Si la configuration d’origine a été modifiée :
- Désactivez les filtres pour tout lister (HTML, CSS, etc.),
- Réinitialisez l’ordre de tri de la cascade (le fichier HTML doit être la première ressource).
Défilez jusqu’au sommet de la page. Idéalement, configurer une vue adaptative.
Rafraîchissez la page à mesurer (touche CTRL+F5).
Attendez la fin du chargement de la page (absence de nouvelles requêtes réseau, affichage du temps de chargement load en pied du panneau Réseau).
Allez dans le panneau Panalyzer intégré aux outils de développement.
Cliquez sur l’option Importer Réseau.

Pas tout à fait à l’aise avec cette procédure ?
Formez-vous à nos côtés pour apprendre à réaliser une mesure fiable.

Interface utilisateur

L’interface utilisateur de Panalyzer est maintenant divisée en deux zones.

Volet latéral gauche (pour la configuration)

Options :
- Importer Réseau, pour importer les données depuis le trafic réseau (import multiple possible). Se référer à la procédure type pour générer la mesure préalable à l’activation de ce bouton.
- Importer JSON, pour importer des données préalablement exportées avec Panalyzer (import multiple possible).
- Exporter HTML, pour générer une version autonome de l’application (lisible sur tout navigateur web récent, y compris sans connexion Internet).
- Exporter JSON, pour exporter des données en vue par exemple d’une réutilisation ultérieure avec Panalyzer.
- Tout fermer, pour effacer les données à l’écran.
Contexte de la mesure, pour détailler le contexte utilisateur appliqué à la mesure. Les informations saisies dans ce formulaire sont essentielles, car elles rendent la mesure reproductible. Elles vont par ailleurs avoir une incidence sur le calcul des impacts environnementaux.
Échantillon, pour supprimer des pages de l’échantillon ou éditer leur temps d’usage respectif exprimé en millisecondes. Par défaut, le temps de chargement des pages est automatiquement renseigné (durée de déclenchement de l’évènement load). Cette valeur doit parfois être ajustée, c’est selon le parcours utilisateur réalisé. Par exemple, pour une mesure de type atterrissage, le temps de chargement est la valeur à conserver. En revanche, pour une mesure de type survol, le temps de chargement initial ne suffit pas, il faut y ajouter la durée du défilement vertical réalisé manuellement.

Contenu principal (pour les résultats)

À propos de la page n°X : rappel de l’URL et du temps d’usage retenu pour la page X.
Impacts estimés (usage seul) : estimation de la consommation énergétique à l’usage de la page et des émissions de gaz à effet de serre qui en découlent selon différents facteurs. À ce sujet :
- Pour la consommation électrique : formule selon le 1byte-Model, The Shift Project, 2018 (format XLSX, 17 Ko, en anglais) ;
- Pour les émissions gaz à effet de serre : facteurs d’émission selon étude European Residual Mixes, Association of Issuing Bodies, 2021 (format PDF, 1 Mo, en anglais).
Statistiques : le détail du trafic réseau pour une page donnée (ressources par types, en quantité et en pourcentage). On y retrouve, sous forme graphique et tableau :
- Nombre de requêtes réseau ;
- Données transférées ;
- Données décodées.
Liste des ressources : la liste complète des ressources chargées par la page, avec tri possible.
Notes : des informations pour mieux comprendre comment fonctionne Panalyzer.

Foire aux questions

Peut-on cumuler plusieurs mesures avec Panalyzer, par exemple pour des pages différentes ?

Bien sûr !

Du moment que vous ne fermez pas les outils de développement, vous pouvez empiler autant de mesures que vous le souhaitez avec Panalyzer.

En pratique, vous allez suivre la procédure type pour la toute première mesure puis pour chaque nouvelle mesure :

Valider l’URL suivante dans la barre d’adresse du navigateur web (ou sélectionner un favori) ;
Attendre la fin du chargement de cette nouvelle page (ne pas hésiter à basculer sur le panneau Réseau pour vérifier que le chargement de la page est terminé) ;
Cliquer à nouveau sur le bouton Importer réseau, côté Panalyzer, pour ajouter la page à la suite de la précédente.

Vous pouvez aussi, si vous disposez déjà d’un export Panalyzer de ce format, ajouter une nouvelle page à l’échantillon avec le bouton Importer JSON.

Attention toutefois.

Les indicateurs d’impacts environnementaux sont automatiquement calculés selon le type de terminal, la connexion et le temps d’usage. Ce dernier est éditable indépendamment, pour chaque page de l’échantillon. Cependant, le contexte utilisateur global reste partagé. Si plusieurs pages sont ouvertes dans Panalyzer, il faut veiller à ce que le contexte utilisateur soit le même pour toutes les mesures sinon les indicateurs calculés peuvent être faux !

Bref : ne mélangez jamais les contextes utilisateur !

Peut-on préciser des contextes utilisateur différents dès lors que plusieurs mesures sont ouvertes en même temps ?

Non. D’où l’avertissement dans la question précédente.

Peut-on réaliser des parcours multipage avec Panalyzer ?

Oui, mais il ne vaut mieux pas, car c’est assez faillible.

Cela tient à comment fonctionnent les outils de développement des navigateurs web.

Lors d’une navigation multipage, Chrome isole chaque page et ses ressources séparément dans le journal HAR, ce qui permet une meilleure restitution du parcours utilisateur. Ce n’est pas le cas avec Firefox.

Certaines ressources peuvent dans tous les cas être exclues si leur page d’origine (valeur optionnelle de la spécification du format) n’est pas identifiée dans le journal HAR.

Pourquoi ne pas avoir utilisé L’API Performance pour obtenir les informations du trafic réseau ?

L’API Performance dispose d’un accès restreint aux informations des ressources cross-origin, ce qui aurait offert une vision bien incomplète du trafic réseau. Le journal HAR ne souffre pas de cette limitation, voilà pourquoi il lui est préféré.