Clever Geek Handbook

Warum ist die Webleistung von Back-End-Systemen wichtig und muss optimiert werden?

Eines Tages hatte ich ein interessantes Gespräch mit dem Support- Team des Department of International Trade (DIT) . Sie wollten die Leistung einer ihrer Webanwendungen verbessern. So zu reden ist das, was mir in meiner aktuellen Position am besten gefällt. Ich spreche über Themen, die mich interessieren, lerne neue Leute kennen und erzähle ihnen von Möglichkeiten, die sie möglicherweise nicht kennen, zum Beispiel, wie sie die Benutzeroberfläche einer Anwendung verbessern können.



Um ehrlich zu sein, war ich ein wenig verärgert, als ich informiert wurde, dass dieser Service für den internen Gebrauch und nicht öffentlich ist. Dies bedeutete, dass meine üblichen Goto-Tools zur Bewertung der Webleistung nicht verfügbar waren. Nämlich:





Dies brachte mich auf eine Idee: Wie können Sie interne Services und Produkte testen? In diesem Artikel werde ich versuchen, es herauszufinden.



Die wichtigste Voraussetzung für schnelle interne Systeme



Wie wir alle wissen, hat sich die Welt aufgrund der globalen Pandemie erheblich verändert . Aufgrund der weit verbreiteten Sperren begannen alle, die die Gelegenheit hatten, von zu Hause aus zu arbeiten. Dies hat die Leistung des Internets weltweit erheblich beeinflusst und zu hohem Datenverkehr und längeren Downloadzeiten geführt. Aus diesem Grund müssen alle Tools, die Mitarbeiter benötigen, um ihre Arbeit zu erledigen, schnell geladen und interaktiv sein.



Bisher gab es keine derartigen Leistungsprobleme, da interne Benutzer vom Büro aus arbeiteten und ein lokales Netzwerk (LAN) verwendeten. Das Problem wird durch die Tatsache verschärft, dass viele in kleinen Städten mit langsamen und instabilen Internetverbindungen leben. Oder im Gegenteil in Städten mit einem hohen Wettbewerbskoeffizienten (Konkurrenzquote). Da es sich um interne Systeme handelt, müssen Mitarbeiter meistens ein VPN verwenden , um in das Büronetzwerk zu gelangen. Dies ist aber auch nicht sehr praktisch: VPN verlangsamt häufig die Internetgeschwindigkeit .



Es ist wichtig, sich daran zu erinnern, dass Mitarbeiter auch Benutzer sind. Stellen Sie daher sicher, dass Sie auch Ihre internen Systeme optimieren, da eine schlechte Leistung von Webanwendungen die Arbeit der Mitarbeiter negativ beeinflusst . Welche Tools sind zu verwenden, wenn interne Systeme normalerweise privat sind? Wir werden weiter darüber sprechen.



WebPageTest



Als erstes möchte ich klarstellen, dass Sie beim Testen interner Systeme die Open Source- Version von WebPageTest nicht verwenden können . Sie können jedoch eine private festlegen. Dank dessen ist es möglich, es im internen Netzwerk zu verwenden.







Nach dem Start wird der Zugriff auf eine große Datenmenge für alle internen Systeme geöffnet. Lesen Sie unbedingt die Anleitung , um so viele Informationen wie möglich vom WebPageTest zu erhalten. Das Einrichten einer eigenen Version ist nicht so schwierig, wie es sich anhört. Es gibt einige großartige Tutorials, wie Sie es in wenigen Minuten selbst auf AWS einrichten können:





Mit dieser Option kann der WebPageTest automatisch ausgeführt werden. Dies kann auf verschiedene Arten erfolgen:





Auf diese Weise können Sie die (positiven oder negativen) Auswirkungen neuer Systemänderungen auf die Leistung verfolgen.



Leuchtturm



Das nächste Goto-Tool, das Sie wahrscheinlich bereits haben, ist Googles Leuchtturm . Wenn Sie eine Kopie von Google Chrome auf Ihrem Computer installiert haben, ist die Verwendung von Lighthouse zum Überprüfen Ihres internen Systems sehr einfach:







Suchen Sie auf der Registerkarte DevTools nach "Lighthouse" und klicken Sie auf "Bericht erstellen".







Eine Minute nach dem Start gibt das Audit das Ergebnis zurück, wie in der Abbildung oben gezeigt. Ich empfehle dringend, ein neues Chrome-Profil speziell zum Testen von Lighthouse einzurichten, da Browsererweiterungen die Leistung beeinträchtigen können (je nachdem, was genau sie auf der Seite tun).



Lighthouse ist jedoch nicht nur ein Audit-Dashboard. Hier sind einige andere Möglichkeiten, wie Sie dieses Tool verwenden können:



