Nikkei ist mit einer 140-jährigen Geschichte eines der angesehensten Medienunternehmen in Japan. Neben ihrer Printzeitung verzeichnen sie monatlich über 450 Millionen Besuche auf ihren digitalen Plattformen. Um die Nutzerfreundlichkeit zu verbessern und das Geschäft im Web zu beschleunigen, hat Nikkei im November 2017 eine progressive Web-App (PWA) unter https://r.nikkei.com eingeführt. Sie erzielen jetzt hervorragende Ergebnisse mit der neuen Plattform.
Leistungssteigerungen – Doppelt so guter Speed Index – 14 Sekunden schnellere Zeit bis Interaktivität – 75% schnelleres Laden mit Prefetch
Geschäftliche Auswirkungen - 2,3-mal mehr organische Zugriffe - 58% mehr Conversions (Abos) - 49% mehr aktive Nutzer pro Tag - 2-mal mehr Seitenaufrufe pro Sitzung
Unternehmensübersicht
Herausforderung
Nikkei verzeichnete einen rasanten Anstieg des mobilen Traffics auf seiner alten Website, da Smartphones für viele Nutzer zum wichtigsten Einstiegspunkt ins Web wurden. Mit Lighthouse, einem Analysetool, das eine Webseite scannt und Empfehlungen zur Verbesserung in verschiedenen Kategorien gibt, stellten sie jedoch fest, dass ihre Website in mehreren Bereichen nicht vollständig für Mobilgeräte optimiert war und sehr langsam geladen wurde.
Es dauerte etwa 20 Sekunden, bis die Website durchgehend interaktiv war, und der Speed Index lag im Durchschnitt bei 10 Sekunden. Da 53% der Mobilgerätenutzer eine Website verlassen, wenn die Ladezeit mehr als drei Sekunden beträgt, wollte Nikkei die Ladezeit verkürzen, um die Nutzerfreundlichkeit zu verbessern und das Geschäft im Web zu beschleunigen.
Die Bedeutung von Geschwindigkeit ist unbestreitbar, insbesondere bei Finanznachrichten. Wir haben die Geschwindigkeit zu einem unserer wichtigsten Messwerte gemacht und unsere Kunden haben die Änderung begrüßt.
Taihei Shigemori, Manager, Digital Strategy
Ergebnisse
Nikkei konnte die Leistung beeindruckend steigern. Der Lighthouse-Wert stieg von 23 auf 82. Die Zeit bis zur Interaktivität wurde um 14 Sekunden verkürzt. Auch der organische Traffic, die Geschwindigkeit, die Conversion-Rate und die Anzahl der aktiven Nutzer pro Tag sind gestiegen.
Die PWA ist eine MPA (Multi-Page Application), die die Komplexität des Frontends reduziert und mit Vanilla JavaScript erstellt wurde. Fünf Frontend-Entwickler haben ein Jahr lang daran gearbeitet, diese Leistung zu erzielen.
Die Front-End-Entwickler von Nikkei haben bewiesen, dass eine gute UX zu einer guten Geschäftsleistung führt. Wir sind fest entschlossen, das Web auf ein neues Qualitätsniveau zu heben.
Hiroyuki Higashi. Product Manager, Nikkei
Lösung
Nikkei hat eine Progressive Web-App mit responsivem Design, Vanilla JavaScript und einer Architektur mit mehreren Seiten erstellt und eingeführt. Dabei lag der Fokus auf einer ansprechenden Nutzererfahrung. Durch das Hinzufügen eines Service Workers konnten sie unabhängig vom Netzwerk eine vorhersehbare Leistung erzielen. So sind Top-Artikel immer verfügbar und werden fast sofort geladen, da sie im Cache Storage gespeichert sind. Sie haben ein Web-App-Manifest hinzugefügt, das es Nutzern zusammen mit dem Service Worker ermöglicht, die PWA zu installieren und so einfach darauf zuzugreifen. Um sicherzugehen, dass die Leistung vollständig in ihrer Hand lag, optimierten sie ihr Drittanbieter-JavaScript.
Best Practices
- Ladezeit und Interaktivität durch moderne Web-APIs, Komprimierung und Codeoptimierung verbessern
- Die Nutzerfreundlichkeit kann durch das Hinzufügen von PWA-Funktionen wie Offlinesupport und „Zum Startbildschirm hinzufügen“ verbessert werden.
- Leistungsbudgets in die Leistungsstrategie einbeziehen
Technische Details
Geschwindigkeit ist wichtig
Geschwindigkeit ist wichtiger denn je. Da Smartphones für viele Nutzer zum wichtigsten Gerät für das Surfen im Internet wurden, verzeichnete Nikkei einen rasanten Anstieg des mobilen Traffics für seinen Dienst. Mithilfe von Lighthouse stellten sie jedoch fest, dass ihre alte Website nicht vollständig für Mobilgeräte optimiert war. Der Speed Index lag im Durchschnitt bei 10 Sekunden, der anfängliche Ladevorgang war sehr langsam und das JavaScript-Paket war groß. Es war an der Zeit, die Website neu zu gestalten und Best Practices für die Webleistung zu übernehmen. Hier sind die Ergebnisse und wichtigsten Leistungsoptimierungen in der neuen PWA.
Web-APIs und Best Practices nutzen, um das Laden zu beschleunigen
Schlüsselanfragen vorab laden
Es ist wichtig, das Laden des kritischen Pfads zu priorisieren. Mit HTTP/2 Server Push können sie kritische JavaScript- und CSS-Bundles priorisieren, die ein Nutzer benötigt.
Mehrere kostspielige Hin- und Rückfahrten zu einem beliebigen Ursprungsort vermeiden
Die Website musste Drittanbieterressourcen für Tracking, Anzeigen und viele andere Anwendungsfälle laden. Sie haben <link rel=preconnect> verwendet, um DNS-/TCP-/SSL-Handshake und ‑Aushandlung für diese wichtigen Drittanbieter-Ursprünge vorab aufzulösen.
Nächste Seite dynamisch vorab abrufen
Wenn sie sich sicher waren, dass der Nutzer zu einer bestimmten Seite navigieren würde, warteten sie nicht einfach darauf, dass die Navigation erfolgte. Nikkei fügt <link rel=prefetch> dynamisch in <head> ein und ruft die nächste Seite vorab ab, bevor der Nutzer tatsächlich auf den Link klickt. So ist eine sofortige Seitennavigation möglich.
Kritischen CSS-Code inline einfügen
Das Reduzieren von rendern-blockierendem CSS ist eine der Best Practices für schnelles Laden. Auf der Website wird das gesamte kritische CSS mit 0 renderblockierenden Stylesheets inline angegeben. Durch diese Optimierung wurde die Zeit für „Inhalte weitgehend gezeichnet“ um mehr als eine Sekunde verkürzt.
JavaScript-Bundles optimieren
In der Vergangenheit waren die JavaScript-Bundles von Nikkei aufgebläht und wogen insgesamt über 300 KB. Durch eine Umstellung auf reines JavaScript und moderne Bündelungsoptimierungen wie das auf Routen basierende Chunking und Tree-Shaking konnte dieser Overhead reduziert werden. Sie haben die Größe ihres JavaScript-Bundles mit RollUp um 80 % auf 60 KB reduziert.
Weitere implementierte Best Practices
- Komprimierung: Alle komprimierbaren Ressourcen mit Gzip/Brotli über Fastly CDN komprimieren
- Caching: HTTP-Caching aktivieren, Edge-Side-Caching
- Bildoptimierung: Verwenden Sie imgix zur Optimierung und zur Erkennung des Bildformats.
- Nicht kritische Ressourcen mit Lazy Loading laden: Verwenden Sie die Intersection Observer API, um Fragmente „below the fold“ zu laden.
- Strategie zum Laden von Webschriftarten: Systemschriftart priorisieren
- Inhalte weitgehend gezeichnet optimieren: Inhalte serverseitig rendern
- Leistungsbudgets einführen: JavaScript-Übertragungs- und Analyse-/Kompilierungszeiten niedrig halten
JavaScript von Drittanbietern optimieren
Es ist zwar nicht so einfach, JavaScripts von Drittanbietern zu optimieren wie eigene Skripts, aber Nikkei hat alle anzeigenbezogenen Skripts erfolgreich minimiert und gebündelt. Sie werden jetzt über das eigene Content Delivery Network (CDN) ausgeliefert. Anzeigenbezogene Tags enthalten in der Regel einen Snippet, um andere erforderliche Skripts zu initiieren und zu laden. Diese blockieren oft das Seitenrendering und erfordern außerdem zusätzliche Netzwerk-Roundtrip-Zeit für jedes der heruntergeladenen Skripts. Nikkei hat folgenden Ansatz gewählt und die Initialisierungszeit um 100 ms verkürzt sowie die JS-Größe um 30 % reduziert:
- Bündeln Sie alle erforderlichen Skripts mit einem JS-Bundler (z.B. Webpack)
- Laden Sie das gebündelte Script asynchron, damit die Seitendarstellung nicht blockiert wird.
- Berechnetes Werbebanner an Shadow DOM anhängen (statt an iFrame)
- Anzeigen beim Scrollen des Nutzers mit der Intersection Observer API progressiv laden
Website schrittweise optimieren
Zusätzlich zu diesen grundlegenden Optimierungen nutzte Nikkei das Web-App-Manifest und Service Worker, um die Website installierbar zu machen und sogar offline zu nutzen. Durch die Verwendung der cache-first-Strategie in ihrem Service Worker werden alle wichtigen Ressourcen und Top-Artikel im Cache Storage gespeichert und auch in Notfallsituationen wie einem instabilen oder Offline-Netzwerk wiederverwendet. So wird eine konsistente, optimierte Leistung erzielt.
Hack the Nikkei
Ein traditionelles Tageszeitungsunternehmen mit einer über 140-jährigen Geschichte hat seine Digitalisierung durch die Leistungsfähigkeit von Web und PWA erfolgreich beschleunigt. Die Front-End-Engineers von Nikkei haben bewiesen, dass eine gute UX zu einer starken Unternehmensleistung führt. Das Unternehmen wird weiterhin daran arbeiten, die Qualität im Web zu verbessern.