Nikkei hat mehr als 140 Jahre Publikationsgeschichte und ist eines der führenden Medienunternehmen in Japan. Zusammen mit der Printzeitung kommen jeden Monat mehr als 450 Millionen Besuche in die digitalen Properties des Unternehmens. Um die Nutzerfreundlichkeit zu verbessern und das Web zu beschleunigen, brachte Nikkei im November 2017 erfolgreich eine progressive Web-App (PWA) auf den Markt: https://r.nikkei.com. Die Ergebnisse der neuen Plattform sind wirklich beeindruckend.
Leistungssteigerungen - Doppelter Geschwindigkeitsindex - 14 Sekunden kürzere Zeit bis Interaktivität - 75% schnelleres Laden mit Prefetch
Auswirkungen auf das Geschäft - 2,3-mal organische Zugriffe - 58% mehr Conversions (Abos) - 49% mehr aktive Nutzer pro Tag - 2-mal mehr Seitenaufrufe pro Sitzung
Fallstudie als PDF herunterladen
Unternehmensübersicht
Herausforderung
Nikkei verzeichnete einen schnellen Anstieg des mobilen Traffics auf seiner Legacy-Website, da Smartphones für viele Nutzer zum wichtigsten Einstiegspunkt ins Web wurden. Mithilfe von Lighthouse, einem Prüfungstool, das eine Webseite scannt und Empfehlungen für Verbesserungen in mehreren Kategorien gibt, erkannte das Unternehmen, dass die Website nicht in mehreren Bereichen vollständig für Mobilgeräte optimiert war und nur sehr langsam geladen wurde.
Die Website brauchte etwa 20 Sekunden, um durchgängig interaktiv zu werden, und betrug im Geschwindigkeitsindex durchschnittlich 10 Sekunden. Nikkei wusste, dass 53% der mobilen Nutzer einen Vorgang abbrechen, wenn der Ladevorgang länger als 3 Sekunden dauert. Nikkei wollte die Ladezeiten verkürzen, um eine bessere Nutzererfahrung zu bieten und das Geschäft mit dem Internet zu beschleunigen.
Der Wert von Geschwindigkeit ist unbestritten – insbesondere bei Nachrichten aus der Finanzwelt. Wir haben die Geschwindigkeit zu einem unserer Kernmesswerte gemacht, und unsere Kunden wissen die Änderung zu schätzen.
Taihei Shigemori, Manager, Digital Strategy
Ergebnisse
Nikkei erzielte beeindruckende Leistungssteigerungen. Ihre Lighthouse-Punktzahl stieg von 23 auf 82 an. Die Messung der Zeit bis zur interaktiven Sitzung wurde um 14 Sekunden verkürzt. Die organischen Zugriffe, die Geschwindigkeit, die Conversion-Rate und die aktiven Nutzer pro Tag stiegen ebenfalls.
Die PWA ist eine mehrseitige App (MPA), die mithilfe von Vanilla-JavaScript die Komplexität des Front-End reduziert. Fünf Front-End-Engineers haben ein Jahr lang gearbeitet, um diese Leistung zu erreichen.
Die Front-End-Entwickler von Nikkei haben bewiesen, dass eine hervorragende UX eine gute Geschäftsleistung ermöglicht. Wir möchten das Web weiter für ein neues Maß an Qualität bringen.
Hiroyuki Higashi. Product Manager, Nikkei
Lösung
Nikkei entwickelte und veröffentlichte eine progressive Web-App mit responsivem Webdesign, Vanille-JavaScript und einer mehrseitigen Architektur. Ziel war es, eine angenehme Nutzererfahrung zu bieten. Durch das Hinzufügen eines Service Workers konnte das Team unabhängig vom Netzwerk eine vorhersehbare Leistung bereitstellen. Dadurch wird auch sichergestellt, dass Top-Artikel immer verfügbar sind und fast sofort geladen werden, da sie im Cache-Speicher gespeichert werden. Das Team hat ein Web-App-Manifest hinzugefügt. Zusammen mit dem Service Worker können Nutzer die PWA installieren, um leicht darauf zugreifen zu können. Und um sicherzustellen, dass die Leistung vollständig von ihrem Team gesteuert werden konnte, wurde ihr Drittanbieter-JavaScript optimiert.
Best Practices
- Verbessern Sie die Ladegeschwindigkeit und Interaktivität, indem Sie moderne Web-APIs, Komprimierung und Codeoptimierungspraktiken anwenden.
- Mit PWA-Funktionen wie Offlineunterstützung und der Option „Zum Startbildschirm hinzufügen“ lässt sich die Nutzerfreundlichkeit schrittweise verbessern.
- Leistungsbudgets in die Leistungsstrategie einbinden
Technische Details
Geschwindigkeit ist alles
Geschwindigkeit ist wichtiger denn je. Da Smartphones für viele Nutzer zum wichtigsten Surfgerät geworden sind, verzeichnete Nikkei einen rasanten Anstieg des mobilen Traffics bei seinem Dienst. Mithilfe von Lighthouse stellte das Unternehmen jedoch fest, dass die bisherige Website des Unternehmens nicht vollständig für Mobilgeräte optimiert war: Der Geschwindigkeitsindex durchschnittlich 10 Sekunden, das anfängliche Laden sehr langsam und ein großes JavaScript-Bundle. Es war an der Zeit, dass Nikkei seine Website neu gestaltet und die Best Practices für die Webleistung angepasst hat. Hier sind die Ergebnisse und wichtigsten Leistungsoptimierungen der neuen PWA.
Web-APIs und Best Practices für schnellere Ladezeiten
Schlüsselanfragen vorab laden
Es ist wichtig, das Laden des kritischen Pfads zu priorisieren. Mit HTTP/2 Server Push können sie wichtige JavaScript- und CSS-Bundles priorisieren, von denen sie wissen, dass sie die Nutzer benötigen.
Mehrere, kostspielige Hin- und Rückflüge zu beliebigen Startpunkten vermeiden
Auf der Website mussten Drittanbieterressourcen für Tracking, Anzeigen und viele andere Anwendungsfälle geladen werden. Das Unternehmen verwendete <link rel=preconnect>, um den DNS-/TCP/SSL-Handshake und die Verhandlung für diese Schlüsselquellen von Drittanbietern vorab aufzulösen.
Nächste Seite dynamisch im Voraus abrufen
Als sie sich sicher waren, dass die Nutzenden eine bestimmte Seite aufrufen werden, haben sie nicht nur darauf gewartet, dass die Navigation erfolgte. Nikkei fügt dynamisch <link rel=prefetch> in die <head> ein und ruft die nächste Seite im Voraus ab, bevor der Nutzer tatsächlich auf den Link klickt. Dies ermöglicht eine sofortige Seitennavigation.
CSS-Code für kritischen Pfad inline
Das Reduzieren von CSS, die das Rendering blockieren, gehört zu den Best Practices für schnelleres Laden. Die Website enthält alle wichtigen CSS-Elemente mit 0 Stylesheets, die das Rendering blockieren. Durch diese Optimierung konnte die erste relevante Farbe um mehr als 1 Sekunde reduziert werden.
JavaScript-Bundles optimieren
Bei ihrer bisherigen Erfahrung wurden die JavaScript-Bundles von Nikkei aufgebläht und wiegen insgesamt über 300 KB. Durch die Umschreibung auf einfachen JavaScript-Code und moderne Bündelungsoptimierungen wie routenbasiertes Chunking und Tree Shaking gelang es dem Unternehmen, diesen Aufprall zu reduzieren. Die Größe des JavaScript-Bundles wurde um 80 % reduziert und mit RollUp auf 60 KB reduziert.
Weitere Best Practices implementiert
- Komprimierung: Alle komprimierbaren Ressourcen mit gzip/Brotli, die Fastly CDN verwenden
- Caching: HTTP-Caching, Edge-Side-Caching aktivieren
- Bildoptimierung: Verwenden Sie imgix zur Optimierung und Bildformaterkennung.
- Lazy Loading nicht kritischer Ressourcen: Verwenden Sie die Intersection Observer API, um „Below the fold“-Fragmente zu laden.
- Strategie zum Laden von Schriftarten im Web entwickeln: Priorisieren Sie die Verwendung von Systemschriftarten.
- First sinnvoll Paint optimieren: Content serverseitig rendern
- Leistungsbudgets übernehmen: Zeit für die JavaScript-Übertragung und -Parsing-/Kompilierung einhalten
Drittanbieter-JavaScript optimieren
Es ist zwar nicht so einfach, Drittanbieter-JavaScripts im Vergleich zu eigenen Skripts zu optimieren, aber Nikkei hat alle anzeigenbezogenen Skripts komprimiert und gebündelt, die jetzt über ein eigenes Content Delivery Network (CDN) bereitgestellt werden. Anzeigenbezogene Tags stellen normalerweise ein Snippet zum Initiieren und Laden anderer erforderlicher Skripts bereit, die häufig das Rendern der Seite blockieren und zusätzliche Netzwerk-Bearbeitungszeiten für die heruntergeladenen Skripts erfordern. Nikkei verfolgte den folgenden Ansatz und verbesserte die Initialisierungszeit um 100 ms sowie die JS-Größe um 30%:
- Bündeln Sie alle erforderlichen Skripts mit einem JS-Bundler (z.B. Webpack)
- Das gebündelte Skript wird asynchron geladen, damit das Seiten-Rendering nicht blockiert wird.
- Berechnetes Anzeigenbanner an Shadow DOM (im Vergleich zu iFrame) anhängen
- Mit der Intersection Observer API Anzeigen schrittweise laden, wenn der Nutzer scrollt
Die Website schrittweise verbessern
Zusätzlich zu diesen grundlegenden Optimierungen nutzte Nikkei Web App Manifest und Service Worker, um seine Website installierbar zu machen und sogar offline zu arbeiten. Durch den Einsatz der Cache-First-Strategie im Service Worker werden alle Kernressourcen und Top-Artikel im Cache-Speicher gespeichert und auch in Notfallsituationen wie einem unzuverlässigen oder Offline-Netzwerk wiederverwendet. So wird eine konsistente, optimierte Leistung erzielt.
Hacke die Nikkei
Ein traditionelles Zeitungsunternehmen mit einer über 140-jährigen Geschichte hat seine Digitalisierung mithilfe des Webs und PWAs erfolgreich beschleunigt. Die Front-End-Entwickler von Nikkei haben bewiesen, dass eine erstklassige UX zu einer starken Geschäftsleistung führt. Das Unternehmen wird auch in Zukunft ein neues Qualitätsniveau für das Web erreichen.