Mit einer mehr als 140-jährigen Verlagsgeschichte ist Nikkei eines der führenden Medienunternehmen in Japan. Zusammen mit der Printzeitung verzeichnet das Unternehmen monatlich über 450 Millionen Besuche in seinen digitalen Properties. Um die Nutzerfreundlichkeit zu verbessern und sein Geschäft im Web zu beschleunigen, hat Nikkei im November 2017 eine progressive Web-Anwendung (PWA) veröffentlicht: https://r.nikkei.com. Mit der neuen Plattform erzielt das Unternehmen jetzt hervorragende Ergebnisse.
Leistungssteigerungen: - 2-mal besserer Speed Index - 14 Sekunden schnellere interaktive Nutzung - 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 schnellen Anstieg der Zugriffe über Mobilgeräte auf die alte Website, da Smartphones für viele Nutzer zum Hauptzugangspunkt für das Web wurden. Mithilfe von Lighthouse, einem Prüftool, das eine Webseite scannt und Empfehlungen zur Verbesserung in mehreren Kategorien gibt, wurde jedoch klar, dass die Website in mehreren Bereichen nicht vollständig für Mobilgeräte optimiert war und nur sehr langsam lädt.
Es dauerte etwa 20 Sekunden, bis die Website vollständig interaktiv war, und der Speed Index lag bei durchschnittlich 10 Sekunden. Da 53 % der mobilen Nutzer eine Website verlassen, wenn das Laden mehr als drei Sekunden dauert, wollte Nikkei die Ladezeit verkürzen, um die Nutzerfreundlichkeit zu verbessern und den Umsatz im Web zu steigern.
Die Bedeutung der Geschwindigkeit ist unbestreitbar, insbesondere bei Finanznachrichten. Wir haben Geschwindigkeit zu einem unserer zentralen Messwerte gemacht und unsere Kunden schätzen die Änderung.
Taihei Shigemori, Manager, Digital Strategy
Ergebnisse
Nikkei erzielte beeindruckende Leistungssteigerungen. Der Lighthouse-Wert stieg von 23 auf 82. Die Messung der Zeit bis zur Interaktion wurde um 14 Sekunden verbessert. Auch die Anzahl der organischen Zugriffe, die Geschwindigkeit, die Conversion-Rate und die Anzahl der aktiven Nutzer pro Tag stiegen.
Die PWA ist eine mehrseitige App (Multi-Page App, MPA), die die Komplexität des Front-Ends reduziert und mit Vanilla JavaScript erstellt wurde. Fünf Frontend-Entwickler haben ein Jahr lang daran gearbeitet, diese Leistung zu erreichen.
Die Frontend-Entwickler von Nikkei haben bewiesen, dass eine gute UX zu einer guten Geschäftsleistung führt. Wir sind fest entschlossen, das Internet noch hochwertiger zu machen.
Hiroyuki Higashi, Product Manager, Nikkei
Lösung
Nikkei entwickelte und veröffentlichte eine progressive Web-App mit responsivem Design, Vanille-JavaScript und einer mehrseitigen Architektur, um eine ansprechende Nutzererfahrung zu bieten. Durch das Hinzufügen eines Service Workers konnte das Unternehmen unabhängig vom Netzwerk eine vorhersehbare Leistung bereitstellen. Dadurch wird auch sichergestellt, dass Top-Artikel immer verfügbar und nahezu sofort geladen werden, da sie im Cache-Speicher gespeichert werden. Sie haben ein Web-App-Manifest hinzugefügt, das Nutzern zusammen mit ihrem Service Worker ermöglicht, die PWA zu installieren und so leicht darauf zuzugreifen. Um die Leistung vollständig zu kontrollieren, optimierte das Team den JavaScript-Code von Drittanbietern.
Best Practices
- Verbessern Sie die Ladegeschwindigkeit und Interaktivität mithilfe moderner Web-APIs, Komprimierung und Codeoptimierung.
- Sie können die Nutzerfreundlichkeit kontinuierlich verbessern, indem Sie PWA-Funktionen wie Offlineunterstützung und „Zum Startbildschirm hinzufügen“ hinzufügen.
- Leistungsbudgets in die Leistungsstrategie einbinden
Technische Details
Geschwindigkeit ist wichtig
Geschwindigkeit ist wichtiger denn je. Als viele Nutzer Smartphones zum Surfen verwendeten, verzeichnete Nikkei einen rasanten Anstieg des mobilen Traffics auf seinem Dienst. Mit Lighthouse stellte das Unternehmen jedoch fest, dass die alte Website nicht vollständig für Mobilgeräte optimiert war. Der Geschwindigkeitsindex betrug durchschnittlich 10 Sekunden, das Laden der Startseite war sehr langsam und das JavaScript-Bundle war zu groß. Es war an der Zeit für Nikkei, ihre Website neu zu gestalten und die Best Practices für die Web-Leistung anzupassen. Hier sind die Ergebnisse und wichtigsten Leistungsoptimierungen der neuen PWA.
Web-APIs und Best Practices nutzen, um das Laden zu beschleunigen
Wichtige Anfragen 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, von denen sie wissen, dass sie die Nutzer benötigen.
Mehrere, kostspielige Hin- und Rückflüge zu beliebigen Startorten vermeiden
Die Website musste Ressourcen von Drittanbietern für Tracking, Anzeigen und viele andere Anwendungsfälle laden. Das Team verwendete <link rel=preconnect>, um den DNS/TCP/SSL-Handshake und die Verhandlung für diese Schlüsselquellen von Drittanbietern im Voraus aufzulösen.
Nächste Seite dynamisch im Voraus abrufen
Als die Nutzer sicher waren, dass sie eine bestimmte Seite aufrufen werden, haben sie nicht nur auf die Navigation gewartet. Nikkei fügt dynamisch <link rel=prefetch> zum <head> hinzu und ruft die nächste Seite vorab ab, bevor der Nutzer tatsächlich auf den Link klickt. Dadurch wird eine sofortige Seitennavigation ermöglicht.
Inline-CSS für den kritischen Pfad
Das Reduzieren von CSS, das das Rendering blockiert, gehört zu den Best Practices beim schnellen Laden. Auf der Website ist das gesamte kritische CSS inline eingebunden und es gibt keine renderblockierenden Stylesheets. Durch diese Optimierung wurde die Zeit für „Inhalte weitgehend gezeichnet“ um mehr als eine Sekunde reduziert.
JavaScript-Bundles optimieren
Bisher waren die JavaScript-Bundles von Nikkei überladen und hatten insgesamt eine Größe von über 300 KB. Durch eine Umstellung auf Vanilla-JavaScript und moderne Bündelungsoptimierungen wie routenbasiertes Chunking und Tree-Shaking konnte das Problem behoben werden. Sie reduzierten die Größe ihres JavaScript-Bundles um 80 % auf 60 KB.
Weitere implementierte Best Practices
- Komprimierung: Alle komprimierbaren Ressourcen werden mit Gzip/Brotli und dem Fastly-CDN komprimiert.
- Caching: HTTP-Caching, Edge-Side-Caching aktivieren
- Bildoptimierung: Verwenden Sie imgix für die Optimierung und Erkennung von Bildformaten.
- Nicht kritische Ressourcen per Lazy Loading laden: Mit der Intersection Observer API können Sie Fragmente, die erst weiter unten sichtbar werden, per Lazy Loading laden.
- Eine Strategie für das Laden von Webschriften haben: Priorisieren Sie die Verwendung der Systemschriftart.
- First aussagekräftigen Paint optimieren: Content serverseitig rendern
- Nutzen Sie Leistungsbudgets: Verringern Sie die Übertragungs- und Parse-/Kompilierungszeiten von JavaScript.
Drittanbieter-JavaScript optimieren
Es ist zwar nicht so einfach, Drittanbieter-JavaScripts im Vergleich zu eigenen Skripts zu optimieren, aber Nikkei hat alle anzeigenbezogenen Skripts, die jetzt über ein eigenes Content Delivery Network (CDN) bereitgestellt werden, erfolgreich reduziert und gebündelt. Anzeigenbezogene Tags stellen normalerweise ein Snippet bereit, um andere erforderliche Skripts zu initiieren und zu laden. Diese blockieren häufig das Seiten-Rendering und erfordern für jedes der heruntergeladenen Skripts zusätzliche Netzwerk-Bearbeitungszeit. Nikkei hat den folgenden Ansatz verfolgt und die Initialisierungszeit um 100 ms verbessert und die JS-Größe um 30 % reduziert:
- Bündeln Sie alle erforderlichen Scripts mit einem JS-Bündelungstool (z. B. Webpack)
- Das gebündelte Script wird asynchron geladen, damit es das Rendern der Seite nicht blockiert.
- Das berechnete Anzeigenbanner an das Shadow-DOM anhängen (anstelle von iframe)
- Mit der Intersection Observer API werden Anzeigen beim Scrollen des Nutzers progressiv geladen
Website kontinuierlich verbessern
Zusätzlich zu diesen grundlegenden Optimierungen nutzte Nikkei das Manifest der Web-App und Service Worker, um seine Website installierbar und sogar offline nutzbar zu machen. Durch die Verwendung der Cache-first-Strategie in ihrem Service Worker werden alle Hauptressourcen und Top-Artikel im Cachespeicher gespeichert und auch in Notfallsituationen wie einem instabilen oder offline stehenden Netzwerk wiederverwendet. So wird eine gleichbleibende, optimierte Leistung sichergestellt.
Nikkei hacken
Ein traditionelles Tageszeitungsunternehmen mit einer über 140-jährigen Geschichte hat seine Digitalisierung mithilfe von Web und PWA erfolgreich beschleunigt. Die Frontend-Entwickler von Nikkei haben bewiesen, dass eine hervorragende UX zu einer starken Geschäftsleistung führt. Das Unternehmen wird weiterhin daran arbeiten, die Qualität im Web zu verbessern.