Leistung ist ein wichtiger Bestandteil der Nutzererfahrung und wirkt sich auf die Geschäftsmesswerte aus. Es ist verlockend, zu denken, dass man als guter Entwickler am Ende eine leistungsstarke Website hat. Tatsächlich ist aber eine gute Leistung selten ein Nebeneffekt. Wie bei den meisten anderen Dingen müssen Sie ein Ziel klar definieren, um ein Ziel zu erreichen. Legen Sie zu Beginn ein Leistungsbudget fest.
Definition
Ein Leistungsbudget ist eine Reihe von Grenzen für Messwerte, die sich auf die Websiteleistung auswirken. Dies kann die Gesamtgröße einer Seite, die Ladezeit in einem Mobilfunknetz oder die Anzahl der gesendeten HTTP-Anfragen sein. Wenn Sie ein Budget festlegen, können Gespräche über die Leistung im Web eingeleitet werden. Sie dient als Bezugspunkt für Entscheidungen über Design, Technologie und das Hinzufügen von Funktionen.
Ein Budget ermöglicht es Designschaffenden, über die Effekte von hochauflösenden Bildern und die Anzahl der von ihnen ausgewählten Webschriftarten nachzudenken. Außerdem können Entwickler damit verschiedene Ansätze für ein Problem vergleichen und Frameworks und Bibliotheken anhand ihrer Größe und Analysekosten bewerten.
Messwerte auswählen
Mengenbasierte Messwerte ⚖️
Diese Messwerte sind in den frühen Phasen der Entwicklung nützlich, da sie die Auswirkungen der Verwendung umfangreicher Bilder und Skripts hervorheben. Sie sind außerdem sowohl mit Designschaffenden als auch mit Entwickelnden leicht zu kommunizieren.
Wir haben bereits einige Dinge erwähnt, die Sie in ein Leistungsbudget aufnehmen können, wie z. B. die Seitengröße und die Anzahl der HTTP-Anfragen. Sie können diese 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 abhängig von der Reihenfolge, in der Ressourcen angefordert werden, unterschiedlich gerendert werden. Wenn eine wichtige Ressource wie ein Hero-Image oder ein Stylesheet auf einer der Seiten spät im Prozess geladen wird, warten die Nutzer länger, bis sie etwas Nützliches sehen, und nehmen die Seite als langsamer an. Wenn die wichtigsten Teile auf der anderen Seite schnell geladen werden, bemerken sie dies möglicherweise gar nicht, wenn der Rest der Seite dies nicht tut.
Deshalb ist es wichtig, einen anderen Messwerttyp im Auge zu behalten.
Zeitangaben für Meilensteine ⏱️
Mit dem Timing von Meilensteinen werden Ereignisse gekennzeichnet, die während des Seitenaufbaus auftreten, z. B. das Ereignis DOMContentLoaded oder load. Am nützlichsten sind nutzerbezogene Leistungsmesswerte, die Aufschluss über das Laden einer Seite geben. 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 Teil des Inhalts aus dem DOM anzeigt, z. B. Text oder Bilder.
Zeit bis Interaktivität (Time to Interactive, TTI) gibt an, wie lange es dauert, bis eine Seite vollständig interaktiv ist und zuverlässig auf Nutzereingaben reagiert. Dies ist ein sehr wichtiger Messwert, den Sie erfassen sollten, wenn Sie eine Nutzerinteraktion auf der Seite erwarten, z. B. das Klicken auf Links, Schaltflächen, die Eingabe oder die Verwendung von Formularelementen.
Regelbasierte Messwerte ⭐
Lighthouse und WebPageTest berechnen die Leistungswerte basierend auf allgemeinen Best-Practice-Regeln, die Sie als Anhaltspunkt verwenden können. Als Bonus bietet Lighthouse Ihnen auch Tipps für einfache Optimierungen.
Sie erzielen die besten Ergebnisse, wenn Sie eine Kombination aus mengen- und nutzerorientierten Leistungsmesswerten im Blick behalten. Konzentrieren Sie sich in den frühen Phasen eines Projekts auf die Asset-Größen und beginnen Sie so bald 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, die Ergebnisse auszuprobieren, zu recherchieren und dann zu testen. Analysiere deine Mitbewerber, um zu sehen, wie du im Vergleich abschneidest. 🕵️
Falls Sie keine Zeit dafür haben, finden Sie hier einige gute Standardzahlen für den Einstieg:
- Kürzer als 5 Sek. bis Interaktivität
- Unter 170 KB an Ressourcen über kritischen Pfad (komprimiert/minimiert)
Diese Zahlen werden auf Grundlage realer Grundgeräte und der 3G-Netzwerkgeschwindigkeit berechnet. Mehr als die Hälfte des Internetverkehrs erfolgt heute über Mobilfunknetze, daher sollten Sie die 3G-Netzwerkgeschwindigkeit als Ausgangspunkt verwenden.
Beispiele für Budgets
Sie sollten ein Budget für die verschiedenen Seitentypen auf Ihrer Website haben, da die Inhalte unterschiedlich ausfallen. Beispiel:
- Unsere Produktseite muss weniger als 170 KB JavaScript auf Mobilgeräten ausliefern
- Unsere Suchseite muss auf Computern weniger als 2 MB an Bildern enthalten
- Unsere Startseite muss auf einem Moto G4-Handy in weniger als 5 Sekunden bei langsamem 3G geladen werden und interaktiv sein.
- Unser Blog muss bei Lighthouse-Leistungsprüfungen mehr als 80 Punkte erreichen
Fügen Sie Ihrem Build-Prozess Leistungsbudgets hinzu
Die Wahl eines Tools hängt stark vom Umfang Ihres Projekts und den Ressourcen ab, die Sie der Aufgabe widmen können. Es gibt einige Open-Source-Tools, mit denen Sie Ihrem Build-Prozess ein Budget hinzufügen können:
Wenn etwas über einem festgelegten Grenzwert liegt, haben Sie folgende Möglichkeiten:
- Vorhandene Funktionen oder Assets optimieren ✨️
- Vorhandene Funktion oder Asset entfernen 🗑️
- Neue Funktion oder neues Asset nicht hinzufügen 😝⛔
Leistungserfassung
Wenn Sie dafür sorgen, dass Ihre Website schnell genug ist, müssen Sie auch nach dem Start weitere Messungen vornehmen. 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 eines Projekts auf die Leistung konzentrieren. Wenn Sie dieses frühzeitig festlegen, können Sie später Backtracking vermeiden. Sie sollte als Anhaltspunkt für die Entscheidung dienen, was Sie auf Ihrer Website aufnehmen sollten. Die Grundidee besteht darin, Ziele zu setzen, damit Sie die Leistung besser in Einklang bringen können, ohne Funktionalität oder User Experience zu beeinträchtigen.🎯
Im nächsten Leitfaden erfahren Sie, wie Sie in wenigen einfachen Schritten Ihr erstes Leistungsbudget festlegen.