Was ist Web-Performance?

Web-Performance ist die objektive Messung und wahrgenommene Benutzererfahrung einer Website oder Anwendung. Dazu gehören folgende Hauptbereiche:

• Reduzierung der Gesamtladezeit: Wie lange dauert es, bis die Dateien, die zum Rendern der Website benötigt werden, auf den Computer des Benutzers heruntergeladen sind? Dies wird in der Regel durch die Latenz, die Größe Ihrer Dateien, die Anzahl der Dateien und andere Faktoren beeinträchtigt. Eine allgemeine Strategie besteht darin, Ihre Dateien so klein wie möglich zu machen, die Anzahl der HTTP-Anfragen so weit wie möglich zu reduzieren und clevere Ladetechniken anzuwenden (wie preload), um Dateien früher verfügbar zu machen.
• Bereitstellung der Nutzbarkeit der Seite so schnell wie möglich: Im Grunde bedeutet dies, Ihre Website-Ressourcen in einer sinnvollen Reihenfolge zu laden, damit der Benutzer anfangen kann, die Seite schnell zu nutzen. Andere Ressourcen können im Hintergrund weitergeladen werden, während der Benutzer mit den primären Aufgaben fortfährt, und manchmal laden wir Ressourcen nur, wenn sie tatsächlich benötigt werden (dies wird als Lazy Loading bezeichnet). Die Messung, wie lange es dauert, bis die Seite nach Beginn des Ladevorgangs nutzbar wird, wird als Time to Interactive bezeichnet.
• Flüssigkeit und Interaktivität: Fühlt sich die Anwendung zuverlässig und angenehm zu nutzen an? Ist das Scrollen flüssig? Sind Knöpfe klickbar? Öffnen sich Pop-ups schnell und animieren sie dabei flüssig? Es gibt viele Best Practices, die man beachten sollte, um Apps flüssig wirken zu lassen, z.B. CSS-Animationen statt JavaScript für Animationen zu verwenden und die Anzahl der Neuzeichnungen der Benutzeroberfläche durch Änderungen im DOM zu minimieren.
• Wahrgenommene Performance: Wie schnell eine Website dem Nutzer erscheint, hat einen größeren Einfluss auf die Benutzererfahrung als die tatsächliche Geschwindigkeit der Website. Wie ein Nutzer Ihre Performance wahrnimmt, ist ebenso wichtig oder vielleicht wichtiger als jede objektive Statistik, aber es ist subjektiv und nicht so leicht messbar. Wahrgenommene Performance ist die Perspektive des Nutzers, keine Metrik. Selbst wenn ein Vorgang lange dauern wird (aufgrund von Latenz oder Ähnlichem), ist es möglich, den Nutzer zu beschäftigen, während er wartet, indem Sie einen Lade-Spinner anzeigen oder eine Reihe nützlicher Hinweise und Tipps (oder Witze oder was auch immer Sie für angemessen halten). Ein solcher Ansatz ist viel besser, als einfach nichts zu zeigen, was den Eindruck erwecken könnte, es dauere viel länger, und möglicherweise dazu führt, dass Ihre Nutzer denken, es sei kaputt und aufgeben.
• Performance-Messungen: Web-Performance umfasst die Messung der tatsächlichen und wahrgenommenen Geschwindigkeiten einer Anwendung, die Optimierung, wo möglich, und dann die Überwachung der Performance, um sicherzustellen, dass das, was Sie optimiert haben, optimiert bleibt. Dies umfasst eine Reihe von Metriken (messbare Indikatoren, die Erfolg oder Misserfolg anzeigen können) und Werkzeuge zur Messung dieser Metriken, die wir im Laufe dieses Moduls besprechen werden.

Zusammenfassend lässt sich sagen, dass viele Faktoren die Performance beeinflussen, einschließlich der Latenz, der Anwendungsgröße, der Anzahl der DOM-Knoten, der Anzahl der gestellten Ressourcenanfragen, der JavaScript-Performance, der CPU-Auslastung und mehr. Es ist wichtig, Lade- und Reaktionszeiten zu minimieren und zusätzliche Funktionen hinzuzufügen, um die Latenz zu verbergen, indem die Erfahrung so schnell wie möglich verfügbar und interaktiv gemacht wird, während asynchron die längeren Teile der Erfahrung geladen werden.

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

• Wie der Browser funktioniert. Wenn Sie eine URL anfordern und Enter / Return drücken, findet der Browser heraus, wo der Server ist, der die Dateien dieser Website hält, stellt eine Verbindung zu ihm her und fordert die Dateien an. Sehen Sie Das Befüllen der Seite: wie der Browser funktioniert für eine detaillierte Übersicht.
• Quellenreihenfolge. Die Quellenreihenfolge 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 Quellenreihenfolge, aber dies kann manipuliert und sollte definitiv optimiert werden, in dem Bewusstsein, dass einige Ressourcen weitere Downloads blockieren, bis ihr Inhalt analysiert und ausgeführt wird.
• Der kritische Pfad. Dies ist der Prozess, den der Browser verwendet, um das Webdokument zu konstruieren, nachdem die Dateien vom Server heruntergeladen wurden. Der Browser folgt einem klar definierten Satz von Schritten, und die Optimierung des kritischen Rendering-Pfads zur Priorisierung der Anzeige von Inhalten, die sich auf die aktuelle Benutzeraktion beziehen, führt zu erheblichen Verbesserungen der Inhaltsdarstellungszeit. Siehe Kritischer Renderpfad für mehr Informationen.
• Das Document Object Model. Das Document Object Model oder DOM ist eine Baumstruktur, die den Inhalt und die Elemente Ihres HTML als Baum von Knoten darstellt. Dies umfasst alle HTML-Attribute und die Beziehungen zwischen den Knoten. Umfangreiche DOM-Manipulationen nach dem Laden der Seite (z.B. Hinzufügen, Löschen oder Verschieben von Knoten) können die Performance beeinflussen, daher lohnt es sich, zu verstehen, wie das DOM funktioniert und wie solche Probleme gemildert werden können. Erfahren Sie mehr im Document Object Model.
• Latenz. Wir haben dies kurz zuvor erwähnt, aber kurz gesagt, Latenz ist die Zeit, die es dauert, bis Ihre Website-Ressourcen vom Server zu einem Computer des Nutzers reisen. Es gibt Overhead beim Einrichten der TCP- und HTTP-Verbindungen und eine gewisse unvermeidbare Latenz beim Hin- und Herschicken der Anforderungs- und Antwort-Bytes über das Netzwerk, aber es gibt bestimmte Möglichkeiten, die Latenz zu reduzieren (z.B. die Anzahl der HTTP-Anfragen zu reduzieren, indem Sie weniger Dateien herunterladen, die Verwendung eines CDN, um Ihre Seite weltweit besser performen zu lassen, und die Verwendung von HTTP/2, um Dateien effizienter vom Server bereitzustellen). Sie können alles darüber im Verstehen der Latenz nachlesen.

Das war's fürs Erste; wir hoffen, dass unser kurzer Überblick über das Thema der Web-Performance Ihnen geholfen hat, eine Vorstellung davon zu bekommen, worum es geht, und Sie dazu angeregt hat, mehr zu lernen. Als nächstes werden wir uns die wahrgenommene Performance anschauen und wie Sie einige clevere Techniken nutzen können, um einige unvermeidbare Performance-Probleme für den Nutzer weniger schwerwiegend erscheinen zu lassen oder sie vollständig zu verschleiern.

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