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.
Vorabanalyse
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:
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 |
| Mobilgeräte | FCP | TTI |
|---|---|---|
| Startseite | 1.800 ms | 6.150 ms |
| Ergebnisseite | 1.100 ms | 7.870 ms |
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:
- Keyword „related:“ in der Google Suche
- Alexa-Funktion für ähnliche Websites
- SimilarWeb
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 |
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 |
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 |
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.
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.