Wie Moviepilot mit Mobile Page Speed seine Performance steigert

Sebastian Grebasch / Februar 2020

Moviepilot wurde 2007 von leidenschaftlichen Filmenthusiasten gegründet und ist mit über 450.000 Nutzern Deutschlands größtes Filmportal. Mit mehr als zehn Millionen monatlichen Nutzern gibt Moviepilot Film- und Serienempfehlungen auf Basis eines kollaborativen Filtersystems. Um als branchenrelevantes Medium weiterhin wettbewerbsfähig zu bleiben und sich dem geänderten Nutzungsverhalten anzupassen, wurden im Rahmen eines PageSpeed Race, eines zweimonatigen Wettbewerbs zur Optimierung der Webpräsenz, Anpassungen vorgenommen. Dies wirkte sich nicht nur positiv auf die Ladezeiten, die Seitenbesuche und die Verweildauer aus, sondern hatte ebenfalls einen positiven Effekt auf das Anzeigengeschäft.

Ergebnisgrafik Ziele Ansatz webedia

Das Moviepilot-Portfolio richtet sich an Film- und Serienfans jeden Alters und bietet seinen Nutzern umfangreiche Angebote rund um den Bewegtbild-Kosmos. Dabei spricht die zur französischen Webedia Group gehörende Plattform eine breite Zielgruppe an und erreicht allein auf dem deutschen Markt monatlich mehr als zehn Millionen Nutzer. Trotz der vielen unterschiedlichen Interessen haben sie eines gemeinsam: Sie greifen überwiegend über mobile Endgeräte auf das Angebot zu und nutzen immer seltener einen Desktop-Computer.

Multimediaplattformen müssen Lösungen finden, um im immer stärker umkämpften Markt weiterhin wettbewerbsfähig und fortschrittlich zu bleiben. Um den eingehenden Traffic aus verschiedensten Quellen zu optimieren, wurden in Bezug auf Seitengeschwindigkeit, Leistung und User Experience (UX) Anpassungen an der Moviepilot-Website vorgenommen. Damit die wachsende Anzahl von Zugriffen über mobile Endgeräte optimal bedient werden kann, hat Mobile Page Speed neben einer Mobiloptimierung immense Bedeutung für digitale Plattformen.

Moviepilot Kinoprogramm

Vor der Optimierung: PageSpeed-Score von durchschnittlich 2,6 Punkten

Das PageSpeed Race war eine gute Möglichkeit für Moviepilot, um die Seitenperformance zu optimieren. Dabei handelt es sich um einen zwei Monate langen Wettbewerb, bei dem Unternehmen an der Optimierung ihres Webangebots arbeiten und dabei von Google-Experten auf technischer Seite unterstützt werden. Für das PageSpeed Race wurden die Homepage von Moviepilot, die dortigen Kino-Unterseiten sowie verschiedene Film-Unterseiten ausgewählt, da diese aufgrund ihrer modernen Frontend-Architektur bereits für Responsive Design optimiert waren und dadurch mehr Möglichkeiten boten. So wurden die Seiten zunächst von einem Ad-Server, der Content über document.write hinzufügt, auf Google DFP mit einem selbst geschriebenen und vollständig asynchronen Framework konvertiert. Synchron geladene JavaScripts wurden komplett durch asynchrone Varianten ersetzt. Wenn keine asynchrone Variante verfügbar war, wurden eigene Wrapper-Skripte geschrieben.

Problematisch waren auch die Inhalte "below the fold" – Inhalte, die erst durch Scrollen sichtbar werden –, da die Ladezeiten dieser Inhalte zu lang waren. Um dies zu beheben, wurde eine Webpack-Konfiguration eingesetzt, die die Skripte, die sich "below the fold" befanden, mittels Code Splitting in mehrere Module (JS/CSS) aufteilte. Inzwischen wird der beim Aufrufen der Seite nicht sichtbare Content erst während des Scrollens geladen. Zusätzlich wurden Symbolschriftarten durch SVG-Symbole ersetzt und Google Fonts werden nun mithilfe des Web Font Loaders asynchron geladen.

Moviepiltot Filmdetail

Um die Änderungen umzusetzen, arbeiteten die Produkt- und Entwicklungsteams in einer agilen Scrum-Umgebung eng zusammen. Das Produktteam Webedias umfasst dabei Produktmanager mit fortgeschrittenen SEO-Kenntnissen sowie UX-Designer, das Entwicklungsteam setzt sich aus Frontend- und Backend-Spezialisten zusammen. Alle Performance-Optimierungen wurden in Sprints geplant und umgesetzt.

Nach der Optimierung: schnellere Ladezeiten und höhere Verweildauer

Das übergeordnete Ziel war es, eine optimale Seiten- und UX-Performance über alle Geräte hinweg zu gewährleisten, um für die Mobile-First-Welt optimal aufgestellt zu sein. Da sich das Angebot der Plattform mit Displaywerbung monetarisiert, wurde der Fokus auf Performance-KPIs wie Seitengeschwindigkeit gerichtet. Eine der Hauptkennzahlen des Anbieters war 2018 die Verkürzung der Ladezeit um 30 Prozent. Dafür wurden umfangreiche Ressourcen eingeplant, jedoch konnte dieses Ziel mit den Maßnahmen des PageSpeed Race für die drei Seitentypen bereits erreicht werden. "Dass aber bereits vermeintlich kleine Änderungen, wie beispielsweise das asynchrone Laden von Google Fonts, einen so erheblichen Einfluss haben, hat uns überrascht", so Nicolas Davin, Head of Product & Development bei Webedia Deutschland.

Neben einer kürzeren Ladezeit konnten auch die KPIs First Meaningful Paint (FMP), also die nahezu vollständige Darstellung des sichtbaren Bereichs, von durchschnittlich 25 auf vier Sekunden sowie First Interactive von zuvor 35 auf schlanke 5,5 Sekunden reduziert werden.

Ein weiterer Benefit ist ein Umsatzplus von 138 Prozent aus dem AdEx-Displaynetzwerk im ersten Monat nach den Anpassungen, die beim Google PageSpeed Race vorgenommen wurden ‒ und das im üblichen Sommerloch. Auch danach konnte keine weitere Stagnation des Umsatzes festgestellt werden. Bei einem wachsenden mobilen Anteil an Traffic mit durchschnittlich geringeren TKPs ist dies als positiver Nebeneffekt der verbesserten Ladezeiten zu nennen.

Verpasste Chancen: Nur 5 % der deutschen mobilen Websites laden innerhalb einer Sekunde