Was ist Web-Performance?

Web-Performance ist die objektive Messung und die wahrgenommene Nutzererfahrung einer Website oder Applikation. Dies umfasst folgende Hauptbereiche:

• Reduzierung der gesamten Ladezeit: Wie lange dauert es, bis die Dateien, die nötig sind, um die Website darzustellen, auf den Computer des Benutzers heruntergeladen werden? Dies wird typischerweise von der Latenz, der Größe Ihrer Dateien, der Anzahl der Dateien und anderen Faktoren beeinflusst. Eine allgemeine Strategie besteht darin, die Dateien so klein wie möglich zu machen, die Anzahl der HTTP-Anfragen so weit wie möglich zu reduzieren und clevere Ladeverfahren einzusetzen (wie z. B. preload), um die Dateien so schnell wie möglich verfügbar zu machen.
• Schnellstmögliche Nutzbarkeit der Website: Dies bedeutet im Wesentlichen, dass Sie die Website-Ressourcen in einer sinnvollen Reihenfolge laden, damit der Benutzer anfangen kann, diese wirklich schnell zu nutzen. Andere Ressourcen können im Hintergrund weiter laden, während der Benutzer mit primären Aufgaben beginnt, und manchmal laden wir Ressourcen nur, wenn sie tatsächlich benötigt werden (dies wird Lazy Loading genannt). Die Messung, wie lange es dauert, bis die Seite nach dem Beginn des Ladens in einen nutzbaren Zustand kommt, wird als Time to interactive bezeichnet.
• Flüssigkeit und Interaktivität: Fühlt sich die Anwendung verlässlich und angenehm zu nutzen an? Ist das Scrollen flüssig? Sind Buttons anklickbar? Öffnen sich Pop-ups schnell und animieren sie flüssig, während sie es tun? Es gibt viele Best Practices, die es zu beachten gilt, um Anwendungen flüssig wirken zu lassen, wie z. B. die Nutzung von CSS-Animationen anstelle von JavaScript für Animationen und die Minimierung der Anzahl von UI-Neuzeichnungen, die durch Änderungen im DOM erforderlich sind.
• Wahrgenommene Performance: Wie schnell eine Website vom Benutzer wahrgenommen wird, wirkt sich stärker auf die Benutzererfahrung aus als die tatsächliche Geschwindigkeit der Website. Wie der Benutzer Ihre Performance wahrnimmt, ist genauso wichtig oder vielleicht wichtiger als jede objektive Statistik, aber es ist subjektiv und nicht so leicht messbar. Wahrgenommene Performance ist die Benutzerperspektive, keine Metrik. Selbst wenn ein Vorgang lange dauern wird (aufgrund von Latenz oder ähnlichem), ist es möglich, den Benutzer während der Wartezeit mit einem Lade-Spinner oder einer Reihe nützlicher Tipps und Tricks (oder Witzen oder was auch immer Sie für angemessen halten) zu beschäftigen. Ein solcher Ansatz ist viel besser, als einfach nichts anzuzeigen, was das Gefühl verstärkt, dass es viel länger dauert, und möglicherweise dazu führt, dass Ihre Benutzer denken, es sei defekt und aufgeben.
• Performance-Messungen: Web-Performance beinhaltet das Messen der tatsächlichen und wahrgenommenen Geschwindigkeiten einer Anwendung, deren Optimierung wenn möglich und dann das Überwachen der Performance, um sicherzustellen, dass das, was Sie optimiert haben, optimiert bleibt. Dies beinhaltet eine Reihe von Metriken (messbare Indikatoren, die auf Erfolg oder Misserfolg hinweisen können) und Werkzeuge, um diese Metriken zu messen, auf die wir in diesem Modul eingehen werden.

Zusammengefasst: Viele Faktoren beeinflussen die Performance, einschließlich Latenz, Anwendungsgröße, Anzahl der DOM-Knoten, Anzahl der Ressourcenzugriffe, JavaScript-Performance, CPU-Last und mehr. Es ist wichtig, die Lade- und Antwortzeiten zu minimieren und zusätzliche Funktionen hinzuzufügen, um Latenz zu verbergen, indem die Erfahrung so schnell wie möglich verfügbar und interaktiv gemacht wird, während die länger dauernden Teile der Erfahrung asynchron geladen werden.

