Das Buchungsportal Campsy wurde im Jahr 2016 gegründet und hat sich auf Campingurlaube spezialisiert. Nutzer können über die Plattform Campingplätze buchen. Campsy bietet mit über zweitausend direkt buchbaren Campingplätzen das größte Inventar in Europa an und ermöglicht es Interessierten, einfache und schnelle Buchungen vorzunehmen. Nutzer können Camping-Arten, Orten oder Preisen filtern. Darüberhinaus können sie sich Fotos und Bewertungen ansehen, ehe sie buchen.
DIE ZIELE
Steigerung der Online-Buchungen
Optimierung der Ladegeschwindigkeit von mobilen Zielseiten
DER ANSATZ
Skalierung und Zuschneiden der Bilder im CDN (Content Delivery Network) auf optimale Werte
Repositionierung der JavaScript Elemente im HTML-Code, damit Content-Load zuerst beginnt und mit JavaScript asynchron geladen wird
Einbau eines zusätzlichen “memory cache layer” für Content-Elemente
Einbau eines “cache layers” für alle Preis- und Verfügbarkeitskombinationen, so dass diese nicht berechnet werden müssen, sondern von einer neuen Datenbank ins “cache layer” geladen werden
DIE ERGEBNISSE
Senkung der Absprungrate um 12 %
Verbesserung der generellen Cross-Device-Conversionrate um 8 %
Steigerung der mobilen Verkaufszahlen um 6 %
Verkürzung der Server Response Time für die Homepage von 4,20 (ca. Wert, da load abhängig) auf 0,48 Sekunden*
Senkung der Ladezeit der Produktdetailseite um -58 % auf 4 Sekunden
PageSpeed Score von PageSpeed Insights im Durchschnitt von 27 auf 75 Punkte verbessert
*Basis: Google Page Insights und New Relic, keine Netzwerkabhängige- sondern Systemperformanz
Das Angebot richtet sich an Familien, ältere Paare oder Freundesgruppen. “Unser erster Typ Kunde sucht nach Outdoor-Urlaub und ist bereits gut ausgerüstet, sei es mit einem Zelt oder mit einem Wohnmobil. Normalerweise sucht er nach einem kleinen Bungalow in der Natur. Der zweite Typ Kunde ist abenteuerlustiger, möchte vielleicht über das Wochenende einen Campingausflug im Zelt machen. Im Durchschnitt sind diese jünger und zwischen 25 und 32 Jahren alt”, Philipp Hillenbrand, CEO und Gründer von Campsy.
Was ihnen jedoch allen gemeinsam ist: Oft suchen sie nach Campingplätzen, wenn sie gerade unterwegs sind. Umso wichtiger ist es für Campsy, ihnen eine schnelle und einfache Nutzererfahrung auch in langsamen Netzwerkumgebungen zu bieten. Dazu gehört auch eine optimierte mobile Website. “Auch wenn der Anteil des Internettraffics nahezu geteilt ist in Desktop und Mobile, erhalten wir mehr Buchungen über Smartphonenutzer. Denn oftmals sind die Reisenden unterwegs und suchen einen Platz für den gleichen Tag oder den Tag darauf, an dem sie schlafen können. Daher ist Mobile sehr wichtig für uns”, führt Philipp Hillenbrand weiter aus.
Vor Optimierung: Ladezeit betrug über 9 Sekunden
Für Campsy war das PageSpeed Race eine gute Gelegenheit an der Performance der Seite zu arbeiten. Beim PageSpeed Race handelt es sich um einen zweimonatigen Wettbewerb, in dem 45 Unternehmen in Deutschland an der Optimierung ihrer Webseiten gearbeitet haben und dabei von Google-Experten technisch beraten wurden. Hierbei wurden die drei URLs, Start-, Kategorie- und Produktdetailseite, ausgewählt und anhand der vorgeschlagenen Optimierungshebel verbessert. Dafür verbesserten die Teilnehmer ihre Seite mithilfe der PageSpeed Insights von Google, die auf einer Reihe von Best Practice Checks basieren und die Leistungsfähigkeit einer Seite auf Mobilgeräten und Desktop-Computern misst. Dazu wird die URL einmal mit einem mobilen User-Agenten und ein weiteres Mal mit einem Desktop-User Agenten abgerufen. Danach wird die PageSpeed-Bewertung ermittelt, die zwischen 0 und 100 Punkten liegen kann. Eine leistungsstarke Seite weist eine Punktzahl von 85 und mehr aus. PageSpeed Insight zeigt die Möglichkeiten der Leistungssteigerung einer Seite hinsichtlich der erforderlichen Zeit zum Laden des ohne Scrollen sichtbaren Inhalts und zum anderen die erforderliche Zeit zum vollständigen Laden der Seite.1
Die Gründe für die Teilnahme am PageSpeed Race waren vielseitig: “Natürlich ist die Nutzererfahrung sehr wichtig. Dazu kommt aber auch, dass die Seitengeschwindigkeit sehr wichtig für unser Supply Chain Management ist”, sagt Philipp Hillenbrand. Insbesondere der Optimierungsgrad der Seite war ausbaufähig und wies lediglich 23 von 100 Punkten auf. Die Ladezeit zu Beginn des Wettbewerbs betrug über 9 Sekunden. Die gesamte Webseite wurde aktualisiert und als Teil der Quartalsplanung angegangen.
Optimierungshebel: Bildoptimierung, CSS, Prerendering des JavaScripts
Bei der Analyse fand das Team um Levi Ferreira, Director of Engineering, Campsy, heraus, dass die Hauptprobleme im Front-End-Bereich von den Bildern sowie dem Laden des JavaScripts und der CSS-Dateien herrührten, da sie die Geschwindigkeit und Skripts blockierten. Um das Problem zu beheben, setzte Campsy auf verschiedene Optimierungshebel, die ihnen von PageSpeed Insights vorgeschlagen wurden. Während sie zunächst das Back-End optimierten, erfolgten die nächsten Schritte insbesondere im Hinblick auf die Verbesserung der Server-Response-Zeiten und des Browser Cachings, die Optimierung der Bilder sowie die Verbesserung des visuell sichtbaren Teils der Start-, Kategorie- und Produktdetail-Seite.
Neben der Optimierung der CSS-Bereitstellung erwies sich das Prerendering des JavaScripts als eine wichtige Maßnahme. Darunter versteht man das Vorladen einer Ressource in den Cache eines Browsers. Der Vorteil besteht darin, dass die Ressource im Hintergrund geladen wird, ohne dass der Nutzer dies bemerkt. Wenn ein Nutzer eine referenzierte Webseite aufruft, wird diese fast unmittelbar dargestellt, da sie vorher bereits gerendert wurde. “Um die Bilder zu optimieren, habe wir ein Tool namens Cloudinary verwendet. Das Tool hat die Aufgabe für uns übernommen, die Bilder zu croppen und zu skalieren,” erzählt Levi Ferreira.
Nach Optimierung: Verbesserung der Ladezeit um bis zu 58 Prozent
Die Kommunikation zwischen dem Marketing- und der IT-Abteilung verlief ohne Probleme. “Wir sitzen direkt beieinander”, sagt Amaryllis Liampoti, die bei Campsy für das Marketing zuständig ist. “Es war ein bekanntes Problem, dass unsere Webseite schneller werden musste. Das Google PageSpeed Race gab uns die Motivation, uns gegen andere Teilnehmer zu behaupten und es auf unserer Liste zu priorisieren.” Levi Ferreira ergänzt: “Für uns stand eine gut performende Website zwar ebenfalls ganz oben auf unserer Liste. Allerdings müssen wir uns natürlich auch um die kontinuierliche Verbesserung des Produkts kümmern, sodass wir dieses Projekt hintangestellt haben. Anstatt unsere Pläne immer wieder auf den nächsten Monat zu verschieben, gab uns das Google PageSpeed Race den Anschub zu sagen: ‘Ok, wir machen es ‒ und das haben wir.’”
Und die Ergebnisse lassen sich sehen: Dank der Implementierung der von PageSpeed Insight vorgeschlagenen Maßnahmen kann sich Campsy im Schnitt um +48 PageSpeed Insights Punkten steigern und belegt den ersten Platz in einer von zwei Gewinnkategorien. Die Ladezeit der drei URLs konnte wesentlich verbessert werden. Während die Ladezeit der Startseite um 24 Prozent auf 6,1 Sekunden gesenkt wurde, wurde die Kategorieseite von 14,54 Sekunden um 43 Prozent auf 8,3 Sekunden gesenkt. Die Ladezeit der Produktdetailseite konnte sogar von 9,56 Sekunden auf 4 Sekunden verbessert werden. Das entspricht einer Verbesserung von 58 Prozent. Campsys Fazit: Die Ladezeit hat sich wesentlich verbessert, genauso wie die Geschwindigkeit der Webseiten. Die Maßnahmen sind nachhaltig und dienen als gute Ausgangssituation, um stetig weitere Verbesserungen vorzunehmen. “Ich denke, man muss immer ein Auge darauf haben. Es gibt immer noch Dinge, die wir gern verbessern möchten. Wir möchten einfach den Grundsatz befolgen, dass all die Dinge, die wir tun, die Seite verbessern und nicht verschlechtern”, sagt Levi Ferreira. Und Philipp Hillenbrand ergänzt: “Wir haben in erster Linie die Grundlage der Webseite verbessert, damit sie eine langfristige Infrastruktur erhält. Wir haben das Fundament der Website verbessert.”
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
Bei Bedarf finden Sie hier weitere Ressourcen:
