Pour être honnête, j'ai été un peu contrarié lorsque j'ai été informé que ce service est à usage interne et non public. Cela signifiait que mes outils goto habituels pour évaluer les performances Web n'étaient pas disponibles. À savoir:
Cela m'a donné une idée: comment tester les services et produits internes? Dans cet article, je vais essayer de le découvrir.
La condition la plus importante pour des systèmes internes rapides
Comme nous le savons tous, le monde a considérablement changé en raison de la pandémie mondiale . En raison des verrouillages généralisés, tous ceux qui en ont eu l'opportunité ont commencé à travailler à domicile. Cela a eu un impact significatif sur les performances d'Internet dans le monde entier et a entraîné un trafic élevé et une augmentation des temps de téléchargement. Pour cette raison, tous les outils dont les employés ont besoin pour faire leur travail doivent se charger rapidement et être interactifs.
Auparavant, il n'y avait pas de tels problèmes de performances car les utilisateurs internes travaillaient depuis le bureau et utilisaient un réseau local (LAN). Le problème est aggravé par le fait que beaucoup vivent dans de petites villes avec des connexions Internet lentes et instables. Ou, au contraire, dans les villes à fort coefficient de concurrence (taux de contention). Puisque nous parlons de systèmes internes, la plupart du temps, les employés doivent utiliser un VPN pour accéder au réseau du bureau. Mais ce n'est pas non plus très pratique: le VPN ralentit souvent la vitesse d'Internet .
Il est important de se rappeler que les employés sont également des utilisateurs. Par conséquent, assurez-vous d'optimiser également vos systèmes internes, car les mauvaises performances des applications Web affectent négativement le travail des employés. Quels outils utiliser si les systèmes internes sont généralement privés? Nous en reparlerons plus loin.
WebPageTest
La première chose que je voudrais clarifier est que lorsque vous testez des systèmes internes, vous ne pourrez pas utiliser la version open source de WebPageTest . Mais vous pouvez en définir un privé. Grâce à cela, il sera possible de l'utiliser sur le réseau interne.
Après le lancement, l'accès à une énorme quantité de données pour tous les systèmes internes s'ouvrira. Assurez-vous de lire le guide pour obtenir autant d'informations que possible du WebPageTest. Configurer votre propre version n'est pas aussi difficile qu'il y paraît. Il existe d'excellents tutoriels sur la façon de le configurer vous-même sur AWS en quelques minutes:
- Instances privées WebPagetest en cinq minutes - Patrick Meenan
- Un guide étape par étape pour configurer une instance de WebPageTest privé à AutoScaling - Robin Osborne
- Instances privées WebPageTest sur AWS - Peter Hedenskog
- Configuration d'une instance privée WebPageTest `` tout-en-un '' - Andy Davies
Cette option permettra au WebPageTest de s'exécuter automatiquement. Cela peut être fait de plusieurs manières:
- Falco - un coureur Open Source WebPageTest
- Automatiser WebPageTest via l'API WebPageTest - Robin Osborne
- Testeur en vrac WebPageTest - Andy Davies
De cette façon, vous pouvez suivre l'impact sur les performances (positif ou négatif) des nouvelles modifications du système.
Phare
Le prochain outil goto que vous avez probablement déjà est le phare de Google. Si vous avez installé une copie de Google Chrome sur votre ordinateur, utiliser Lighthouse pour auditer votre système interne est très simple:
dans l'onglet DevTools, recherchez «Lighthouse» et cliquez sur «Generate report».
Une minute après le lancement, l'audit renverra le résultat, comme le montre l'image ci-dessus. Je recommande vivement de configurer un nouveau profil Chrome spécifiquement pour tester Lighthouse, car les extensions de navigateur peuvent avoir un impact négatif sur les performances (en fonction de ce qu'elles font exactement sur la page).
Mais Lighthouse n'est pas seulement un tableau de bord d'audit. Voici quelques autres façons d'utiliser cet outil:
Vous pouvez exécuter Lighthouse à l'aide de l' interface de ligne de commande (CLI)
Vous pouvez facilement exécuter Lighthouse sur toutes les pages de votre site .
Comparez les performances avant et après avec Lighthouse CI Diff
Exécutez automatiquement Lighthouse à intervalles réguliers sur plusieurs sites en exécutant des tests .
Ajoutez votre propre audit pour surveiller des parties spécifiques du site
Partagez les résultats via Github Gist et Lighthouse Report Viewer .
Sitespeed.io
J'ai mis Sitespeed.io à l'une des premières places de cette liste car je le trouve sous-estimé par beaucoup. C'est un merveilleux ensemble d'outils pour améliorer les performances du site Web. Il peut être configuré rapidement et facilement avec une simple commande
docker
ou
npm
. De plus, Sitespeed.io est facile à exécuter sur votre machine locale pour des tests rapides.
Avec sitespeed.io, vous pouvez suivre en continu autant de pages que nécessaire en envoyant des données à Graphite / Grafana pour obtenir des tableaux de bord comme celui-ci . Fondamentalement, Sitespeed.io est l'ensemble d'outils suivant:
- Coach est un outil automatisé qui vous aide à augmenter la vitesse de chargement de votre page.
- Browsertime est l'outil principal de Sitespeed . Il interagit avec les navigateurs de test (par exemple Chrome, Firefox, iOS Safari) et collecte des mesures de performances, des images, des vidéos, etc.
- PageXray est utilisé pour convertir des fichiers d'archive HTTP (HAR) en JSON pour faciliter la lecture et l'utilisation. (En savoir plus sur les fichiers HAR ci-dessous)
- Throttle est un outil de ligne de commande pour limiter la connectivité réseau pour les tests de performances.
Remarque: Throttle bloque la connexion Internet sur l'ensemble de l'ordinateur, alors n'oubliez pas de l'éteindre lorsque vous arrêtez.
- Compare est un outil en ligne permettant de comparer rapidement et facilement des fichiers HAR (par exemple avant et après).
DevTools dans Chrome
Tous les navigateurs modernes ont déjà des outils de développement intégrés. Nous avons parcouru un long chemin depuis Firebug dans Firefox . Plus important encore, les DevTools deviennent de plus en plus puissants avec chaque nouvelle version du navigateur. C'est pratique pour les développeurs et les utilisateurs, car il devrait y avoir moins de bogues sur les sites, non? Ha!
L'image ci-dessus montre les informations détaillées qu'un audit des performances d' une page Web peut fournir ( onglet Performances ). Mais Chrome DevTools, en plus de l'onglet de mesure des performances, possède de nombreuses autres fonctionnalités:
- L'onglet réseau vous donne des informations détaillées sur toutes les demandes (et réponses) dans le navigateur.
- Vous pouvez collecter des informations complètes sur l'utilisation de la mémoire , ainsi que sur la manière de corriger les bogues qu'elle contient .
- Trouvez du CSS et du JavaScript inutilisés sur une page à l'aide de l' onglet Couverture .
- Lisez un article détaillé sur l' analyse des performances dans DevTools qui couvre de nombreux autres aspects.
Et si vous recherchez des articles non-Google sur ce sujet, consultez ceux-ci:
- Profilage des performances de React avec React 16 et Chrome Devtools - Ben Schwarz
- Débogage des performances Web avec l'onglet Réseau Chrome DevTools - DebugBear
- Débogage des fuites de mémoire JavaScript à l'aide de Chrome DevTools - DebugBear
DevTools dans Firefox
Il existe d'autres navigateurs qui peuvent vous aider à évaluer les problèmes de performances à l'aide de DevTools. Je suis un utilisateur de Firefox, j'utilise donc régulièrement les outils de ce navigateur. Firefox dispose également d'un ensemble complet d'onglets que vous pouvez utiliser pour rechercher des problèmes sur votre site:
Vous pouvez utiliser ces outils pour:
- Identifier et déboguer du JavaScript complexe sur une page.
- Visualisation facile des types de ressources sur une page avec des caches froids et chauds.
- Vérifie le site pour les problèmes d'accessibilité (Firefox a un grand ensemble d'outils utiles ).
Bibliothèques pour étendre les données analytiques
Cela peut ne pas fonctionner avec les outils internes, mais si vous suivez l'utilisation à l'aide d'analyses (telles que Google Analytics, Fathom, Matomo), vous pouvez étendre les données collectées pour inclure des informations plus complètes sur les performances Web.
Plusieurs bibliothèques que vous pouvez utiliser:
- Perfume.js peut être configuré pour collecter un grand ensemble de données RUM pour le transfert vers un outil d'analyse.
- Analytics - Le plugin Perfume.js est un wrapper pour Perfume.js pour pousser facilement les données de performance Web dans divers outils d'analyse.
- web-vitals capture avec précision les informations Core Web Vitals, tout comme les autres Web Vitals .
Perfume.js se distingue des autres outils par la quantité de données collectées Real User Monitoring (RUM). Il peut être entièrement personnalisé pour collecter autant que vous en avez besoin. Voici quelques tutoriels sur la façon de procéder:
- Première peinture (satisfaite) avec une touche de parfum (.js) - Leonardo Zizzamia
- Temps d'interactivité avec RUM - Leonardo Zizzamia
- Vidéo: Amélioration des performances Web du site avec Perfume.js + Analytics
Analyse JavaScript
Cet article ne couvre pas JavaScript en interne, même si je pense que minimiser son utilisation peut améliorer les performances Web et la stabilité globale . Mais si vous utilisez JavaScript, essayez de l'optimiser autant que possible.
Heureusement, il existe de nombreux outils pour cela:
- bundle-wizard - Outil CLI pour créer des visualisations d'un bundle JavaScript (voir l'image ci-dessus) afin que vous puissiez supprimer tout ce dont vous n'avez pas besoin.
- Bundle Phobia - Découvrez combien il vous en coûtera pour ajouter un package npm à votre bundle.
- Webpack Bundle Analyzer - Visualisez la structure interne des fichiers de sortie Webpack avec cet outil de carte évolutif interactif.
- source-map-explorer - Utilisez les cartes source pour analyser le code JavaScript gonflé (cet outil fonctionne également avec Sass et LESS pour analyser le CSS).
Des cadres spéciaux d'analyse d'outils et d'articles sont également disponibles:
- reactopt - Un outil d'optimisation des performances CLI de React - détermine si la page doit être restituée.
- TracerBench est un outil de test de performances surveillé pour les applications Web. Fournit une analyse claire, exploitable et pratique des différences de performances.
- Application React Performance - DebugBear
Analyse CSS
Outre l'onglet Couverture mentionné précédemment dans Chrome DevTools, il existe également des outils que vous pouvez exécuter via l'interface de ligne de commande (CLI). Ils analyseront le CSS compte tenu de sa complexité et identifieront également les sélecteurs inutilisés sur le site Web:
- analy-css est un analyseur de complexité et de performances de sélecteur CSS qui s'exécute à partir de l'interface de ligne de commande.
- uCSS - Parcourez l' ensemble du site à la recherche de sélecteurs CSS inutilisés qui peuvent ensuite être supprimés.
Mesure des performances du serveur
La règle d'or de la performance est la suivante: 80 à 90% du temps qu'un utilisateur passe sur le front-end.
C'est toujours une bonne idée de s'assurer que le backend / serveur est optimisé. Après tout, «le temps jusqu'au premier octet est important» .
Il est également important de s'assurer que le serveur peut continuer à fonctionner sous une charge élevée si jamais il le fait. Il existe un certain nombre d'outils qui peuvent vous aider à faire ces deux choses:
- httpstat est un petit script Python pour visualiser les données de temps de connexion renvoyées par curl (voir l'image ci-dessus).
- h2load est un outil d'interface de ligne de commande pour tester HTTP / 2 et HTTP / 1.1.
- Hey — .
- k6 — , JavaScript. API CLI.
- Server- — , -. - .
Puppeteer
Puppeteer est une bibliothèque de nœuds qui fournit une API de haut niveau pour contrôler Chrome ou Chromium à l'aide du protocole DevTools. La plupart des choses que vous faites manuellement dans un navigateur peuvent être reproduites avec Puppeteer. Comment cela peut-il être utilisé pour les tests de performances Web? Addy Osmani a écrit un article de blog sur l'utilisation de Pupperteer pour les tests de performances Web et a également partagé le code sur Github. Ces tests peuvent être facilement exécutés via l'interface de ligne de commande pour tester les sites Web internes et externes:
Extensions de navigateur
Il existe de nombreuses extensions de navigateur qui peuvent être utilisées pour mesurer les performances Web. Je recommanderais d'utiliser un profil séparé avec un minimum d'extensions incluses lorsque vous les lancez. En effet, certaines extensions de navigateur interagissent avec la page et peuvent dégrader les performances, entraînant des résultats incorrects. Vous pouvez utiliser les extensions suivantes:
- sloth est une extension qui ralentit le processeur et le réseau dans le navigateur, ce qui facilite la simulation des performances de page sur des appareils plus lents.
- Perfmap - Lors de l'utilisation de cette extension, le navigateur crée une carte thermique des ressources chargées dans le navigateur et de leur impact sur les performances individuelles en fonction de l' API Resource Timing .
- L'extension Chrome Web Vitals est une extension Chrome qui affiche les métriques de base de Web Vitals (LCP, CLS, FID) pour toutes les pages que vous visitez. Remarque: cela sera bientôt intégré aux Chrome DevTools, il est maintenant disponible dans Canary .
- perf-diagnostics.css n'est pas vraiment une extension de navigateur, mais plutôt un tas de CSS que vous pouvez ajouter à votre page pour résoudre les problèmes de performances courants. Un moyen simple et efficace de mettre en évidence des images sans attribut largeur / hauteur, parmi un certain nombre d'autres.
Il existe également des extensions conçues spécifiquement pour améliorer les performances lors de l'utilisation de certains frameworks JavaScript:
- React Developer Tools — «Profiler» DevTools, React.
- Angular Augury — Chrome Firefox, Angular.
- Ember Inspector — -, Ember.
Network Throttling
La limitation du réseau est un moyen de ralentir une connexion réseau. Il est important de comprendre que de nombreux utilisateurs n'auront pas de connexions haut débit rapides et stables dans une grande ville. D'autres, par contre, peuvent se trouver dans des zones rurales où le haut débit et la puissance du signal mobile sont très faibles. En limitant votre propre connexion réseau, vous obtenez un aperçu des performances du site pour les utilisateurs dans cet environnement réseau spécifique.
Vous pourriez vous demander: "Pourquoi voudrais-je bloquer mon réseau lorsqu'il est intégré aux Chrome DevTools?" Il est important de comprendre que toutes les méthodes de régulation de réseaufonctionnent de la même manière. La limitation avec Chrome DevTools applique un délai au niveau du navigateur pour chaque réponse. Lighthouse exécute le test à pleine vitesse, puis simule la vitesse de connexion, sacrifiant la précision au profit de la vitesse des messages. Les outils suivants sont beaucoup plus précis. Ils utilisent la limitation du réseau au niveau du système d'exploitation qui fonctionne à un niveau beaucoup plus bas.
Remarque: ces outils ci-dessous régulent la connexion sur l'ensemble de l'ordinateur, alors assurez-vous de fermer les applications inutiles lors du test, et désactivez également la limitation une fois terminé!
J'utilise toujours
throttle
car c'est assez simple:
# Enable 3G Slow
throttle 3gslow
# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250
# Disable throttle
throttle --stop
Analyse des fichiers HAR
J'ai mentionné les fichiers HTTP Archive (HAR) plus tôt dans cet article. Ces fichiers vous permettent d'enregistrer l'interaction réseau des navigateurs Web avec un site Web. L'avantage de ces fichiers est que vous pouvez les utiliser pour tout site accessible via un navigateur (interne ou externe). Les trouver est assez facile dans les outils de développement Firefox et Chrome:
Firefox
Chrome
Il existe d'autres outils que vous pouvez utiliser pour afficher et analyser:
- L'analyseur HAR est un outil d'analyse HAR basé sur un navigateur de Google.
- L'analyseur HAR en ligne de commande YSlow est un service assez ancien, mais il peut analyser les fichiers HAR pour améliorer les performances.
- PageXray — HAR JSON, ( Sitespeed.io).
- Compare — -, HAR (, “” “”).
- HAR Viewer — - HAR .
- Charles Proxy — HTTP- / HTTP-, HAR .
- Fiddler — -, , -. HAR.
Web APIs
Pour en revenir aux fonctionnalités natives du navigateur, il existe plusieurs API que vous pouvez utiliser pour mesurer vous-même les performances du site, sans utiliser de bibliothèques.
- performance.now () - La méthode d'
now()
interface de performance du navigateur renvoie un horodatage de haute précision à partir du moment où la méthode a été appelée. Il permet de mesurer très facilement le temps entre 2 appels. Les ajouter avant et après un morceau de code spécifique vous permettra de le mesurer et de l'optimiser. - Navigation Timing - Cette API permet aux développeurs de collecter des données de synchronisation associées à la navigation dans les documents.
- Minutage des ressources - Cette API permet aux développeurs de collecter des informations de minutage complètes pour les ressources chargées par le document.
- Évaluation des performances de chargement dans la vie réelle avec la navigation et la synchronisation des ressources - Jeremy Wagner - Un article très détaillé sur la façon dont les deux API ci-dessus peuvent être utilisées pour mesurer les performances de chargement des pages Web.
Résultats
Espérons que dans les outils répertoriés dans cet article, vous trouverez ceux qui vous aideront à améliorer vos systèmes internes. Si un service ou un site Web est utilisé uniquement par les employés de l'entreprise, cela ne signifie pas qu'il n'a pas besoin d'être optimisé. Malgré le fait que de nombreuses personnes travaillent à distance ces jours-ci, tout le monde n'a pas une connexion rapide et stable. Par conséquent, n'oubliez pas que vous et vos collègues êtes également des utilisateurs!