t-online.de Wetter mit Cloud-Native-Funktionen erfolgreich modernisiert

Wie kreuzwerker das Wetter in die Cloud brachte
12.09.2022

t-online ist die größte Nachrichtenseite Deutschlands – mit mehr als 49 Mio. Nutzer monatlich über Desktop, Smartphones, Tablets, Social Media und Public Video. Die Ströer Digital Publishing GmbH (SDP) vereint dabei publizistisches Know-how mit innovativer Technologie, intelligentem Produkt und effizienten Vermarktungslösungen.

Aus dem Newsroom in Berlin berichten mehr als 150 Redakteurinnen und Redakteure aus Politik, Wirtschaft, Sport und Unterhaltung sowie umfangreichen Ratgeber-Themen.

Zum Portfolio der Ströer Digital Publishing GmbH gehören neben dem Nachrichtenportal t-online.de und den Apps für Smartphone und iPad auch der Browser von t-online und die App Wetter von t-online.

Das Problem

t-online.de ist die größte deutsche Nachrichtenseite mit über einer Milliarde Seitenaufrufen pro Monat. Die „alte” t-online-Website entstammt den Anfängen des deutschen Internets. Damals waren Portale wie Yahoo die wichtigste Quelle für aktuelle Nachrichten. Im Jahr 2015 wurde t-online.de von Ströer aufgekauft, dem größten Anzeigenverlag Deutschlands, der vor allem für seine Außenwerbung bekannt ist.

Obwohl t-online als Plattform profitabel arbeitete, war offensichtlich, dass der Technologie-Stack veraltet war. Die Skalierung der Website – die immer noch in den eigenen Rechenzentren gehostet wurde – stellte das Unternehmen bei plötzlichen Traffic-Spitzen immer wieder vor große Herausforderungen. Zudem verursachte die Vorabbereitstellung von Ressourcen erhebliche Kosten und die veraltete Codebasis bremste die Entwicklung von Innovationen im Unternehmen. So beschloss Ströer, seinen gesamten Technologie-Stack in die AWS-Cloud zu migrieren, um von der besseren Skalierbarkeit und der Kosteneffizienz von Hyperscalern zu profitieren.

Somit wurde ein umfangreiches Projekt in Angriff genommen, das Dutzende von Ingenieur:innen, Designer:innen und Produktmanager:innen über einen Zeitraum von drei Jahren beschäftigte, bis es am 03. Mai 2022 erfolgreich abgeschlossen wurde. Im Rahmen der Migration wurde die Gelegenheit genutzt, eine der wichtigsten Altanwendungen zu modernisieren: t-online Wetter. Als Unterstützung dieses Projekts und um den Termin im Mai einhalten zu können, beauftragte Ströer kreuzwerker mit der Modernisierung der Wetter-Website sowie des zugehörigen Backends. Dabei überarbeitete kreuzwerker das Architekturdesign umfassend und entwickelte mithilfe der Cloud-Services von AWS eine moderne, skalierbare Lösung, die künftige Weiterentwicklungen zulässt und einfach zu warten ist.

Die Herausforderung

t-online Wetter bietet genaue Wettervorhersagen für Orte in Deutschland und weltweit bis zu 14 Tage im Voraus. Das Angebot umfasst die Website, mobile iOS- und Android-Apps sowie spezielle Bildschirme in Einkaufszentren und U-Bahnhöfen. Wenn Sie in einer deutschen Stadt auf die U-Bahn warten, schauen Sie mit großer Wahrscheinlichkeit auf einen t-online-Bildschirm mit der aktuellen Wettervorhersage. t-online Wetter hat über 14 Millionen Seitenaufrufe pro Monat. Aber Wetterdaten sind nicht kostenlos und jeder Seitenaufruf verursacht ebenfalls Kosten. Zu der Herausforderung, die mit der Skalierung verbundenen Kosten so gering wie möglich zu halten, kam hinzu, dass das Entwicklungsteam bisher keine Erfahrung mit der Ausführung von cloud-native Workloads hatte.

Die Lösung

Die Lösung bestand darin, eine cloud-native Architektur zu verwenden und die Vorteile moderner Open-Source-Software zu nutzen. kreuzwerker entwickelte die Architektur unter Verwendung von AWS-Services, bestehend aus zwei Teilen: erstens die Smart Caching API, die für eine intelligente und kostengünstige Zwischenspeicherung und Bereitstellung der Wetterdaten verantwortlich ist; und zweitens die nutzerorientierte Website, die sowohl für eine schnelle Browser-Erfahrung als auch für SEO optimiert ist.

Smart Caching API

