Ihr erstes Leistungsbudget

Wenn Sie ein persönliches, geschäftliches oder Familienbudget festlegen, legen Sie eine Ausgabengrenze fest, die Sie einhalten. Leistungsbudgets funktionieren ähnlich, nur für Messwerte, die sich auf die Websiteleistung auswirken.

Wenn Sie ein Leistungsbudget festgelegt und durchgesetzt haben, können Sie sicher sein, dass Ihre Website so schnell wie möglich gerendert wird. Dies verbessert die Nutzererfahrung und wirkt sich positiv auf die Geschäftsmesswerte aus.

Im Folgenden zeigen wir Ihnen, wie Sie in wenigen einfachen Schritten Ihr erstes Leistungsbudget festlegen.

Wenn Sie die Leistung einer bestehenden Website verbessern möchten, identifizieren Sie zunächst die wichtigsten Seiten. Dabei kann es sich beispielsweise um Seiten mit den meisten Nutzerzugriffen oder um eine Produkt-Landingpage handeln.

Nachdem Sie Ihre wichtigsten Seiten identifiziert haben, ist es an der Zeit, sie zu analysieren. Zuerst konzentrieren wir uns auf die zeitlichen Meilensteine, die die User Experience am besten messen.

Im Bereich „Audits“ der Chrome-Entwicklertools finden Sie Lighthouse. Führen Sie auf jeder Seite in einem Gastfenster Audits aus, um Folgendes aufzuzeichnen:

Lighthouse-Bereich in den Chrome-Entwicklertools

Nehmen wir als Beispiel die hochspezialisierte Suchmaschine Doggos.com. Das Ziel von Doggos.com ist es, alle hundebezogenen Dinge im Internet zu indexieren. Die wichtigsten Seiten sind die Startseite und die Ergebnisseiten. Hier sehen Sie die für die Website auf Computern und Mobilgeräten gemessenen FCP- und TTI-Werte.

Computer FCP TTI
Startseite 1.680 ms 5.550 ms
Ergebnisseite 2.060 ms 6.690 ms
Desktop-Analyse von Doggos.com
Mobilgeräte FCP TTI
Startseite 1.800 ms 6.150 ms
Ergebnisseite 1.100 ms 7.870 ms
Analyse von Doggos.com auf Mobilgeräten

Wettbewerbsanalyse

Nachdem Sie Ihre eigene Website analysiert haben, ist es an der Zeit, die Websites Ihrer Mitbewerber zu analysieren. Der Vergleich von Ergebnissen von Websites, die Ihrer ähneln, ist eine großartige Möglichkeit, ein Leistungsbudget zu ermitteln. Unabhängig davon, ob Sie an einem etablierten Projekt arbeiten oder von Grund auf neu beginnen, ist dies ein wichtiger Schritt. Sie erhalten einen Wettbewerbsvorteil, wenn Sie schneller sind als Ihre Mitbewerber.

Wenn du dir nicht sicher bist, welche Websites du dir ansehen solltest, kannst du die folgenden Tools ausprobieren:

  1. Keyword „related:“ in der Google Suche
  2. Alexa-Funktion für ähnliche Websites
  3. SimilarWeb

Screenshot der Google Suche mit dem ähnlichen Suchbegriff

Für ein realistisches Bild sollten Sie mindestens zehn Konkurrenzunternehmen finden.

Budget für zeitliche Meilensteine

Unsere Nischensuchmaschine in diesem Beispiel hat eine Handvoll Mitbewerber und wir konzentrieren uns auf die Optimierung der Startseite für Mobilgeräte. Mehr als die Hälfte des Internettraffics erfolgt heutzutage über Mobilfunknetze und die standardmäßige Verwendung von Mobilnummern hat nicht nur Vorteile für die Nutzer von Mobilgeräten, sondern auch für Computernutzer.

Erstellen Sie ein Diagramm mit FCP- und TTI-Zeiten für alle ähnlichen Websites und heben Sie die schnellsten in der Reihe hervor. Ein Diagramm wie dieses vermittelt Ihnen ein klareres Bild der Leistung Ihrer Website im Vergleich zur Konkurrenz.

Website/Startseite FCP TTI
goggles.com 880 ms 3.150 ms
Doggos.com 1.800 ms 6.500 ms
quackquackgo.com 2.680 ms 4.740 ms
ding.xyz 2.420 ms 7.040 ms
Wettbewerbsanalyse von Doggos.com im 3G-Netzwerk
Doggo am Computer
Doggos.com scheint mit dem FCP-Messwert in Ordnung zu sein, aber bei TTI deutlich hinterherhinken

Es gibt also Verbesserungspotenzial. Als Richtschnur ist die 20-%-Regel. Untersuchungen haben ergeben, dass Nutzende einen Unterschied bei den Antwortzeiten erkennen, wenn diese größer als 20 % sind. Wenn Sie also deutlich besser als die am besten vergleichbare Website sein möchten, müssen Sie mindestens 20% schneller sein.

Messen Aktuelle Uhrzeit Budget (20% schneller als die Konkurrenz)
FCP 1.800 ms 704 ms
TTI 6.500 ms 2.520 ms
Leistungsbudget, mit dem Doggos.com der Konkurrenz einen Schritt voraus sein könnte