Um die Web-Performance effektiv zu verstehen, die zugrundeliegenden Probleme und die oben erwähnten Hauptthemenbereiche, sollten Sie einige spezifische Informationen darüber verstehen, wie Browser funktionieren. Dazu gehört:

• Wie der Browser funktioniert. Wenn Sie eine URL eingeben und Enter / Return drücken, findet der Browser heraus, wo der Server ist, der die Dateien der Website enthält, stellt eine Verbindung zu diesem her und fordert die Dateien an. Siehe Seitenfüllung: Wie der Browser funktioniert für eine detaillierte Übersicht.
• Quellcode-Reihenfolge. Die Quellcode-Reihenfolge Ihrer HTML-Indexdatei kann die Performance erheblich beeinflussen. Der Download zusätzlicher Ressourcen, die von der Indexdatei verlinkt sind, erfolgt in der Regel sequentiell, basierend auf der Quellcode-Reihenfolge, kann aber manipuliert und sollte definitiv optimiert werden, da manche Ressourcen zusätzliche Downloads blockieren, bis ihr Inhalt analysiert und ausgeführt wurde.
• Der kritische Pfad. Dies ist der Prozess, den der Browser verwendet, um das Webdokument zu konstruieren, sobald die Dateien vom Server heruntergeladen wurden. Der Browser folgt einer festgelegten Reihe von Schritten, und die Optimierung des kritischen Rendering-Pfads, um die Anzeige von Inhalten zu priorisieren, die sich auf die aktuelle Benutzeraktion beziehen, führt zu erheblichen Verbesserungen der Rendering-Zeit von Inhalten. Siehe Critical rendering path für weitere Informationen.
• Das Document Object Model. Das Document Object Model, oder DOM, ist eine Baumstruktur, die den Inhalt und die Elemente Ihres HTMLs als Baum von Knoten darstellt. Dies umfasst alle HTML-Attribute und die Beziehungen zwischen den Knoten. Umfangreiche DOM-Manipulationen, nachdem die Seite geladen ist (z. B. Hinzufügen, Löschen oder Verschieben von Knoten), können die Performance beeinflussen, deshalb lohnt es sich zu verstehen, wie das DOM funktioniert und wie solche Probleme gemindert werden können. Erfahren Sie mehr unter Document Object Model.
• Latenz. Wir erwähnen dies kurz zuvor, aber kurz gesagt ist die Latenz die Zeit, die es dauert, bis Ihre Website-Ressourcen vom Server zum Computer eines Benutzers gelangen. Es gibt einen Overhead bei der Einrichtung von TCP- und HTTP-Verbindungen und eine unvermeidliche Latenz bei der Übertragung der Anfrage- und Antwortbytes über das Netzwerk, aber es gibt bestimmte Möglichkeiten, die Latenz zu reduzieren (z. B. durch Reduzierung der Anzahl der HTTP-Anfragen durch das Herunterladen weniger Dateien, Verwendung eines CDN, um Ihre Website weltweit leistungsfähiger zu machen, und Verwendung von HTTP/2, um Dateien effizienter vom Server aus bereitzustellen). Alles darüber können Sie im Thema Understanding Latency nachlesen.

Das war's für jetzt; wir hoffen, dass unser kurzer Überblick über das Thema Web-Performance Ihnen geholfen hat, eine Vorstellung davon zu bekommen, worum es geht, und Sie dazu anregt, mehr darüber zu lernen. Als nächstes schauen wir uns die wahrgenommene Performance an und wie Sie einige clevere Techniken nutzen können, um unvermeidbare Performance-Einbrüche für den Benutzer weniger schwerwiegend erscheinen zu lassen oder sie komplett zu kaschieren.

• Zurück
• Übersicht: Web-Performance
• Weiter