Mehr als 10 Millionen Menschen nutzen t-online Wetter pro Monat. Jede Nutzeranfrage führt dazu, dass das Backend entsprechende Daten von der proprietären Wetter-API abfragt – Daten, die t-online Wetter bezahlen muss. Um sicherzustellen, dass die Kosten niedrig bleiben, wurde ein API-Caching-/Transformation-Layer eingerichtet, der verschiedene AWS-Dienste wie AWS Lambda, Amazon CloudFront, Lambda@Edge und Amazon DynamoDB kombiniert.

  • Lambda@Edge wird verwendet, um die angeforderten Koordinaten der Wettervorhersage auf eine Nachkommastelle zu vereinheitlichen. Dies erhöht die Trefferquote im Cache drastisch und reduziert somit die Anfragen maßgeblich. Weniger Anfragen an den Server resultieren in geringeren Kosten für den Zugriff auf proprietäre Wetterdaten.
  • CloudFront wird verwendet, um API-Antworten bis zu 15 Minuten zwischenzuspeichern.
  • Für Anfragen, die nicht über den Cache bedient werden können, wird eine Lambda Funktion verwendet, um Anfragen an die proprietäre Wetterdaten-API zu stellen.
  • Um zu verhindern, dass bei jeder Anfrage eine erneute Autorisierung erfolgt, und um die Belastung der externen API zu verringern, werden Authentifizierungstoken zur wiederholten Verwendung in DynamoDB zwischen gespeichert.

Die Bereitstellung der Architektur erfolgte mithilfe von Terraform unter Einbeziehung von IaC (Infrastructure as Code) – dies reduziert den Bedarf an manuellem Betriebsmanagement.

stoer

Leistungsfähiges Frontend

Im Laufe der Jahre waren erhebliche Anstrengungen unternommen worden, um die t-online-Website für relevante Suchbegriffe weit oben zu platzieren. Dies führte dazu, dass der Großteil des Traffics von t-online Wetter organischer Traffic ist, der von Suchmaschinen kommt. Bei der Migration einer gesamten Website mit Zehntausenden URLs besteht jedoch immer das Risiko, ein gutes Ranking zu verlieren.
Deshalb wurde eine Strategie gewählt, die das neue Frontend für Suchmaschinen-Crawler optimiert, indem serverseitig gerendertes HTML bereitgestellt und clientseitig die Leistung optimiert wird, sodass Benutzer:innen ein schnelles Browsing-Erlebnis genießen können, was wiederum von den Suchmaschinen honoriert wird.

Bei der Evaluierung verschiedener Optionen kristallisierte sich Next.js schon früh als beste Lösung heraus, da es von Haus aus serverseitiges Rendering bietet und auf React aufbaut, was die Erstellung eines leistungsfähigen Frontends für eine Website mit hohem Traffic ermöglicht.


Technische Vertiefung: Strategien für das Rendering von Websites

Abhängig von den jeweiligen Anforderungen können verschiedene Strategien für das Frontend Rendering angewandt werden. Als Leitfaden für einen hohen Page Rank hat Google das Konzept der Web Vitals eingeführt: Kennzahlen zur Messung der anfänglichen Ladeleistung der Seite, der Interaktivitätsverzögerung und der visuellen Stabilität der UI. Next.js bietet vier verschiedene Rendering-Strategien mit verschiedenen Vor- und Nachteilen hinsichtlich der Google Web Vitals:

  • Client-Side Rendering (CSR) ist die gängigste Rendering-Strategie, wenn es um traditionelle SPA-Frameworks (Single Page Application) wie React, Angular oder Ember.js geht. Die Initial Load ist sehr hoch, da der eigentliche Aufbau der Website clientseitig ausgeführt wird. Das bedeutet auch, dass die anfängliche Verzögerung für die Interaktivität recht hoch ist. Sobald die Website clientseitig gerendert wurde, wird zusätzlicher Inhalt geladen, was die visuelle Stabilität beeinträchtigt, da leerer Raum mit Inhalt gefüllt wird.

  • Static Site Generation (SSG) ist das Gegenteil von clientseitigem Rendering. Die gesamte Struktur der Website einschließlich Inhalt wird in Dateien auf dem Server gerendert. Diese Dateien können dann leicht zwischengespeichert und auf Anfrage an den Browser des Kunden gesendet werden, der die Seite sofort anzeigt. Abhängig vom Caching kann eine sehr hohe Ladeleistung, eine geringe Interaktivitätsverzögerung und eine optimale visuelle Stabilität erzielt werden, da nach dem ersten Rendering kein Inhalt asynchron geladen wird. SSG funktioniert am besten, wenn sich die Inhalte nicht häufig ändern.

  • Server-Side Rendering (SSR) ähnelt Static Site Generation (SSG), überspringt aber das Rendering in eine Datei. Bei jedem Aufruf erstellt der Server eine Seite mit dem aktuellsten Inhalt und liefert das gerenderte Ergebnis an den Browser des Clients. Sobald die Seite geladen ist, bietet SSR eine geringe Interaktivitätsverzögerung und eine hohe visuelle Stabilität. Durch die anfängliche Erstellung der Seite kann die Ladezeit allerdings recht hoch sein.

  • Incremental Static Regeneration (ISR) vereint das Beste aus SSR und SSG. Um eine niedrige Latenzzeit zu erreichen, wird die Seite samt Inhalt auf dem Server gerendert. Wenn ein User die Seite aufruft, wird sie aus dem Cache des Servers bereitgestellt. Um die zwischengespeicherten Seiten up to date zu halten, findet im Hintergrund eine Wiederherstellung gemäß der konfigurierten Caching-Einstellungen statt. ISR garantiert schnelle Ladezeiten, eine hohe visuelle Stabilität und eine schnelle Interaktion, jedoch werden für das Rendering möglicherweise viele Server benötigt, um die Seite aktuell zu halten.