Sie können Lighthouse über die Befehlszeilenschnittstelle ( Command Line Interface, CLI)



ausführen. Sie können Lighthouse problemlos auf allen Seiten Ihrer Site ausführen .



Vergleichen vor und nach der Leistung mit Lighthouse CI Diff



Führen Sie Lighthouse automatisch in regelmäßigen Abständen an mehreren Standorten aus, indem Sie Tests ausführen .



Fügen Sie Ihr eigenes Audit hinzu , um bestimmte Teile der Site zu überwachen



Teilen Sie die Ergebnisse über Github Gist und Lighthouse Report Viewer .



Sitespeed.io



Ich habe Sitespeed.io auf einen der Top-Plätze dieser Liste gesetzt, weil ich finde, dass es von vielen unterschätzt wird. Es ist eine wunderbare Reihe von Tools zur Verbesserung der Website-Leistung. Es kann schnell und einfach mit einem einfachen Befehl docker



oder konfiguriert werden npm



. Außerdem kann Sitespeed.io zum schnellen Testen einfach auf Ihrem lokalen Computer ausgeführt werden.







Mit sitespeed.io können Sie kontinuierlich so viele Seiten verfolgen, wie Sie benötigen, indem Sie Daten an Graphite / Grafana senden, um solche Dashboards zu erhalten . Grundsätzlich handelt es sich bei Sitespeed.io um die folgenden Tools:



  • Coach ist ein automatisiertes Tool, mit dem Sie die Geschwindigkeit beim Laden von Seiten erhöhen können.
  • Die Browsertime ist das Hauptwerkzeug von Sitespeed . Es interagiert mit Testbrowsern (z. B. Chrome, Firefox, iOS Safari) und sammelt Leistungsmetriken, Bilder, Videos und mehr.
  • PageXray wird verwendet, um HTTP-Archivdateien (HAR) in JSON zu konvertieren, um das Lesen und Verwenden zu vereinfachen. (Lesen Sie unten mehr über HAR-Dateien)
  • Throttle ist ein Befehlszeilenprogramm zum Drosseln der Netzwerkkonnektivität für Leistungstests.


Hinweis: Throttle blockiert die Internetverbindung auf dem gesamten Computer. Denken Sie also daran, sie beim Herunterfahren auszuschalten.



  • Compare ist ein Online-Tool zum schnellen und einfachen Vergleichen von HAR-Dateien (z. B. vorher und nachher).


DevTools in Chrome



Alle modernen Browser verfügen bereits über integrierte Entwicklertools. Wir haben seit Firebug in Firefox einen langen Weg zurückgelegt . Vor allem werden DevTools mit jeder neuen Version des Browsers leistungsfähiger. Dies ist sowohl für Entwickler als auch für Benutzer praktisch, da auf den Websites weniger Fehler auftreten sollten, oder? Ha!







Das obige Bild zeigt die detaillierten Informationen, die eine Webseiten-Leistungsprüfung liefern kann ( Registerkarte Leistung ). Chrome DevTools bietet neben der Registerkarte "Leistungsmessung" noch viele weitere Funktionen:





Wenn Sie zu diesem Thema nach Artikeln suchen, die nicht von Google stammen, lesen Sie diese:





DevTools in Firefox



Es gibt andere Browser, mit denen Sie Leistungsprobleme mithilfe von DevTools bewerten können. Ich bin ein Firefox-Benutzer und verwende daher regelmäßig die Tools dieses Browsers. Firefox verfügt außerdem über eine Reihe von Registerkarten, mit denen Sie Probleme auf Ihrer Website finden können: Mit







diesen Tools können Sie:





Bibliotheken zum Erweitern von Analysedaten



Dies funktioniert möglicherweise nicht mit internen Tools. Wenn Sie jedoch die Nutzung mithilfe von Analysen verfolgen (z. B. Google Analytics, Fathom, Matomo), können Sie die gesammelten Daten um umfassendere Informationen zur Webleistung erweitern.







Mehrere Bibliotheken, die Sie verwenden können:





Perfume.js unterscheidet sich von anderen Tools durch die Menge der gesammelten Daten Real User Monitoring (RUM). Es kann vollständig angepasst werden, um so viel zu sammeln, wie Sie benötigen. Hier sind einige Tutorials, wie es geht:





JavaScript Analytics



Dieser Artikel behandelt JavaScript nicht intern, obwohl ich glaube, dass die Minimierung seiner Verwendung die Webleistung und die allgemeine Stabilität verbessern kann . Wenn Sie jedoch JavaScript verwenden, versuchen Sie, es so weit wie möglich zu optimieren.







