Die Leistung ist ein wichtiger Aspekt der Nutzererfahrung und wirkt sich auf Geschäftsmesswerte. Es mag verlockend sein, zu denken, dass ein guter Entwickler am Ende eine leistungsstarke Website hat. Die Wahrheit ist aber, dass eine gute Leistung selten ein Nebeneffekt ist. Wie bei den meisten anderen Dingen muss man ein Ziel klar definieren, um ein Ziel zu erreichen. Legen Sie zuerst ein Leistungsbudget fest.
Definition
Ein Leistungsbudget ist eine Reihe von Grenzwerten für Messwerte, die sich auf die Leistung einer Website auswirken. Das kann die Gesamtgröße einer Seite, die zum Laden in einem Mobilfunknetz benötigte Zeit oder sogar die Anzahl der gesendeten HTTP-Anfragen sein. Ein Budget festzulegen, um über die Leistung im Web zu sprechen, ist ein guter Anfang. Sie dient als Referenz für Entscheidungen über Design, Technologie und das Hinzufügen von Funktionen.
Wenn Designschaffende über ein Budget verfügen, können sie sich über die Effekte von hochauflösenden Bildern und die Anzahl der von ihnen ausgewählten Webschriftarten Gedanken machen. Außerdem hilft es Entwicklern, verschiedene Ansätze für ein Problem zu vergleichen und Frameworks und Bibliotheken auf der Grundlage ihrer Größe und Analysekosten zu bewerten.
Messwerte auswählen
Mengenbasierte Messwerte ⚖️
Diese Messwerte sind in den frühen Phasen der Entwicklung hilfreich, da sie die Auswirkungen verdeutlichen, wenn umfangreiche Bilder und Skripts eingefügt wurden. Außerdem ist es einfach, sowohl mit Designschaffenden als auch mit Entwickelnden zu kommunizieren.
Wir haben bereits einige Punkte erwähnt, die Sie in ein Leistungsbudget aufnehmen können, z. B. die Seitengröße und die Anzahl der HTTP-Anfragen. Sie können sie jedoch in detailliertere Limits aufteilen, z. B.:
- Maximale Bildgröße
- Maximale Anzahl von Webschriftarten
- Maximale Größe von Skripts, einschließlich Frameworks
- Gesamtzahl der externen Ressourcen, z. B. Skripts von Drittanbietern
Diese Zahlen sagen jedoch nicht viel über die Nutzererfahrung aus. Zwei Seiten mit der gleichen Anzahl von Anfragen oder derselben Gewichtung können je nach Reihenfolge, in der Ressourcen angefordert werden, unterschiedlich gerendert werden. Wenn eine wichtige Ressource wie ein Hero-Image oder ein Stylesheet auf einer der Seiten erst spät geladen wird, warten die Nutzer länger, bis sie etwas Nützliches sehen und die Seite als langsamer empfinden. Wenn die wichtigsten Teile auf der anderen Seite schnell geladen werden, bemerken sie es unter Umständen gar nicht, wenn der Rest der Seite es nicht tut.
Aus diesem Grund ist es wichtig, einen anderen Messwerttyp im Auge zu behalten.
Meilensteinzeiten ⏱️
Mit Meilensteinzeiten werden Ereignisse markiert, die während des Seitenaufbaus auftreten, beispielsweise DOMContentLoaded- oder load-Ereignisse. Am nützlichsten sind die nutzerbezogenen Leistungsmesswerte, die Aufschluss darüber geben, wie eine Seite geladen wird. Diese Messwerte sind über Browser-APIs und als Teil von Lighthouse-Berichten verfügbar.
Mit First Contentful Paint (FCP) wird gemessen, wann der Browser den ersten Inhalt aus dem DOM anzeigt, z. B. Text oder Bilder.
Mit Zeit bis Interaktivität wird gemessen, wie lange es dauert, bis eine Seite vollständig interaktiv ist und zuverlässig auf Nutzereingaben reagiert. Er ist ein sehr wichtiger Messwert, den Sie erfassen sollten, wenn Sie eine Nutzerinteraktion auf der Seite erwarten, z. B. Klicken auf Links, Schaltflächen, Texteingaben oder Formularelemente.
Regelbasierte Messwerte 💯
Lighthouse und WebPageTest berechnen die Leistungsbewertungen anhand von allgemeinen Best Practices, die Sie als Richtlinie verwenden können. Außerdem erhalten Sie von Lighthouse Tipps für einfache Optimierungen.
Die besten Ergebnisse erzielen Sie, wenn Sie eine Kombination aus mengenbasierten und nutzerorientierten Leistungsmesswerten im Blick behalten. Konzentrieren Sie sich in den frühen Phasen eines Projekts auf die Asset-Größe und beginnen Sie so schnell wie möglich mit dem Tracking von FCP und TTI.
Baseline festlegen
Die einzige Möglichkeit, herauszufinden, was für Ihre Website am besten funktioniert, besteht darin, es auszuprobieren: Recherchieren Sie Ihre Ergebnisse und testen Sie sie dann. Analysieren Sie die Konkurrenz, um zu sehen, wie Sie im Vergleich abschneiden. 🕵️
Wenn Sie keine Zeit dafür haben, finden Sie hier einige Standardnummern, die Ihnen den Einstieg erleichtern:
- Unter 5 s Zeit bis Interaktivität
- Unter 170 KB an Critical-Path-Ressourcen (komprimiert/minimiert)
Diese Zahlen werden basierend auf realen Referenzgeräten und der 3G-Netzwerkgeschwindigkeit berechnet. Mehr als die Hälfte des Internetverkehrs erfolgt heutzutage über Mobilfunknetze, daher ist die 3G-Netzwerkgeschwindigkeit als Ausgangspunkt geeignet.
Beispiele für Budgets
Sie sollten über ein Budget für verschiedene Arten von Seiten auf Ihrer Website verfügen, da die Inhalte variieren. Beispiel:
- Unsere Produktseite muss weniger als 170 KB JavaScript auf Mobilgeräten enthalten.
- Die Suchseite muss Bilder auf Computern mit einer Größe von weniger als 2 MB enthalten
- Unsere Startseite muss mit langsamem 3G auf einem Moto G4 in weniger als 5 Sekunden geladen und interaktiv sein.
- Unser Blog muss bei Lighthouse-Leistungsprüfungen über 80 Punkte erreichen.
Fügen Sie Ihrem Build-Prozess Leistungsbudgets hinzu
Die Auswahl eines Tools dafür hängt stark vom Umfang Ihres Projekts und den Ressourcen ab, die Sie der Aufgabe zuweisen können. Es gibt einige Open-Source-Tools, mit denen Sie Ihrem Build-Prozess ein Budget hinzufügen können:
Wenn etwas über einem bestimmten Grenzwert liegt, haben Sie folgende Möglichkeiten:
- Vorhandene Funktionen oder Assets optimieren ✨
- Vorhandene Funktion oder Asset entfernen 🗑️
- Füge die neue Funktion oder das neue Asset nicht hinzu ⏎⛔
Leistungserfassung
Wenn Sie sichergehen möchten, dass Ihre Website schnell genug ist, müssen die Messungen auch nach der Veröffentlichung fortgesetzt werden. Wenn Sie diese Messwerte im Zeitverlauf beobachten und Daten von echten Nutzern abrufen, erfahren Sie, wie sich Leistungsänderungen auf wichtige Geschäftsmesswerte auswirken.
Zusammenfassung
Der Zweck eines Leistungsbudgets besteht darin, sicherzustellen, dass Sie sich während des gesamten Projekts auf die Leistung konzentrieren und es frühzeitig festlegen, um späteres Backtracking zu vermeiden. Er sollte als Bezugspunkt dienen, um herauszufinden, was auf Ihrer Website zu sehen sein sollte. Die Grundidee ist es, Ziele zu setzen, damit du ein besseres Gleichgewicht bei der Leistung erzielen kannst, ohne die Funktionalität oder die Nutzererfahrung zu beeinträchtigen.🎯
Im nächsten Leitfaden erfahren Sie, wie Sie in wenigen einfachen Schritten Ihr erstes Leistungsbudget festlegen.