Wenn Sie hier angekommen sind, wissen Sie wahrscheinlich bereits, was Latenz ist, und möchten Maßnahmen ergreifen. Dieser Text wird Ihre Zeit nicht damit verschwenden, das Konzept noch einmal zu definieren. Es ist ein praktischer Leitfaden für alle, die eine Webanwendung schneller machen müssen und dies in der richtigen Reihenfolge tun möchten, ohne wochenlang mit Optimierungen zu verbringen, die nichts bewegen.
Die Regel, die alles, was folgt, organisiert, ist nur eine: Beseitigen Sie zuerst den größten Engpass. Die Latenz konzentriert sich. Bei einer typischen Anwendung machen ein oder zwei Schritte den größten Teil der Wartezeit aus. Sie zu finden und zu beheben ist mehr wert als Dutzende kleiner Anpassungen, die überall verstreut sind.
Gehen wir von dem Teil, der normalerweise am meisten wehtut, zu dem Teil über, der normalerweise am wenigsten weh tut. Passen Sie die Reihenfolge an Ihre Realität an, jedoch erst nach der Messung.
Beginnen Sie immer mit der Messung
Das Überspringen dieses Schritts ist der kostspieligste Fehler. Ohne Messung tappen Sie bei der Optimierung im Dunkeln und die Wahrscheinlichkeit, dass Sie an der falschen Stelle Fehler machen, ist hoch.
Instrumentieren Sie die Anforderung, bevor Sie einen Code berühren. Sie müssen wissen, wie viel Zeit auf dem Server, wie viel für das Abfragen von Daten, wie viel im Netzwerk und wie viel für das Rendern im Browser aufgewendet wird. Observability-Tools im Backend und Browser-Entwicklertools geben einen ausreichenden Überblick, um loszulegen.
Schauen Sie sich auch die Verteilung an, nicht nur den Durchschnitt. Im schlimmsten Fall, also bei Benutzern im schlechten Perzentil, ist es die Latenz, die zu Beschwerden und Abbruch führt. Eine akzeptable durchschnittliche Zeit kann eine lange Reihe leidender Menschen verbergen. Optimieren Sie unter Berücksichtigung dieses Schwanzes.
Die Datenbank ist oft der Bösewicht
Bei den meisten Anwendungen, die mit der Zeit langsamer werden, liegt der Engpass in den Abfragen. Es lohnt sich, hier anzufangen.
Der klassische Verdächtige ist die Abfrage ohne passenden Index. Wenn die Tabelle wächst, wird eine Suche, die bei tausend Datensätzen sofort durchgeführt wurde, bei Millionen zu einer Belastung. Das Identifizieren langsamer Abfragen und das Hinzufügen der richtigen Indizes ist oft die höchste Renditeoptimierung, die es gibt.
Der zweite Verdächtige ist das Muster vieler aufeinanderfolgender Abfragen: Die Anwendung durchsucht eine Liste und löst für jedes Element eine neue Abfrage aus. Bei zehn Artikeln ging es elf Mal zur Bank; Aus hundert Artikeln wird einhunderteins. Wenn Sie dieses Problem lösen, indem Sie alle Daten auf einmal abrufen, wird eine langsame Seite in eine schnelle Seite umgewandelt, ohne dass sonst etwas geändert wird.
Die dritte ist die Abfrage, die zu viele Daten liefert. Das Anfordern aller Spalten, wenn Sie drei verwenden, oder das Einfügen von Tausenden von Zeilen, um zwanzig anzuzeigen, verschwendet Zeit auf jeder Ebene. Bestellen Sie nur das, was Sie auch verwenden werden.
Cache: die mächtigste und gefährlichste Verknüpfung
Cache ist das Tool, das die Latenz am meisten reduziert und die subtilsten Fehler verursacht. Mit Absicht verwenden.
Die Idee ist einfach: Speichern Sie das Ergebnis einer teuren Operation, um sie nicht zu wiederholen. Daten, die sich wenig ändern und viel gelesen werden, ein Katalog, eine Konfiguration, eine öffentliche Seite, sind perfekte Kandidaten. Durch die Bereitstellung aus dem Cache entfallen die Datenbanksuche und der größte Teil der Verarbeitung.
Die Gefahr liegt in der Invalidierung: Es wird sichergestellt, dass der Cache aktualisiert wird, wenn sich die Daten ändern. Cache, der alte Informationen bereitstellt, erzeugt Probleme, die schwer zu diagnostizieren sind, weil das System „funktioniert“, es ist einfach falsch. Entscheiden Sie vor dem Hinzufügen des Caches, wie er ungültig gemacht wird. Wenn Sie nicht wissen, wie Sie darauf antworten sollen, sind Sie dazu noch nicht bereit.
Geschichteter Cache
Es gibt mehr als einen Ort zum Locken, und das summiert sich. Im Browser können statische Ressourcen gespeichert werden, sodass diese nicht erneut heruntergeladen werden. In einem CDN können Inhalte von einem Punkt aus bereitgestellt werden, der sich physisch in der Nähe des Benutzers befindet. Auf dem Server können Ergebnisse teurer Vorgänge im Speicher verbleiben. Jede Schicht verringert einen Teil der Gesamtlatenz.
Verkürzen Sie die Entfernung und verwenden Sie Verbindungen wieder
Ein Teil der Latenz ist reine Physik: die Entfernung zwischen dem Benutzer und dem Server. Sie können die Lichtgeschwindigkeit nicht übertreffen, aber Sie können den Weg verkürzen.
Ein CDN platziert Kopien Ihrer Inhalte in der Nähe desjenigen, der darauf zugreift. Für ein brasilianisches Publikum bedeutet die Bereitstellung von Präsenzpunkten im Land anstelle eines entfernten Servers eine Verkürzung der Reisezeit, die durch keine noch so große Code-Optimierung ausgeglichen werden könnte. Für statische Inhalte und Medien ist es eines der besten Aufwand-zu-Gewinn-Verhältnisse.
Auch die Wiederverwendung von Verbindungen spart Einsparungen. Das Öffnen einer neuen sicheren Verbindung kostet Hin- und Rückfahrten durch das Netzwerk. Durch die Aufrechterhaltung der Verbindungen und die Verwendung moderner Protokolle werden diese wiederkehrenden Kosten reduziert. Dies ist ein Vorteil, der insbesondere auf Seiten auftritt, auf denen viele Anfragen gestellt werden.
Entlasten Sie den Browser
Selbst beim schnellen Server erscheint der Bildschirm erst, nachdem der Browser die Antwort verarbeitet hat. Dieser letzte Abschnitt verdient Aufmerksamkeit.
Häufige Täter sind bekannt. Übermäßiges JavaScript, das das Laden der Seite verlangsamt. Große Bilder werden ohne Komprimierung oder in der falschen Größe bereitgestellt. Funktionen, die das Display während des Ladevorgangs blockieren. Durch das Reduzieren und Verschieben nicht wesentlicher Elemente auf den ersten Bildschirm erscheint die Anwendung schnell, auch wenn der Rest noch nicht vollständig geladen ist.
Die Wahrnehmung ist genauso wichtig wie die Zahlen. Durch die frühzeitige Anzeige nützlicher Inhalte, auch wenn diese nur teilweise angezeigt werden, spürt der Benutzer die Geschwindigkeit. Ein zwei Sekunden lang leerer Bildschirm ist schlimmer als ein Bildschirm, der sofort eine Struktur zeigt und diese dann vervollständigt.
Es lohnt sich, auch hier die gleiche Proportionslogik anzuwenden. Bevor Sie im Namen der Leistung eine ganze Komponente neu schreiben, vergewissern Sie sich, dass der Abschnitt, den Sie angreifen möchten, derjenige ist, der auf dem ersten Bildschirm angezeigt wird. Oftmals ergibt sich der größte Gewinn aus der Verschiebung des Ladens von etwas Zweitrangigem und nicht aus dem Umschreiben des Wichtigsten.
Der Fehler, zu optimieren, was nicht schadet
Es ist die Warnung wert, die jeden ehrlichen Leistungsleitfaden abschließt: Optimieren Sie nicht das Unsichtbare. Es ist leicht, sich in einen eleganten Code zu verlieben und Tage damit zu verbringen, Millisekunden zu sparen, die niemandem auffallen, während der eigentliche Engpass intakt bleibt.
Gehen Sie immer wieder zur Messung zurück. Messen Sie nach jeder Optimierung erneut und bestätigen Sie, dass sich die vom Benutzer empfundene Zahl tatsächlich verbessert hat. Wenn es sich nicht verbessert hat, haben Sie das Falsche optimiert. Leistung ist ein Spiel der Proportionen, und die Bescheidenheit beim Messen ist es, was Verschwendung vermeidet.
Schließung
Die Reduzierung der Latenz ist keine Zauberei oder technischer Heldentum. Es ist eine Methode: Messen, den größten Engpass finden, ihn lösen, erneut messen. Datenbank, Cache, Entfernung und Browser sind die Orte, an denen die meiste Zeit verloren geht, und fast immer konzentriert sich das Problem auf einen von ihnen.
Geschwindigkeit ist eine als Ingenieursaufgabe getarnte Produktentscheidung. Teams, die methodisch damit umgehen, liefern Anwendungen, die die Zeit des Benutzers respektieren, und verbrauchen später weniger Energie, um Leistungsprobleme zu beheben.
Wenn Sie diesen Job jetzt ausüben, beginnen Sie vor allem mit der Messung. Hier im Blog gibt es weitere Artikel zu Architektur, Caching und Skalierbarkeit, die sich eingehender mit jedem dieser Punkte befassen.
Lesen Sie auch
- Latenz in Webanwendungen: die Grundlagen, die jedes Team verstehen muss
- Cache in Anwendungen: Kurzanleitung zu bewährten Vorgehensweisen (und den darin verborgenen Fehlern)
- Batterieverbrauch in Apps: Vergleich und Kurzanleitung
- Progressive Web Apps für Einsteiger: Beispiele und Optimierung ohne Komplikationen
- PWA für Startups: Wenn Progressive Web App die richtige Wahl ist
- PWA: Was es ist und wie man sich täglich um die Leistung kümmert