Glücklicherweise gibt es dafür viele Tools:



  • Bundle-Assistent - CLI-Tool zum Erstellen von Visualisierungen eines JavaScript-Bundles (siehe Abbildung oben), damit Sie alles entfernen können, was Sie nicht benötigen.
  • Bundle-Phobie - Finden Sie heraus, wie viel es kostet, Ihrem Bundle ein npm-Paket hinzuzufügen.
  • Webpack Bundle Analyzer - Visualisieren Sie die interne Struktur von Webpack-Ausgabedateien mit diesem interaktiven skalierbaren Kartenwerkzeug.
  • Quelle-map-Explorer - Verwendung Quelle Karten aufgeblähten JavaScript - Code (dieses Tool auch mit Sass und weniger Parsen CSS funktioniert) zu analysieren.


Spezielle Frameworks für die Analyse von Tools und Artikeln sind ebenfalls verfügbar:



  • reactopt - Das CLI-Tool zur Leistungsoptimierung von React - bestimmt, ob die Seite neu gerendert werden muss.
  • TracerBench ist ein Tool zum Überwachen von Leistungstests für Webanwendungen. Bietet eine klare, umsetzbare und bequeme Analyse von Leistungsunterschieden.
  • React Performance App - DebugBear


CSS-Analyse



Neben der zuvor in Chrome DevTools erwähnten Registerkarte "Abdeckung" gibt es auch Tools, die Sie über die Befehlszeilenschnittstelle (Command Line Interface, CLI) ausführen können. Sie analysieren das CSS aufgrund seiner Komplexität und identifizieren nicht verwendete Selektoren auf der gesamten Website:



  • analyse-css ist ein CSS-Selektor-Komplexitäts- und Leistungsanalysator, der über die Befehlszeilenschnittstelle ausgeführt wird.
  • uCSS - Durchlaufen Sie die gesamte Site und suchen Sie nach nicht verwendeten CSS-Selektoren, die dann entfernt werden können.


Messung der Serverleistung



Die goldene Leistungsregel lautet: 80-90% der Zeit, die ein Benutzer am Front-End verbringt.



Es ist immer noch eine gute Idee, sicherzustellen, dass das Backend / der Server optimiert ist. Immerhin ist „Zeit bis zum ersten Byte wichtig“ .







Es ist auch wichtig sicherzustellen, dass der Server unter hoher Last weiter ausgeführt werden kann, falls dies jemals der Fall sein sollte. Es gibt eine Reihe von Tools, mit denen Sie beide Aufgaben ausführen können:



  • httpstat ist ein kleines Python-Skript zur Visualisierung der von curl zurückgegebenen Verbindungszeitdaten (siehe Abbildung oben).
  • h2load ist ein Befehlszeilenschnittstellentool zum Testen von HTTP / 2 und HTTP / 1.1.
  • Hey — .
  • k6 — , JavaScript. API CLI.
  • Server- — , -. - .


Puppeteer



Puppeteer ist eine Knotenbibliothek, die eine allgemeine API zur Steuerung von Chrome oder Chromium mithilfe des DevTools-Protokolls bereitstellt. Die meisten Dinge, die Sie manuell in einem Browser tun, können mit Puppeteer reproduziert werden. Wie kann dies für Webleistungstests verwendet werden? Addy Osmani schrieb einen Blog-Beitrag über die Verwendung von Pupperteer zum Testen der Webleistung und teilte den Code auch auf Github mit. Diese Tests können problemlos über die CLI ausgeführt werden, um sowohl interne als auch externe Websites zu testen:





Browser-Erweiterungen



Es gibt viele Browsererweiterungen, mit denen die Webleistung gemessen werden kann. Ich würde empfehlen, beim Starten ein separates Profil mit einem Minimum an enthaltenen Erweiterungen zu verwenden. Dies liegt daran, dass einige Browsererweiterungen mit der Seite interagieren und die Leistung beeinträchtigen können, was zu falschen Ergebnissen führt. Sie können die folgenden Erweiterungen verwenden:



  • sloth ist eine Erweiterung, die die CPU und das Netzwerk im Browser verlangsamt und es einfach macht, die Seitenleistung auf langsameren Geräten zu simulieren.
  • Perfmap - Bei Verwendung dieser Erweiterung erstellt der Browser eine Heatmap der in den Browser geladenen Ressourcen und ihrer individuellen Auswirkungen auf die Leistung gemäß der Resource Timing API .
  • Die Web Vitals Chrome-Erweiterung ist eine Chrome-Erweiterung , die Web Vitals-Kernmetriken (LCP, CLS, FID) für jede von Ihnen besuchte Seite anzeigt. Hinweis: Dies wird in Kürze in die Chrome DevTools integriert und ist jetzt in Canary verfügbar .
  • perf-diagnostics.css ist eigentlich keine Browsererweiterung, sondern eine Reihe von CSS, die Sie Ihrer Seite hinzufügen können, um häufig auftretende Leistungsprobleme zu beheben. Eine einfache und effektive Möglichkeit, unter anderem Bilder ohne ein Attribut width / height hervorzuheben.


