Die deutsche Handballnationalmannschaft hatte sich viel vorgenommen für Januar 2017. Nach dem Europameistertitel und dem dritten Platz bei den Olympischen Spielen in 2016, sollte nun bei der Weltmeisterschaft in Frankreich erneut der Titel her.
Lange Zeit sah es so aus, als würden die deutschen Handballfans keine Live-Bilder der WM zu sehen bekommen. Der Inhaber der Übertragungsrechte hatte die unverschlüsselte Übertragung ausgeschlossen. Damit waren die öffentlich-rechtlichen Fernsehsender außen vor. Auch die Übertragung durch den PayTV-Anbieter Sky hatte sich zerschlagen. Der Handball-WM drohte der mediale Black-Out.
Am 5. Januar — 6 Tage vor dem Eröffnungsspiel — verkündete die Deutsche Kreditbank AG (DKB) die Rettung. Der engagierte Handball-Sponsor hatte die Übertragungsrechte erworben und würde alle Spiele der deutschen Nationalmannschaft im Internet übertragen. Ein richtungweisendes Ereignis für die Sportmedienlandschaft. Nie zuvor hatte ein Sponsor die Live-Übertragung eines sportlichen Großereignis übernommen.
Zum Schutz deiner Privatsphäre verzichten wir auf unserer Seite bewusst auf das Tracking von Daten! Da andere Websites dies anders handhaben, können wir dir diesen Inhalt nur anzeigen, wenn du der Datenübermittlung an X zustimmst und die Datenschutzrichtlinien gelesen hast.
Unter den Involvierten (DKB, Jung von Matt/SPORTS, Athletia, Plaza Media) stellte Protofy die Entwicklung der Landing Page und Infrastruktur zur Übertragung sowie des Backoffice zur Verwaltung der Live-Streams.
8 Erfolgsfaktoren für die Übertragung von Live-Events
Der Besucherverkehr bei der Übertragung von Live-Events unterscheidet sich wesentlich von dem anderer Webseiten. Die Kurve der Aufrufzahlen bei Online-Shops, Blogs oder News-Portalen verläuft meist flach bis wellenförmig mit leichten Peaks. Bei Live-Streams steigen die Nutzerzahlen sprunghaft an, bleiben über das Event hinweg weitestgehend flach und fallen nach Ende des Events steil ab.
Anhand der Einschaltquoten der vergangenen Weltmeisterschaften wurden Zuschauerzahlen im Millionenbereich erwartet (Quelle: Handball Inside #13 1/2017) — eine außergewöhnliche Herausforderung für eine Website!
Das größte Augenmerk wurde daher auf Skalierbarkeit und Stabilität des Projekts gelegt.
Infrastruktur
1) Statisch statt dynamisch
Um die Stabilität der Landing Page zu gewährleisten, war oberste Priorität, dass keine Aufrufe direkt von den Backendsystemen beantwortet werden. Durch den Verzicht auf individuelle Nutzerinhalte konnte die Website als statische Ressource ausgeliefert werden.
Dabei wurden die anzuzeigenden Daten der Website als JSON-Datenobjekt in die HTML-Seite eingebettet. Die statische Ressource wurde im Intervall weniger Minuten durch das Backend generiert und via Amazon S3 bereitgestellt. So bleibt die Last auf den Backendsystemen konstant niedrig.
Frische Daten einer JSON-Ressource wurden regelmäßig nach einem Page-Load mittels Ajax nachgeladen. Die gesamte Aufbereitung der Daten innerhalb der Website wurde im Frontend durchgeführt. Dies lagert die Server-Last auf den Browser des jeweiligen Endbenutzers aus.
2) Doppelter Boden
Amazon S3 hätte der großen Anzahl gleichzeitiger Aufrufe vermutlich nicht standgehalten. Ein Auto-Scaling von Diensten wie Amazon EC2 wäre für den zu erwartenden sprunghaften Anstieg bei Beginn der Übertragungen zu träge gewesen.
Wir schalteten also CloudFront vor, um die große Zahl Requests zu beantworten. Dabei lud sich CloudFront die benötigten Ressourcen aus S3, sobald die entsprechenden Cache-Objekte nicht mehr valide waren. Im Gegensatz zu einem ebenfalls möglichen “klassischen” Setup mit Webservern skalieren die Kosten bei CloudFront nur mit dem tatsächlichen Traffic — eine erhebliche Kostenersparnis.
3) Caching
Um die Aufrufe gegenüber CloudFront zu reduzieren, wurden die Ressourcen mit hohen Cache-Zeiten versehen. Ressourcen die sich im Turnierverlauf nicht oder nur selten ändern (wie Bild-, CSS- und JS-Dateien), wurden für 30 Tage gecacht. Veränderliche Inhalte (u.a. die Live-Streams und Spielergebnisse) wurden für 5 Minuten gecacht, um Wild-Refreshes mit einem kleinen 304 beantworten zu können.
4) Traffic einsparen
Um den Traffic — also die Menge der übertragenen Daten — so gering wie möglich zu halten, wurden die auszutauschenden Daten möglichst klein gehalten. In der Optimierung kämpften wir um jedes Byte. Zu den Maßnahmen gehören u.a.:
- alle Attribute bestehen aus maximal zwei Zeichen
- Timestamps werden ohne Millisekunden repräsentiert
- ‘true’ und ‘false’ werden als ‘1’ und ‘0’ repräsentiert
- Werte aus endlichen Wertelisten werden durch Zahlen repräsentiert
Das JSON mit sämtlichen Turnierdaten konnte so auf 2,5 kB (nach gzip) verkleinert werden. Das Eröffnungsspiel zwischen Frankreich und Brasilien sieht dann bspw. so aus:
{"sf":1484163900,"bb":1484163000,"eb":1484169600,"b":1,"fb":0,"g":1,"ta":"Frankreich","tb":"Brasilien","sa":31,"sb":16,"w":2,"p":0,"hu":"/highlights-frankreich-vs-brasilien"}
Landing Page/Frontend
5) Preact statt React
Da die Aufbereitung der Daten vollständig im Frontend durchgeführt wird, wollten wir eine moderne Library wie React einsetzen. React alleine ist allerdings schon 43 kb (nach gzip) groß — daher mussten Alternativen her.
Preact ist eine Alternative mit identischer Schnittstelle, die mit 3 kB (nach gzip) allerdings sehr viel kleiner ist!
Preact verzichtet auf einige React-Features wie PropTypes, die in diesem Projekt nicht von Bedeutung waren. Preact in Kombination mit ES5-Transpilierung erwies sich unter anderem in der Kompatibilität mit älteren Browsern als gute Wahl.
6) Verzicht auf Libraries
Einige Libraries und Plugins hätten die Entwicklung durchaus vereinfachen können. Gleichzeitig bringen Libraries oft eine große eigene Codebasis mit. MomentJS für die Aufbereitung von Datumsangaben ist bspw. allein 17 kB (nach gzip) schwer.
Wir haben uns entschieden, sämtliche Komponenten selbst zu entwickeln und genau auf unseren Anwendungsfall zuzuschneiden. Dadurch ist es gelungen, sämtlichen JavaScript-Code (inkl. Framework) auf unter 50kB (nach gzip) zu begrenzen — trotz ES5-Transpilierung für ältere Browser.
7) So viele Requests wie nötig, so wenige wie möglich
Der Aufruf einer Website stößt üblicher Weise das Nachladen von Ressourcen an. Unterschiedliche Assets werden in parallelen Anfragen nachgeladen und beanspruchen die Server. Wir haben diese Aufrufe so weit wie möglich verringert, indem wir
- nur eine JS- und eine CSS-Datei ausliefern, und
- so viele Bilder wie möglich als SVG per JavaScript in die Seite einbinden, um die SVG-Assets direkt mit der JavaScript-Datei auszuliefern.
So wurde der erste Aufruf der Seite auf 8 Requests reduziert, jeder weitere Aufruf lag in Kombination mit dem Caching bei lediglich 0–3 Requests.
8) Jeder Request so klein wie möglich
Die nicht zu verhindernden Requests wollten wir so klein wie möglich halten. Dafür wurde
- weitestgehend auf pixelgenaue PNG-Bilddateien verzichtet
- eine starke Komprimierung der Bilddateien in Kauf genommen
- jede Bilddatei in mehreren Varianten für Mobile, Tablet und Desktop eingebunden
- die Text-Ressource (JS-, CSS- und HTML-Dateien) minifiziert.
Release und Beginn der WM
Am Abend vor dem Eröffnungsspiel — nach knapp 6 Werktagen — sind die Arbeiten an Landing Page, Infrastruktur und Backoffice abgeschlossen. Fertig! — fürs Erste.
Die ersten Spiele ohne deutsche Beteiligung verlaufen ohne Komplikationen. Dabei liegen die Zuschauerzahlen noch unter den durchgeführten Lasttests. Für alle Beteiligten ist klar: Erst nach dem ersten Spiel der deutschen Handballer wird man ein Zwischenfazit ziehen können.
Erstes Spiel der deutschen Mannschaft — Blackout
Vorfreude und Anspannung vermengen sich in der Vorbereitung auf das erste Spiel der deutschen Mannschaft. Der Stream beginnt und die Aufrufzahlen der Landing Page steigen auf ca. 300.000 Nutzer gleichzeitig — in der Spitze werden es an diesem Spieltag 600.000 sein (Quelle: Handball Inside #13 1/2017). Gespannt verfolgen wir die Statistiken, kontrollieren die Antwortzeiten der Server im Monitoring. Alles ist im grünen Bereich.
Doch dann: Wenige Minuten in der ersten Hälfte sind gespielt, Deutschland führt. Plötzlich verschwindet das Video des eingebetteten Players, hinterlässt beunruhigendes, monotones grau und eine Meldung: “Dieses Video ist nicht verfügbar”. Schnell wird klar, der Youtube-Stream ist offline. Handball-Deutschland schaut gerade in die Röhre.
Die DKB wird später verlauten lassen, dass ein Eingriff des Rechtevergebers Ursache für die Unterbrechung des Streams war. Nach rund 15 Minuten läuft der Stream wieder. Die deutsche Mannschaft führt zu diesem Zeitpunkt mit 8:7 und gewinnt das Spiel letztlich verdient mit 27:23.
Unser Lichtblick: Die Landing Page beantwortet während des Stream-Blackouts bis zu 22.000 requests pro Sekunde und bleibt dabei schnell und stabil. Die Strategie in 1–8 zahlt sich aus!
Weiterentwicklung
Die weiteren Spiele verlaufen ohne Komplikationen. Während die deutsche Nationalmannschaft Sieg um Sieg einfährt und schließlich als Gruppensieger ins Achtelfinale einzieht, wird die Landing Page um neue Funktionen erweitert. Es folgen Video-Highlights, ein Instagram-Feed und neue Partner.
Die Million geknackt — doch das Wintermärchen bleibt aus
Am 22. Januar steht Deutschland im Achtelfinale gegen Katar. Bereits in der ersten Halbzeit wird mit rund 850.000 Zuschauern ein neuer Rekord aufgestellt. Deutschland führt zur Pause knapp mit 10:9. In der zweiten Halbzeit steigt die Zuschauerzahl weiter und durchbricht kurz vor Schluss tatsächlich die magische Marke von einer Million Zuschauern (Quelle: Handball Inside #13 1/2017, DKB auf der Online Marketing Rockstars-Konferenz).
Das Wintermärchen — wie es die Medien bereits heraufbeschworen hatten — bleibt jedoch aus. Deutschland unterliegt Katar wie 2015 knapp mit zwei Toren Unterschied. Für das gesamte Projektteam eine große Enttäuschung. Doch wir begleiten Frankreich ins Finale, das sich mit einem Sieg gegen Norwegen den Titel im eigenen Land sichert.
Rückbetrachtung
Wir sind stolz, mit Protofy Teil dieses Projekts gewesen zu sein. Man habe Sportgeschichte geschrieben, twitterte Jung von Matt/SPORTS noch während des Turniers. Auch wenn es nicht zum großen sportlichen Erfolg gereicht hat, so haben wir gemeinsam gezeigt, was innerhalb kürzester Zeit möglich ist: Die DKB sichert sich die Übertragungsrechte und erreicht mit einem tollen Projektteam 6.15 Millionen Streamer, die dankbar sind, dass der totale mediale Blackout verhindert wurde. Teamplay!
Thanks to Moritz Mann.