Schnell ladende Websites, intuitive Navigation und die wichtigsten Informationen auf einen Blick sind nur einige Faktoren, die ihren Beitrag zu einer besseren Customer Experience leisten. Die Auswirkungen einer optimalen Nutzererfahrung sind kaum von der Hand zu weisen. kaufDA hat in Zusammenarbeit mit Google an den dafür notwendigen Stellschrauben gedreht und konnte die Performance sowohl mobil als auch auf dem Desktop steigern. Wie es genau funktionierte, lesen Sie in diesem Artikel.
Mehr als zehn Millionen Nutzer in Deutschland profitieren von kaufDA. Über die Plattform erreichen Einzelhandelspartner des Unternehmens diese potenziellen Kunden mit individueller, interaktiver und standortbasierter Werbung in jeder Phase des Kaufprozesses – von der Einkaufsplanung online bis hin zur Kasse im Ladengeschäft vor Ort. Das Ziel von kaufDA: den Bedürfnissen der Nutzer bestmöglich gerecht werden, vor allem auf Mobilgeräten. Deshalb entschied sich das Unternehmen dazu, die Seitenladezeiten zu verbessern.
"Wir zielen auf eine perfekte Nutzererfahrung ab", erklärt Karsten Lehmann, CMO bei kaufDA. "Ganz gleich, wo, mit welchem Gerät und mit welcher Internetverbindung die Nutzer ihren Einkaufstrip planen, eine schnell ladende mobile Website ist ein Muss."
Der bisherige Code war überholt und wurde auch nicht mehr gebraucht. Hier sah das Unternehmen den Ansatzpunkt und genügend Spielraum für Verbesserungen. Damit die Fortschritte schnell erzielt werden konnten, mussten auch die Teams für Inbound-Marketing und Technik am selben Strang ziehen und an der Umsetzung der folgenden gemeinsamen Ziele mitarbeiten: Seitenladegeschwindigkeit verbessern, KPIs im Blick behalten und noch mehr Nutzer von kaufDA überzeugen.
Einer der wichtigsten Faktoren für den Projekterfolg war ein kleines, optimierungsorientiertes Entwicklerteam der Marketingabteilung. In einem großen Unternehmen wie kaufDA ist eine solche Aufstellung sehr wichtig, weil damit eine enge Zusammenarbeit sowie ein schneller Austausch zwischen den Teams, die dieselben Ziele verfolgen, ermöglicht wird.
Das Backend der Plattform war schon vorher verbessert worden. Dieses Mal stand das Frontend auf dem Optimierungsplan. Das Produktteam von kaufDA nahm deshalb am Google PageSpeed Race teil. Bei diesem dreimonatigen Wettbewerb treten Entwickler‑, Produkt‑ und Marketingteams gegeneinander an, um mit neuen Best Practices, Tools und anderen Optimierungstechniken sowie mithilfe von Lighthouse-Berichten die Seitenleistung zu verbessern.
Schnell merkte kaufDA, dass die Nutzererfahrung nicht an einen bestimmten Messwert bei der Seitenleistung oder an ein einzelnes Tool gebunden ist. Deshalb überwachten die Teams gleich mehrere Faktoren: die Ladezeit aus Nutzersicht, die Lighthouse-Leistungsbewertung, die kritische Pfadlänge und die Messwerte zu Nutzern. Außerdem wurden wichtige Messwerte berücksichtigt wie "Inhalte weitgehend gezeichnet", bei dem die Zeit ermittelt wird, bis der Nutzer den wichtigsten Inhalt der Website als geladen betrachtet. Absprung‑ und Conversion‑Raten sowie die Sitzungsdauer behielten die Teams ebenfalls im Blick.
Lighthouse ist ein Open-Source-Tool, mit dem sich die Qualität der Webseiten automatisch überprüfen und erheblich verbessern lässt. Im ausgegebenen Bericht werden Audits und Best Practices zu Leistung, Barrierefreiheit, progressiven Web-Apps und Suchmaschinenmarketing zusammengefasst. Jede URL wird in einer Standardtestumgebung einer Reihe von Prüfungen unterzogen. In einem Referenzdokument wird die Bedeutung der einzelnen Tests aufgeführt und erklärt, wie bestimmte Probleme behoben werden können.
Das ebenfalls bekannte Tool PageSpeed Insights verwendet Lighthouse zur Analyse. Dadurch können Entwickler die gleichen Leistungsprüfungen und Empfehlungen in einer Lab-Testumgebung nutzen. Durch PageSpeed Insights werden die kontrollierten Datenprüfungen aus dem Lighthouse Lab ergänzt. Die Felddaten stammen dabei aus dem Bericht zur Nutzererfahrung in Chrome. In der Felddatenansicht sind die realen Leistungsmesswerte wie "First Contentful Paint" und "First Input Delay" für die Seite, deren Ursprung und die Nutzer dargestellt.
kaufDA interessierte sich vor allem für die Leistungskategorie des Lighthouse-Berichts mit ihren vielen Testmöglichkeiten. Hier werden außerdem aktuelle Best Practices wie Beheben von Leistungsengpässen im kritischen Rendering-Pfad, Komprimieren von Ressourcen und Optimieren von Bildern analysiert. Detaillierte Daten zu wichtigen Geschwindigkeitsmesswerten, z. B. "Inhalte weitgehend gezeichnet" und "Zeit bis Interaktivität", werden ebenso ermittelt wie die Startzeit des JavaScripts und die DOM-Größe. Der Lighthouse-Bericht enthält nicht nur nicht bestandene Prüfungen, sondern auch Schätzungen, wie sich Problembehebungen auf die Geschwindigkeit einer Website auswirken. So lassen sich Optimierungen gezielt umsetzen. Lighthouse kann über die Befehlszeile in Chrome DevTools oder über die PageSpeed Insights API V5 abgerufen werden.
Schon vor der Einbindung von Lighthouse und PageSpeed Insights verwendete kaufDA beide Tools, um die folgenden Ziele abzustecken: 45 Punkte bei der Lighthouse-Leistungsbewertung und eine durchschnittliche Ladezeit von 2,5 Sekunden für den wichtigsten Seiteninhalt. Die Teams optimierten seitenspezifische Vorlagen und das Layout der Website insgesamt, wobei sie die einfachsten Aufgaben zuerst erledigten. Während des Projekts hat das Unternehmen die folgenden Maßnahmen durchgeführt:
- ungenutzten JavaScript-Code entfernen
- JavaScript-Code reduzieren
- ungenutzten CSS-Code entfernen
- kritischen CSS-Code einbetten
- Bilder komprimieren
- WebP-Bilder verwenden
- Lazy Loading für Bilder einsetzen
- kritische Anfragen entfernen
- das Design mehrerer Seiten überarbeiten
Wir zielen auf eine perfekte Nutzererfahrung ab. Ganz gleich, wo, mit welchem Gerät und mit welcher Internetverbindung die Nutzer ihren Einkaufstrip planen, eine schnell ladende mobile Website ist ein Muss.
Damit auch saisonale Schwankungen berücksichtigt werden, hat kaufDA Juli 2017 mit Juli 2018 verglichen und festgestellt, dass sich die Werte bei allen KPIs verbessert haben. "Unsere wichtigste geschäftliche Leistungskennzahl, die Conversion-Rate, die angibt, dass Nutzer mit einer digitalen Anzeige interagiert haben, ist im Jahresvergleich um fast drei Prozentpunkte gestiegen", berichtet Karsten Lehmann. "Die Absprungrate ist um fast einen Prozentpunkt gesunken und die Nutzer sind mehr als sieben Sekunden länger auf unseren Landingpages geblieben. Und bei der Lighthouse-Leistungsbewertung lag die Website bei durchschnittlich 85 Punkten über alle Seitentypen hinweg."
Als Nächstes steht das Redesign aller Seiten an. Dabei möchte kaufDA das Layout vereinfachen, die Anzahl der DOM-Knoten sowie noch mehr Code reduzieren und automatisch WebP-Bilder erzeugen lassen.
