Dein wichtigster Touchpoint zur Digitalbranche.
Dein wichtigster Touchpoint zur Digitalbranche.
Branding
FAZ Relaunch: Wie Sevenval 70 Millionen mobile Seitenaufrufe schöner und schneller macht

FAZ Relaunch: Wie Sevenval 70 Millionen mobile Seitenaufrufe schöner und schneller macht

Anton Priebe | 27.10.17

Jan Webering von Sevenval Technologies verrät, wie mobile Websites heute designt sein sollten und gibt entscheidende Performance-Tipps.

Die mobile Präsenz der Frankfurter Allgemeinen Zeitung erstrahlt seit August in neuem Glanz. Nicht nur optisch, sondern auch performanceseitig wurden einige Veränderungen vorgenommen. Das Redesign übernahm die Kölner Sevenval Technologies. Eine verantwortungsvolle Aufgabe, schließlich ist m.faz.net mit derzeit 70 Millionen Page Impressions im Monat eines der größten Nachrichtenportale Deutschlands.

Im Interview erklärt Gründer und Geschäftsführer Jan Webering, worauf es beim Relaunch ankam, wie mobile Websites heute aussehen sollten und welche Bedeutung dem Page Speed zukommt.

Interview mit Jan Webering, Gründer und Geschäftsführer von Sevenval Technologies

OnlineMarketing.de: Ihr habt mit m.faz.net ein ziemlich großes Projekt mit enormer Reichweite optimiert. Welches sind die Eckpfeiler, die nun eine schnellere Performance gewährleisten sollen?

Jan Webering: Wir setzen auf einen für die Bedürfnisse der FAZ individuell zusammengestellten Mix aus unseren Technologien zur Web Acceleration, die in Sevenvals FIT Server integriert sind. Wichtige Eckpfeiler sind in diesem Fall Caching und Delayed Loading.

Warum habt ihr gerade diese Schwerpunkte gesetzt?

Die Seite hat enorm viele Besucher, deshalb ergibt Caching absolut Sinn: Wir cachen Daten auf den Sevenval FIT-Servern und können so schneller ausliefern.

Die Startseite ist zwar unter 1,1MB groß, aber trotzdem kommt auch hier Delayed Loading zum Einsatz: Das ist sinnvoll, weil nicht gleich die ganze Seite geladen wird, sondern nur der sichtbare Bereich. Das ist ein echter Gewinn für viele User, die nach Aufruf der Startseite nur kurz scrollen und dann direkt einen Artikel anwählen.

Das neue mobile Design der FAZ

Welche Technologie kommt dabei zum Einsatz?

Wir haben über die Jahre verschiedene Ansätze für die Web Performance Optimierung erforscht und eigene Technologie dafür entwickelt, die wir „Web Accelerator“ nennen und die Teil unseres FIT-Servers ist. Als SaaS ist die Technologie auch in wao.io eingeflossen. Es kommen dabei neu entwickelte Bildkompressionsverfahren zum Einsatz, wir sortieren die „head“-Elemente jedes HTML-Files, um das Rendering zum optimalen Zeitpunkt zu starten, wir entfernen on the fly unnötige Elemente aus CSS und JavaScript, und es gibt noch weitere Funktionen.

Welche Rolle hat Google AMP beim Relaunch gespielt?

Anders als Facebooks „Instant Articles“ ist Google AMP auch für deutsche Verlage ein wichtiger Kanal. Unser Auftrag war es, das Layout passgenau über AMP auszuliefern – das ist nicht ganz trivial, weil AMP bestimmte Restriktionen vorgibt. Die AMP-Umsetzung war eine der hohen Prioritäten beim Redesign.

AMP Technologie bei der FAZ in den mobilen SERPs

Page Speed ist in unserem Zeitalter kritisch. Woran merke ich, dass meine Seite zu langsam ist?

Das kann man selber testen, etwa mit:

Aber dann braucht man natürlich noch Vergleichsdaten, um die Performance-Werte richtig einzuordnen.

Wichtige Anzeichen für eine evtl. zu langsame Seite sind aber auch:

  • Hohe Absprungraten, besonders bei mobilen Usern,
  • CPC bei Google AdWords und Facebook Ads steigt. Die beiden Anbieter reagieren nämlich so auf langsame Seiten.

Dabei geht es nicht nur um die User Experience, die darunter leidet, sondern auch konkret um Umsatz. Warum?

Page Speed ist ein wesentlicher Faktor für eine gute UX. Wird sie vernachlässigt, dann springen Nutzer noch schneller ab, als etwa bei einer nicht-intuitiven Menüführung. Während sich die Nutzer für letztere ihre eigenen Workarounds einfallen lassen, haben sie kein eigenes Mittel, um die Seite zu beschleunigen.

Bei E-Commerce-Anbietern bricht dann der Umsatz ein, weil die Nutzer bei langsam ladenden Seiten bereits abspringen, bevor sie zum Kauf animiert werden konnten.

Bei Publishern bricht der Umsatz aus einem ganz ähnlichen Grund ein: Kann Werbung nicht ausgeliefert werden, weil der User bereits wieder abgesprungen ist, dann sinkt der Umsatz.

Wo kann ich ansetzen, um die Geschwindigkeit zu verbessern? Was sind die einfachsten Hebel?

Die Bildkompression ist oft der einfachste Hebel – der birgt aber auch die Gefahr, dass der User nur noch Pixel sieht. Ein guter Kompressionsalgorithmus findet immer die Balance zwischen Dateigröße und Qualität. Hierfür haben wir Grundlagenforschung am JPEG-Format geleistet, um diese Balance zu finden.

Das Testing-Tool von Google zur mobilen Ladezeit

Es ging ja bei der FAZ nicht nur technologisch um die Geschwindigkeit, sondern auch um die UX. Wie baut man eine intuitive Navigation? Was ist dabei entscheidend?

Das ist für jede Seite unterschiedlich, aber für Nachrichtenseiten kann man sagen, dass m.faz.net einige Best Practices beachtet:

  • Das Ressort ist bei jedem Artikel eindeutig im Header erkennbar – das erleichtert die Navigation zu ähnlichen Themen enorm.
  • Gleiches gilt für die Themen-Module auf der Startseite: Es wird zusammengefasst, was thematisch zusammengehört. Das bedeutet weniger scrollen und weniger klicken für die Nutzer.
  • Wir werden in nächster Zeit auch noch am Off Canvas Menü arbeiten, um die Navigation weiter zu vereinfachen.

Für Nachrichten-Websites gilt dasselbe wie für einen Online-Shop: Während beim Shop der Nutzer möglichst schnell bis zum „Jetzt kaufen“-Button gelangen soll, muss eine Nachrichten-Website den Nutzer möglichst schnell zur gewünschten Information leiten.

Wie stellt ihr sicher, dass die mobile Seite der FAZ auch zukünftig schnell bleibt?

Wir entwickeln die Technologie ständig weiter und optimieren die Seite on-the-fly. Das machen wir in Partnerschaft mit dem FAZ Produktteam, wir probieren neue Technologien aus und sind dabei auch experimentierfreudig.

Vielen Dank für das Interview!

Kommentare aus der Community

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*
*