Die Korrelation zwischen Websiteleistung und Geschäftsmesswerten war der Schlüssel zum Erfolg der Optimierungsbemühungen.
Swappie ist ein erfolgreiches Start-up, das generalüberholte Smartphones verkauft. Einige Jahre lang hat das Unternehmen die Leistungssteigerung der Website hinten angestellt und sich stattdessen auf die Einführung neuer Funktionen konzentriert. Als jedoch die Geschäftsergebnisse auf der mobilen Website hinter denen der Desktopversion zurückblieben, wurde eine Änderung vorgenommen. Das Unternehmen konzentrierte sich auf die Optimierung der Leistung und verzeichnete bald einen Anstieg des Umsatzes über Mobilgeräte.
42 %
Mehr Umsatz durch Besucher auf Mobilgeräten
10 pp*
*Relativwert der mCvR in Prozentpunkten
Die Chance hervorheben
Die relative mobile Conversion-Rate (Rel mCvR) wird berechnet, indem die mobile Conversion-Rate durch die Conversion-Rate für Computer geteilt wird. Es gibt viele Möglichkeiten, Geschwindigkeitsmesswerte zu erfassen, aber die Verknüpfung mit Geschäftsmesswerten kann ziemlich schwierig sein. Da dieselben Kampagnen und saisonalen Effekte sowohl auf Mobilgeräten als auch auf Computern ausgeliefert werden, werden mit dem Messwert „Rel mCvR“ die Auswirkungen dieser externen Parameter herausgerechnet. So sehen Sie nur, ob sich die Leistung der mobilen Website verbessert hat oder nicht.
Der Durchschnitt für die zehn größten E-Commerce-Websites in den USA liegt bei einer relativen mCvR von 50%, Swappie hingegen erreichte 24%. Das deutete darauf hin, dass es Probleme mit der mobilen Website gab und dass dem Unternehmen Umsatz entging. Das führte zur Einführung des Projekts zur Leistungssteigerung.
Auswirkungen von Leistungsverbesserungen messen
Swappie hat in Google Analytics mithilfe dieser Vorlagentabelle das tägliche Tracking der relativen mCvR und der durchschnittlichen Seitenladezeit auf Mobilgeräten eingerichtet. Anleitung zur Verwendung der Tabelle Außerdem begann das Unternehmen, Core Web Vitals über Google Analytics und BigQuery zu erfassen. Nachdem das Tracking eingerichtet war, begannen die Entwickler mit der Optimierung der Websiteleistung.
Nach nur drei Monaten Arbeit waren die Auswirkungen klar erkennbar: Die relative mobile Conversion-Rate stieg von 24% auf 34% und der Umsatz über Mobilgeräte stieg um 42 %.
23 %
Niedrigere durchschnittliche Seitenladezeit
55 %
Niedrigerer LCP
91 %
Niedrigerer CLS
90 %
Niedrigere FID
Optimierungen
LCP und CLS optimieren
Das Entwicklungsteam von Swappie stellte fest, dass es viel Raum für Verbesserungen bei kleinen Dingen gab, die lange Zeit übersehen wurden. Bei der Untersuchung der Website in verschiedenen Ansichten und in verschiedenen Sprachen wurden Probleme mit LCP und CLS festgestellt, die sich leicht beheben ließen und einen großen Einfluss auf die Gesamtleistung hatten. So führte beispielsweise das Rendern des LCP-Elements nach Möglichkeit auf dem Server anstelle des Clients zu einer Verringerung des LCP.
Das Erkennen von Layoutänderungen war eine Herausforderung, da sie je nach Darstellungsbereich und Verbindung stark variieren können. Nachdem das Unternehmen Core Web Vitals von Nutzern in seine Analytics-Daten aufgenommen hatte, wusste es, dass es auf dem richtigen Weg war, da der CLS gesunken war.
Bilder
Bilder wurden durch Vorabladen, Lazy Loading und richtige Größe optimiert. Sie laden wichtige Bilder (z. B. LCP) vorab und Bilder außerhalb des Darstellungsbereichs nur bei Bedarf.
Schriftarten
Swappie hat die Schriftarten optimiert, indem es den Anbieter gewechselt hat. Das hatte große Auswirkungen, da sie eine optimale Möglichkeit benötigten, Schriftarten zu verarbeiten, die für verschiedene Sprachen erforderlich sind.
Drittanbieter-Scripts
Swappie hat viel Zeit darauf verwendet, jedes Script und Widget von Drittanbietern zu prüfen, wo es verwendet wurde und welche Funktionen es bietet. Nach Gesprächen mit allen Stakeholdern haben sie Pläne entwickelt, um die Auswirkungen der Scripts auf die Website zu reduzieren und gleichzeitig die Funktionen beizubehalten. Er entfernte alles Unnötige und optimierte den Rest. So konnte er die Menge des Drittanbieter-JavaScripts auf der Website deutlich reduzieren.
Ungenutzten Code entfernen und Bündelung optimieren
Durch die Optimierung der Importe und das Entfernen nicht verwendeter JS- und CSS-Dateien konnte die Websiteleistung von Swappie geringfügig verbessert werden. Diese kleinen Verbesserungen summieren sich jedoch mit der Zeit. Außerdem wurde die Konfiguration der Sets optimiert.
Eine Leistungskultur bei Swappie schaffen
Das Ergebnis, das Swappie erzielt hat, ist nicht nur auf die Änderungen am Code zurückzuführen, sondern auch auf die Änderungen in der Organisation und ihren Prioritäten.
Der leitende Entwickler Teemu Huovinen erklärt:
Sie müssen die Websitegeschwindigkeit mit Geschäftsmesswerten verknüpfen, um ihre Bedeutung wirklich hervorzuheben. Wenn Sie wenig Zeit und Ressourcen haben, was immer der Fall ist, kommt es auf die Priorisierung an. Der Kundennutzen sollte an erster Stelle stehen. Es ist jedoch leicht, sich auf neue Funktionen und direktere Conversion-Verbesserungen zu konzentrieren, wenn Sie die Websitegeschwindigkeit nur als Verbesserung des Erscheinungsbildes der Website betrachten. Es ist nicht immer einfach, die Websitegeschwindigkeit mit Geschäftsmesswerten zu verknüpfen. Hier hat uns die Berechnung mit Rel mCvR sehr geholfen.
Teemu Huovinen
Als das Entwicklerteam die Möglichkeit erhielt, sich ein ganzes Quartal lang ausschließlich auf die Websitegeschwindigkeit zu konzentrieren, war es motivierter, sich eingehender mit dem Thema zu befassen.
Die Kombination aus unserer Wirkung und dem Wachstum unseres Teams macht das Ganze noch beeindruckender. Vier unserer sieben Entwickler hatten innerhalb des Monats angefangen, als wir mit der Optimierung der Leistung begannen. Das Team hat wirklich tolle Arbeit geleistet. Es ist wirklich erstaunlich, wie wir uns auf das Thema einigen und eine so große Wirkung erzielen konnten.
Teemu Huovinen
Teemu weist auch darauf hin, wie wichtig es ist, sich Zeit zu nehmen, um zu Beginn datengestützte Pläne zu erstellen, die Verwendung des Tab „Leistung“ in den DevTools zu erlernen und Nutzeranalysen einzurichten, bevor Verbesserungen vorgenommen werden. Diagramme (insbesondere solche, die in die richtige Richtung gehen) sind eine gute Quelle für Feedback und Validierung Ihrer Arbeit. Durch die Betrachtung der Core Web Vitals in der Praxis zusammen mit den Lighthouse-Werten (im Labor ermittelt) konnte sich das Team darauf konzentrieren, die richtigen Dinge zu optimieren, die sich auf die meisten Nutzer auswirken.