Wenn Sie versuchen, eine bestehende Website zu optimieren, erscheint dieses Ziel möglicherweise unmöglich zu erreichen. Das ist kein Zeichen dafür, dass du aufgeben musst. Beginnen Sie mit kleinen Schritten und legen Sie ein Budget fest, das 20% schneller ist als Ihre aktuelle Leistung. Setzen Sie die Optimierung fort.

Für Doggos.com könnte ein überarbeitetes Budget so aussehen:

Messen Aktuelle Uhrzeit Anfängliches Budget (20% schneller als die aktuelle Zeit) Langfristiges Ziel (20% schneller als die Konkurrenz)
FCP 1.800 ms 1.440 ms 704 ms
TTI 6.500 ms 5.200 ms 2.520 ms
Leistungsbudget von Doggos.com wurde überarbeitet

Verschiedene Messwerte kombinieren

In einem soliden Leistungsbudget werden verschiedene Arten von Messwerten kombiniert. Wir haben bereits das Budget für Meilensteine festgelegt und fügen jetzt zwei weitere hinzu:

  • mengenbasierte Messwerte
  • regelbasierte Messwerte

Budget für mengenbasierte Messwerte

Unabhängig von der Gesamtzahl der Seitengewichtungen, die Sie sich einfallen lassen, versuchen Sie, weniger als 170 KB an kritischen Pfaden (komprimiert/minimiert) zu liefern. So wird sichergestellt, dass Ihre Website auch auf preiswerten Geräten und langsamem 3G schnell ist.

Sie können auch ein höheres Budget für die Desktop-Version haben, aber lassen Sie es nicht scheuen. Laut den Daten des HTTP-Archivs aus dem letzten Jahr liegt der Medianwert für die Seitengröße sowohl auf Computern als auch auf Mobilgeräten über 1 MB. Um eine leistungsstarke Website zu erhalten, muss Ihr Ziel weit unter diesen Medianwerten liegen.

Hier sind einige Beispiele basierend auf TTI-Budgets:

Netzwerk Gerät JS Bilder CSS HTML Schriftarten Gesamt Budget für Zeit bis Interaktivität
Langsames 3G Moto G4 100 30 10 10 20 ~170 KB 5 s
Langsames 4G Moto G4 200 50 35 30 30 ~345 KB 3 s
WiFi Computer 300 250 50 50 100 ~750 KB 2s

Es ist nicht einfach, ein Budget auf der Grundlage von Mengenmesswerten festzulegen. Eine E-Commerce-Website mit vielen Produktfotos unterscheidet sich stark von einem Nachrichtenportal, das hauptsächlich aus Text besteht. Wenn Sie Anzeigen oder Analysen auf Ihrer Website verwenden, steigt dadurch auch die Menge an JavaScript-Code, den Sie versenden.

Verwenden Sie die Tabelle oben als Ausgangspunkt und passen Sie sie je nach Art der Inhalte an, mit denen Sie arbeiten. Definieren Sie, was Ihre Seiten enthalten werden, überprüfen Sie Ihre Recherche und treffen Sie eine fundierte Vermutung zu den einzelnen Asset-Größen. Wenn Sie beispielsweise eine Website mit vielen Bildern erstellen, sollten Sie die JS-Größe stärker einschränken.

Sobald Ihre Website funktioniert, sollten Sie Ihre Leistung im Hinblick auf nutzerorientierte Leistungsmesswerte überprüfen und Ihr Budget anpassen.

Budget für regelbasierte Messwerte

Sehr effektive regelbasierte Messwerte sind Lighthouse-Werte. Lighthouse gibt deiner App fünf Kategorien, darunter die Leistung. Die Leistungsbewertungen werden anhand von fünf verschiedenen Messwerten berechnet, darunter „First Contentful Paint“ und „Zeit bis Interaktivität“.

Wenn Sie eine hochwertige Website erstellen möchten, legen Sie das Budget für die Lighthouse-Leistungsbewertung auf mindestens 85 (von 100) fest. Verwenden Sie Lighthouse CI, um sie für Pull-Anfragen zu erzwingen.

Priorisieren

Fragen Sie sich, welche Interaktion Sie auf Ihrer Website erwarten. Bei Nachrichtenwebsites besteht das Hauptziel darin, Inhalte zu lesen. Daher sollten Sie sich darauf konzentrieren, schnell zu rendern und den FCP-Wert niedrig zu halten. Besucher von Doggos.com möchten so schnell wie möglich auf relevante Links klicken, daher hat eine niedrige TTI oberste Priorität.

Finden Sie genau heraus, welcher Teil Ihrer Zielgruppe auf Computern und auf Mobilgeräten surft, und priorisieren Sie die Suche. Eine Möglichkeit, dies herauszufinden, besteht darin, sich über das Dashboard des Berichts zur Nutzererfahrung in Chrome anzusehen, was sich Ihre Zielgruppe auf den Websites von Mitbewerbern tut.

Daten zur Geräteverteilung aus dem Bericht zur Nutzererfahrung in Chrome
Daten zur Geräteverteilung aus dem Bericht zur Nutzererfahrung in Chrome

Nächste Schritte

Achten Sie darauf, dass Ihr Leistungsbudget während des gesamten Projekts durchgesetzt wird, und beziehen Sie es in Ihren Build-Prozess auf.