Die Wahl der optimalen Rendering-Strategie

Um die beste Rendering-Strategie bestimmen zu können, wurde eine Feasability-Studie durchgeführt – schließlich ist dieser Anwendungsfall nicht so klar und unkompliziert wie z. B. eine Nachrichtenseite. Ein News-Artikel wird einmal geschrieben und ändert sich danach normalerweise nicht mehr. Das vereinfacht das Caching. Wettervorhersagen hingegen ändern sich ständig. Nutzer:innen von t-online Wetter wollen die aktuellsten Vorhersagedaten für ihren Standort abrufen – und sie wollen, dass die Seite schnell lädt.

Auf Unternehmensseite möchte man hingegen die durch das Laden neuer Wetterdaten entstehenden Kosten reduzieren. Um eine für beide Seiten – Nutzer:innen wie Anbieter – optimale Lösung zu finden, musste kreuzwerker ein gutes Gleichgewicht von Datenkosten, Aktualität und Latenzzeit schaffen.

Die Feasability-Studie ergab, dass der Einsatz von ISR eine optimale Balance von Latenz und Kosten sichern könnte, bei gleichzeitiger Bereitstellung aktueller Inhalte. Das Team begann mit ISR und setzte die Cache-Invalidierung der Wetterprognose-Seiten auf 15 Minuten fest. Im schlimmsten Fall würde ein Nutzer also 15 Minuten alte Inhalte abrufen. Während der Prototyp-Phase zeigte sich, dass die Wiederherstellung durch Next.js eine inakzeptabel hohe Latenzzeit erzeugte. Um die Vorteile von ISR beizubehalten, beschloss das Team, eine eigene ISR-Version zu implementieren: eine Kombination aus serverseitigem Rendering und CloudFront als CDN Caching-Layer.

Cloud-natives Server-Side Rendering

stroeer 2Da die Smart Caching API bereits zu 100 Prozent serverless lief, war ursprünglich geplant, das Rendering der Websites ausschließlich mit serverless Technologien durchzuführen. Ein vielversprechender Kandidat war Serverless Next.js Component, mit dem Next.js in einem Lambda@Edge ausgeführt wird. Dies ist eine Portierung von Next.js, die den Funktionsumfang der offiziellen Version nach implementiert. In Anbetracht von fast 200 offenen Issues wurde sich gegen den Einsatz entschieden.

Die nächstbeste Option war die Entwicklung einer Render Farm aus orchestrierten ECS Fargate-Container-Instanzen, auf denen Next.js läuft. Mit diesem Ansatz konnte das Team einen Auto-Scaling-Mechanismus implementieren, um plötzliche Verkehrsspitzen bewältigen zu können und gleichzeitig die Kosten niedrig zu halten.

Going live

Im Rahmen der Migration von On-Premise in die AWS-Cloud übernahm kreuzwerker auch das Hosting und den Betrieb. Um die Deadline im Mai 2022 einhalten zu können, wurde entschieden, den Traffic verantwortungsvoll umzulenken. So wurden lange vor dem offiziellen Start mehrere Beta-Versionen der mobilen Apps veröffentlicht. Die Website wurde im Vorfeld unter einer nicht-öffentlichen URL getestet. Kurz vor dem Relaunch wurde der Webverkehr langsam von der alten Website t-online.de Wetter auf die neue Website verlagert.

Das Ergebnis

Mit Unterstützung von kreuzwerker wurde die hoch frequentierte Legacy-Website von t-online Wetter erfolgreich modernisiert. Hierbei wurden Cloud-Native-Funktionen genutzt und der Weg für zukünftige Innovationen geebnet. Das Zusammenspiel von AWS Serverless Services, einer intelligenten Caching-Strategie im Backend und Incremental Static Regeneration (ISR) mit Next.js im Frontend führte zu einer kosteneffizienten, skalierbaren und SEO-optimierten Lösung. Am 3. Mai 2022 wurde der offizielle Relaunch von t-online.de verkündet: mit einer modernisierten cloud-nativen Wetter-Website, die das Versprechen erfüllt, “dass wir schneller arbeiten können und Sie die Website noch schneller laden können”.