Weltweite Skalierung einer Website für Stadtführungen mit Cloudflare

Problem

myCityHunt ist der weltweit größte Anbieter für digitale Stadtrallyes. Die Plattform bietet eine Vielzahl von Stadtführungen in verschiedenen Städten weltweit an, die individuell gestaltet und durchgeführt werden können. Die Plattform ist benutzerfreundlich und einfach zu bedienen, weshalb sie bei Touristen und Einheimischen gleichermaßen beliebt ist und in den letzten Jahren weltweit stark gewachsen ist. Ein großer Teil des Webauftritts war Anfangs nur auf Deutschland ausgerichtet, weshalb nur mit einem Originserver gearbeitet wurde. Durch das Wachstum der letzten Jahre sind stetig neue Stadtrallyes in Europa, Amerika und Australien dazugekommen, was die Anforderungen an die Seite geändert hat. Durch die langen Laufzeiten für jeden Request aus den USA nach Deutschland und wieder zurück, wurden teilweise Werte für den “First Contentful Paint” von über zwei Sekunden erreicht. - d.h. jede Seite war erst zwei Sekunden nach der Anfrage sichtbar. Die Ladezeit einer Website ist sehr relevant für die Conversationrate und die allgemeine Verweildauer auf der Seite. Um international weiter zu wachsen, war es deshalb essentiell wichtig die Performance zu verbessern.

Lösung

Nach einer tiefen Analyse des Bestands Systems musste eine Lösung gefunden werden, die möglichst schnell gute Ergebnisse liefert. Langfristig soll passenderweise auf ein neues, headless System aufgebaut werden, weshalb hier keine tiefgreifenden Änderungen am bestehenden System vorgenommen werden sollten. Da die meisten Seiten eher statisch sind, wurde auf Cloudflare als weltweites Cache Netzwerk gesetzt. Mittels Cloudflare kann man Daten aus über 100 Ländern weltweit direkt an EndkundInnen ausliefern und spart dadurch “round-trip” Times und Energie.

Im ersten Schritt wurden deshalb Stück für Stück alle Domains zu Cloudflare umgezogen und die Cache Rules entsprechend gesetzt, dass auch HTML neben Bildern, Javascript und CSS gecached werden.

Weiterhin wurden sog. “Preload” Header gesetzt, die es ermöglichen, dass Browser wichtige Daten schon anfangen zu laden, bevor überhaupt das komplette HTML verarbeitet worden ist. Um den Seitenaufbau auf die “ticket” Seite ebenfalls sehr schnell zu ermöglichen, wird diese Seite schon vorgeladen - hier handelt es sich um die wichtigste, konvertierende Seite, weshalb hier die User Experience besonders hoch sein muss und die Ladezeit sehr gering.

Durch die verschiedenen Maßnahmen konnte der “First Contentful Paint” in den USA auf durchschnittlich unter 600ms optimiert werden und liegt damit in absolut vertretbaren Bereichen.