Stylight steigert Seitenleistung und Conversion-Raten

2013 begann Stylight, das Marketing verstärkt auf Mobilgeräte auszurichten. Zunächst führte das Unternehmen ein responsives Website-Framework ein und konzentrierte sich auch bei der Angebotsentwicklung zunehmend auf Smartphones. Seit einiger Zeit steht die Optimierung der Ladezeiten für die wichtigsten Landingpages im Vordergrund. Das Produktteam von Stylight nahm deshalb am Google PageSpeed Race teil. Bei diesem dreimonatigen Wettbewerb treten Entwickler-, Produkt- und Marketingteams gegeneinander an, um mit neu erlernten Best Practices, Tools und anderen Optimierungstechniken die Seitenleistung mithilfe von Lighthouse zu verbessern.

Lighthouse ist eine Open-Source-Software. Mit diesem automatisierten Prüftool für Webseiten lässt sich die Qualität der Website erheblich verbessern. Im ausgegebenen Bericht werden Prüfungen und Best Practices zur Leistung, Barrierefreiheit, progressiven Web-Apps und SEO in einem Bericht zusammengefasst. "Wir haben die Seitenleistung mit Lighthouse ständig überwacht", so Matthias Hoyer, Head of Product bei Stylight. "Und weil wir die Auswirkungen auf die Leistungsmesswerte der Seite kannten, konnten wir ganz gezielt an den relevanten Optimierungsstrategien arbeiten."

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. Stylight interessierte sich vor allem für die Leistungskategorie mit ihren vielen Testmöglichkeiten. Hier werden zudem aktuelle Best Practices wie das Beheben von Leistungsengpässen im kritischen Renderingpfad, Komprimieren von Ressourcen und Optimieren von Bildern analysiert. Auch detaillierte Daten zu wichtigen Geschwindigkeitsmesswerten werden ermittelt, z. B. erster Aufbau der Seite, Zeit bis Interaktivität, Startzeit des JavaScripts und sogar die DOM-Größe. Im Lighthouse-Bericht werden nicht nur nicht bestandene Prüfungen aufgeführt, sondern auch Schätzungen, wie sich Problemkorrekturen in puncto Geschwindigkeit auf eine Website auswirken. So lassen sich Optimierungen gezielt umsetzen. Lighthouse kann über die Befehlszeile in Chrome DevTools und demnächst auch über eine API aufgerufen werden.

Wichtig war dem Stylight-Team eine bessere Lighthouse-Bewertung, weil sich die Ladezeit auf Conversion-Raten auswirkt. Außerdem sollte so ein höheres Ranking erzielt werden. "Vor dem Race haben wir uns hauptsächlich auf die Optimierung der Serverladezeit konzentriert", sagt Hoyer. "Wir benötigen verschiedene externe Skripts und Tracking-Pixel, damit die Zuordnung korrekt erfolgt. Deshalb dachten wir, dass es bei Browserladezeit und -Rendering nicht mehr viel Spielraum gibt. Außerdem waren wir davon überzeugt, dass die meisten unserer internen Seitenressourcen bereits optimal eingesetzt werden." Durch die Überwachung der Leistungsmesswerte mithilfe von Lighthouse-Berichten ermittelte Stylight vier wichtige Entwicklungsbereiche.

1. CSS-Dateien

Bisher wurde lediglich eine große Datei für alle Seitenarten im Header geladen. Die Optimierung der CSS-Ressourcen hatte erhebliche Auswirkungen und führte zu einer Umstrukturierung der Start-, Produkt-, Detail- und Suchseiten. CSS-Dateien sind jetzt inline eingebunden und enthalten nur die Informationen, die für den aktuellen Seitentyp erforderlich sind. In diesem Artikel wird beschrieben, wie die CSS-Datei optimal in eine Website eingebunden wird.

2. JavaScript-Dateien

Das Team nahm die einzige große JavaScript-Datei von Stylight buchstäblich auseinander und verkleinerte sie erheblich. Jetzt werden die Skripts asynchron geladen und enthalten nur die erforderlichen Informationen. In dieser Anleitung zum PageSpeed Race wird das Rendern von Blocking-Skripts auf einer Website erklärt.

3. Bilder

Stylight verbesserte das Lazy Loading für Bilder unterhalb des ersten Darstellungsbereichs. Dazu wurde ein Plug-in so angepasst, dass zunächst nur in diesem Abschnitt sichtbare Bilder geladen werden. Entsprechend der Nutzerinteraktionen erfolgt dann das Laden weiterer Abbildungen. Mithilfe des Tests auf Optimierung für Mobilgeräte sorgte das Team dafür, dass mit Lazy Loading geladene Bilder weiterhin für die Google-Indizierung verfügbar sind. Weitere Tipps zum Optimieren von Bildern werden in dieser Anleitung zum PageSpeed Race erläutert.

4. Externe Skripts

Auch das Einfügen externer Skripts in Google Tag Manager (GTM) erwies sich als hilfreich. Der Ladevorgang in GTM wird nicht mehr durch "Onload", sondern von der Nutzerinteraktion ausgelöst. Dadurch werden einige externe Skripts erst zu einem späteren Zeitpunkt geladen und wichtige Ressourcen für den ersten Darstellungsbereich freigegeben. Nach einer Prüfung wurden zudem überflüssige Tracking-Pixel entfernt. Informationen zu Triggern für Ereignisse in Google Tag Manager sind in diesem Artikel aufgeführt.

- Nicolas Stadtelmeyer, Managing Director bei Stylight

Ursprünglich wollte Stylight eine durchschnittliche Lighthouse-Leistungsbewertung von mindestens 80 für alle Seitenarten erreichen. Letztendlich erzielte das Team den sagenhaften Wert von 97. "Es war natürlich toll, dass sich dies auch positiv auf unsere Geschäftszahlen ausgewirkt hat", so Hoyer. "Die Clickout-Conversion-Rate auf Mobilgeräten stieg um 6,5 %. Sie zeigt, wie viele Nutzer zu einem unserer Partnershops weitergeleitet werden. In gleichem Maße erhöhte sich auch der Umsatz pro Besuch."

Gleichzeitig konnte Stylight interagierenden Nutzern die Verwendung der Website erleichtern. Denn diese Kohorte ist für das Unternehmen von großer Bedeutung. "Wir haben mehrere Faktoren definiert, mit denen wir festlegen, was ein 'interagierender Nutzer' ist", erklärt Hoyer. "Dazu gehört unter anderem die Zeit, die Nutzer auf den Websites von Stylight und Partnershops verbringen, wenn sie nach Produkten und Angeboten suchen. Für diese Kohorte verzeichneten wir einen Anstieg von 18 % bei wiederkehrenden Nutzern. Die optimierte Leistung der mobilen Website führte also zu mehr interagierenden Nutzern und damit auch zu einem Umsatzanstieg."