Es gibt auch Erweiterungen, die speziell zur Verbesserung der Leistung bei Verwendung bestimmter JavaScript-Frameworks entwickelt wurden:







Network Throttling



Die Netzwerkdrosselung ist eine Möglichkeit, eine Netzwerkverbindung zu verlangsamen. Es ist wichtig zu verstehen, dass viele Benutzer in einer Großstadt keine schnellen und stabilen Breitbandverbindungen haben werden. Andere hingegen befinden sich möglicherweise in ländlichen Gebieten mit schlechtem Breitband und sehr schwacher mobiler Signalstärke. Indem Sie Ihre eigene Netzwerkverbindung drosseln, erhalten Sie Einblick in die Leistung der Site für Benutzer in dieser bestimmten Netzwerkumgebung.



Sie könnten fragen: "Warum sollte ich mein Netzwerk blockieren wollen, wenn es in die Chrome DevTools integriert ist?" Es ist wichtig zu verstehen, dass nicht alle Netzwerkregulierungsmethodenarbeiten auf die gleiche Weise. Durch das Drosseln mit Chrome DevTools wird für jede Antwort eine Verzögerung auf Browserebene angewendet. Lighthouse führt den Test mit voller Geschwindigkeit aus und simuliert dann die Verbindungsgeschwindigkeit, wobei die Genauigkeit der Nachrichtengeschwindigkeit beeinträchtigt wird. Die folgenden Tools sind viel genauer. Sie verwenden eine Netzwerkdrosselung auf Betriebssystemebene, die auf einer viel niedrigeren Ebene funktioniert.



Hinweis: Die folgenden Tools regeln die Verbindung über den gesamten Computer. Schließen Sie daher beim Testen unnötige Anwendungen und deaktivieren Sie die Drosselung, wenn Sie fertig sind!





Ich benutze immer, throttle



weil es ziemlich einfach ist: 



# Enable 3G Slow
throttle 3gslow

# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250

# Disable throttle
throttle --stop


HAR-Dateien analysieren



Ich habe bereits in diesem Artikel HTTP-Archivdateien (HAR) erwähnt. Mit diesen Dateien können Sie die Netzwerkinteraktion von Webbrowsern mit einer Website aufzeichnen. Das Tolle an diesen Dateien ist, dass Sie sie für jede Site verwenden können, auf die über einen Browser (intern oder extern) zugegriffen werden kann. In den Entwicklertools von Firefox und Chrome ist es ziemlich einfach, sie zu finden:



Firefox





Chrome





Es gibt andere Tools, mit denen Sie anzeigen und analysieren können:





Web APIs



Zurück zu den nativen Funktionen des Browser-Browsers gibt es mehrere APIs, mit denen Sie die Leistung der Website selbst messen können, ohne Bibliotheken zu verwenden.



  • performance.now () - Die Browser - Performancenow()



    - Interface - Methode liefert einen hochgenauen Zeitstempel aus der Zeit wurde die Methode aufgerufen. Es macht es sehr einfach, die Zeit zwischen 2 Anrufen zu messen. Wenn Sie sie vor und nach einem bestimmten Code hinzufügen, können Sie ihn messen und optimieren.
  • Navigationszeitpunkt - Mit dieser API können Entwickler Zeitdaten erfassen, die mit der Dokumentennavigation verknüpft sind .
  • Ressourcen-Timing - Mit dieser API können Entwickler vollständige Timing-Informationen für die vom Dokument geladenen Ressourcen sammeln.
  • Bewertung der Ladeleistung im realen Leben mit Navigation und Ressourcen-Timing - Jeremy Wagner - Ein sehr detaillierter Artikel darüber, wie die beiden oben genannten APIs zum Messen der Ladeleistung von Webseiten verwendet werden können.


Ergebnisse



Hoffentlich finden Sie in den in diesem Artikel aufgeführten Tools diejenigen, die Ihnen bei der Verbesserung Ihrer internen Systeme helfen. Wenn ein Service oder eine Website nur von Mitarbeitern im Unternehmen genutzt wird, bedeutet dies nicht, dass sie nicht optimiert werden müssen. Trotz der Tatsache, dass heutzutage viele Menschen remote arbeiten, hat nicht jeder eine schnelle und stabile Verbindung. Denken Sie daher daran, dass Sie und Ihre Kollegen auch Benutzer sind!


More articles:


All Articles