Die Marke Weltbild hat ihre Wurzeln in einem 1948 gegründeten Verlag der katholischen Kirche, inzwischen ist das Düsseldorfer Beratungs- und Investmenthaus Droege Group Alleingesellschafter. Weltbild ist heute einer der größten Multikanal-Buchhändler und bietet Kunden Einkaufsmöglichkeiten über Onlineshops, klassischen Versandhandel und eigene Filialen. Nach einem Ranking von buchreport handelt es sich um einen der Top-3-Buchhändler in Deutschland. Im Onlinebuchhandel belegt Weltbild den zweiten Platz. Mit 83 Prozent in der Kategorie “Markenbekanntheit” handelt es sich um die bekannteste Buchhandelsmarke in Deutschland.
DIE ZIELE
Optimierung des First Meaningful Paint für den Kunden
Niedrigere Bounce Rate
Steigerung der Conversion Rate
DER ANSATZ
Asynchrones Laden der Skripte, Stylesheets und Fonts
Optimierung der Bilder
Überprüfung und Anpassung der Cache Header und Komprimierung von statischen Dateien
DIE ERGEBNISSE
Der PageSpeed Insight Score verbesserte sich von 63 auf 88 Punkte
Die Ladezeit bis zum “First Meaningful Paint” verkürzte sich um bis zu 50 % auf 0,5 Sekunden
Die Lighthouse-Messungen von First Meaningful Paint verbesserte sich von 2,66 Sekunden auf 2,10 Sekunden
Für Weltbild bot das Google PageSpeed Race eine gute Möglichkeit, den Fokus auf die mobile Optimierung seiner Webseiten zu legen. Das PageSpeed Race war ein zweimonatiger Wettbewerb, bei dem 45 Unternehmen in Deutschland ‒ mit technischer Beratung von Google-Experten ‒ an ihren Webseiten gearbeitet haben. Dabei wurden die drei URLs, Start-, Kategorie- und Produktdetailseite, ausgewählt und entsprechend optimiert. Die Implementierung verschiedener Maßnahmen erfolgte, neben anderen Analysewerkzeugen, mit Hilfe der PageSpeed Insights von Google, die auf einer Reihe von Best Practice Checks basieren und die Leistungsfähigkeit einer Webseite auf Mobilgeräten und Desktop-PCs misst. Zu diesem Zweck wird eine URL einmal mit einem mobilen User-Agenten und einmal mit einem Desktop-User-Agenten abgerufen. Im Anschluss wird die PageSpeed-Bewertung ermittelt, die zwischen 0 und 100 Punkten liegen kann. Je niedriger der Wert ist, desto geringer ist die Leistungsfähigkeit einer Seite. Wenn eine Webseite eine Punktzahl von 85 und mehr erreicht, gilt sie als leistungsstark. PageSpeed Insight zeigt das Verbesserungspotential einer Seite im Hinblick auf die erforderliche Zeit zum Laden des ohne Scrollen sichtbaren Inhalts und zum anderen die erforderliche Zeit zum vollständigen Laden einer Seite.
Vor Optimierung: Weltbild erzielt PageSpeed Insights Score von 63 Punkten
Vor Beginn des Google PageSpeed Race lag Weltbilds PageSpeed Insight Score bei 63 von 100 möglichen Punkten. Die Ladezeit der Seiten habe sich dabei nicht als das größte Problem dargestellt. Vielmehr ging es dem Team um Michael Volk, Web Developer bei Weltbild, darum, den “First Meaningful Paint” zu verbessern. Darunter versteht man jenen Zeitpunkt, an dem der Nutzer den wichtigsten Inhalt der Webseite als fertig geladen empfindet. Dies ist der Fall, wenn der “above the fold”-Inhalt sowie die Web Fonts geladen wurden.1 Eine kurze Ladezeit bis zum “First Meaningful Paint” ist insbesondere für die Benutzerfreundlichkeit der Seite entscheidend. Dies bestätigt auch Maximilian Bruijnen, Leitung Suchmaschinenmarketing bei Weltbild: “Durch die Senkung der Ladezeiten möchten wir die Usability verbessern und dem Kunden ein flüssigeres Einkaufserlebnis im Shop liefern. Zudem versprechen wir uns natürlich auch eine Reduzierung der Bounce Rate aufgrund zu langer Ladezeiten sowie eine Steigerung der Conversion-Rate. Hier gibt es einige Studien, die belegen, dass schnellere Ladezeiten die Conversion-Rate positiv beeinflussen.”
Vor der Teilnahme am Wettbewerb hatte sich das IT-Team nicht auf den sichtbaren Teil der Seite fokussiert und beispielsweise nicht auf das asynchrone Laden von Elementen unterhalb des sichtbaren Teils der Seite geachtet. In diesem Bereich wurde das größte Verbesserungspotential vorgeschlagen.
Vor der Optimierung:
Nach der Optimierung:
“Wir konzentrierten uns nur auf das Frontend und arbeiteten uns von den kleinen Paketen zu den großen Paketen vor”, so Michael Volk weiter. “Zunächst begannen wir mit der Optimierung der Bilder, danach bearbeiteten wir die Cache-Zeiten auf unseren Servern bzw. in unseren Konfigurationswerten. Anschließend stand JavaScript und schlussendlich CSS auf unserer Liste. Das CSS war für uns der größte Punkt.”
Für die Bildausspielung setzt das Weltbild-Team laut eigenen Aussagen auf Adobe Scene 7. Das Team nutzte den Spielraum, den die Konfigurationsmöglichkeiten boten und optimierte beispielsweise die ausgespielten Bildgrößen. Zudem wurden auch die Cache-Zeiten konfiguriert. “Wir haben uns angesehen: Welcher Header wird ausgespielt, wie lange ist der Header gültig, was spielen wir da aus und welche Dateien haben wir zum Beispiel ganz vergessen?”, erläutert Michael Volk.
Größter Optimierungshebel: Einbindung des kritischen CSS
Beim JavaScript bündelte das Team die Dateien zunächst zu einer größeren Datei, um die Roundtrips zu verringern. Vor der Optimierung wurden mehrere Dateien am Ende des HTML-Bodys synchron geladen. “Anschließend haben wir versucht, die Abhängigkeiten aufzulösen, weil wir auch externe Bibliotheken, beispielsweise jQuery, nutzen. Für Videoeinspielungen benutzen wir auch Skripte von externen Anbietern.” Auch die Verschiebung der JavaScript-Datei auf das Ende des Ladeprozesses erzielte nicht das gewünschte Ergebnis. Als größter Optimierungshebel und auch größte Herausforderung zugleich sollte sich das asynchrone Laden einer großen JavaScript-Datei unabhängig vom sichtbaren Bereich, CSS Stylesheets und Fonts, erweisen.
Die Einbindung des kritischen CSS erwies sich zwar als langwieriger Prozess, erzielte jedoch auch die größte Verbesserung. Zuvor wurde das CSS komplett im Head-Bereich der Seite geladen. Dies führte dazu, dass erst das Skript heruntergeladen, ehe die Seite angezeigt wurde. “Durch die Einbindung und Optimierung des kritischen CSS konnten wir gleichzeitig das Problem der Priorisierung im sichtbaren Bereich angehen. Zunächst wird nur das CSS für den sichtbaren Bereich geladen.” Für die Erzeugung des kritischen CSS setzte Weltbild auf das Tool Penthouse. Dieses Tool prüft automatisch, was der sichtbare Bereich der Seite ist und extrahiert daraus die CSS-Klassen.
Nach Optimierung: Der PageSpeed Insights Score steigerte sich von 63 auf 88 Punkte
“Für uns war es wichtig, dass der First Meaningful Paint besser wurde. Wir haben das Bestreben, so schnell wie möglich die Seite zu laden und somit eine bestmögliche Nutzererfahrung zu bieten. Die Kunden brechen öfter ab, je länger es braucht, die Seite zu laden und damit entgeht uns die Chance, einen Seitenbesuch in einen Einkauf zu verwandeln”, erläutert Volk das Hauptanliegen, bei der Google PageSpeed Race teilzunehmen.2 Das beste Ergebnis wurde auch in diesem Bereich erzielt. Der PageSpeed Insights Score steigerte sich von 63 auf 88 Punkte. Die Ladezeit3 der Seiten verkürzte sich zwischen 15 und 24 Prozent auf sechs Sekunden. Mit diesem Ergebnis belegte Weltbild den ersten Platz in der Gewinnerkategorie bis 90 Punkte.
Michael Volk glaubt, dass die gemachten Optimierungen langfristig den größten Effekt haben werden und nimmt auch Learnings für die Zukunft mit. “Wir werden in Zukunft auf jeden Fall unseren HTML-Code verringern. Schließlich ist es wichtig, was der Kunde als erstes herunterlädt und sieht. Das asynchrone Nachladen ist das Wichtigste, das wir mitnehmen.”
Sie möchten Ihre mobile Website auch optimieren?
Dann testen Sie unser kostenloses Tool "Test My Site". Mit "Test My Site" können Website-Betreiber ihre mobile Performance analysieren. Betrachtet werden: die Geschwindigkeit der mobilen Website, die Wettbewerbsfähigkeit und die Anzahl der Website-Besucher, die das Unternehmen möglicherweise durch zu langes Laden seiner Site verliert. Anschließend erhalten Sie einen Report mit Verbesserungsvorschlägen für Ihre Website.
Weitere hilfreiche Informationen erhalten Sie zudem in unseren Videoseminaren zu der Google PageSpeed Race:
Videoseminar 1: PageSpeed Insights Tool, Chrome Developer Tools, Modifizierung von CSS, HTML Ressourcen
Videoseminar 2:Cache Strategien, Wasserfall Analysen, Lazy loading, Carousels
Videoseminar 3: Asynchrone Skripte, Accelerated Mobile Pages & Progressive Web Apps (Performance & Ladezeit Perspektive), Lighthouse tool
