Con una storia editoriale di oltre 140 anni, Nikkei è una delle aziende di media più autorevoli in Giappone. Oltre al suo giornale, il gruppo ha oltre 450 milioni di visite mensili alle sue proprietà digitali. Per offrire un'esperienza utente migliore e accelerare la propria attività sul web, a novembre 2017 Nikkei ha lanciato con successo un'applicazione web progressiva (PWA) - https://r.nikkei.com. Ora stanno ottenendo risultati sorprendenti dalla nuova piattaforma.
Miglioramenti delle prestazioni - Indiciso di velocità migliore del 200% - Tempo di risposta più rapido di 14 secondi - Caricamento più rapido del 75% con il prefetch
Impatto sull'attività - Traffico organico aumentato di 2,3 volte - Aumento delle conversioni (abbonamenti) del 58% - Aumento degli utenti attivi giornalieri del 49% - Aumento delle visualizzazioni di pagina per sessione di 2 volte
Scarica il case study in formato PDF
Panoramica attività
Sfida
Nikkei ha registrato un rapido aumento del traffico mobile verso il suo sito web precedente man mano che gli smartphone sono diventati il punto di accesso principale al web per molti utenti. Tuttavia, utilizzando Lighthouse, uno strumento di controllo che analizza una pagina web e fornisce consigli su come migliorare in più categorie, l'azienda ha capito che il suo sito non era completamente ottimizzato per i dispositivi mobili in più aree ed era molto lento da caricare.
Il sito web impiegava circa 20 secondi per diventare costantemente interattivo e mediamente 10 secondi su Speed Index. Sapendo che il 53% degli utenti di dispositivi mobili abbandona un'esperienza se il caricamento richiede più di 3 secondi, Nikkei voleva ridurre il tempo di caricamento per offrire un'esperienza migliore e accelerare la propria attività sul web.
Il valore della velocità è indiscutibile, soprattutto per le notizie finanziarie. Abbiamo scelto la velocità come una delle nostre metriche principali e i nostri clienti hanno apprezzato il cambiamento.
Taihei Shigemori, Manager, Digital Strategy
Risultati
Nikkei ha ottenuto notevoli incrementi di rendimento. Il suo punteggio Lighthouse è salito da 23 a 82. La misurazione del tempo di risposta è migliorata di 14 secondi. Anche il traffico organico, la velocità, il tasso di conversione e gli utenti attivi giornalieri sono aumentati.
La PWA è un'app di più pagine (MPA) che riduce la complessità del front-end, creata con Vanilla JavaScript. Cinque ingegneri di front-end di base hanno lavorato per un anno per ottenere questo risultato.
I tecnici front-end di Nikkei hanno dimostrato che un'esperienza utente ottimale porta buone prestazioni aziendali. Siamo pienamente impegnati a continuare il nostro percorso per offrire un nuovo livello di qualità al web.
Hiroyuki Higashi. Product Manager, Nikkei
Soluzione
Nikkei ha creato e lanciato un'app web progressiva utilizzando il design responsive, JavaScript e un'architettura su più pagine, concentrandosi sulla creazione di un'esperienza utente piacevole. Aggiungendo un service worker, è stato possibile fornire prestazioni prevedibili, indipendentemente dalla rete. In questo modo, gli articoli principali sono sempre disponibili e vengono caricati quasi immediatamente perché vengono archiviati utilizzando Cache Storage. Hanno aggiunto un file manifest dell'app web e, insieme al loro service worker, consentono agli utenti di installare la PWA, in modo che sia facilmente accessibile. Per garantire che le prestazioni fossero completamente sotto il loro controllo, ha ottimizzato il proprio codice JavaScript di terze parti.
Best practice
- Migliora la velocità di caricamento e l'interattività utilizzando API web moderne, compressione e pratiche di ottimizzazione del codice.
- Migliora progressivamente la UX aggiungendo funzionalità PWA come il supporto offline e l'opzione Aggiungi alla schermata Home.
- Crea budget di rendimento nella strategia di rendimento.
Approfondimento tecnico
La velocità conta
La velocità è più importante che mai. Quando gli smartphone sono diventati il dispositivo di navigazione principale per molti utenti, Nikkei ha registrato un rapido aumento del traffico mobile sul proprio servizio. Tuttavia, utilizzando Lighthouse, si è reso conto che il suo sito web precedente non era completamente ottimizzato per il mobile, con un indice di velocità medio di 10 secondi, un caricamento iniziale molto lento e un bundle JavaScript di grandi dimensioni. Per Nikkei era giunto il momento di ricreare il sito web e adattare le best practice per le prestazioni web. Ecco i risultati e le principali ottimizzazioni delle prestazioni della nuova PWA.
Sfruttare le API web e le best practice per velocizzare il caricamento
Precaricare le richieste di chiavi
È importante dare la priorità al caricamento del percorso critico. Utilizzando il push del server HTTP/2, possono dare la priorità ai bundle JavaScript e CSS critici di cui sanno che un utente avrà bisogno.
Evita viaggi di andata e ritorno multipli e costosi verso qualsiasi origine
Il sito web doveva caricare risorse di terze parti per il monitoraggio, gli annunci e molti altri casi d'uso. Hanno utilizzato
<link rel=preconnect>
per pre-risolvere l'handshake e la negoziazione DNS/TCP/SSL per queste origini di terze parti chiave.
Effettuare il prelievo della pagina successiva in modo dinamico
Quando erano certi che l'utente avrebbe visitato una determinata pagina, non si limitavano ad attendere che la navigazione avvenisse. Nikkei aggiunge dinamicamente
<link rel=prefetch>
al <head> e esegue il prelievo della pagina successiva prima che l'utente faccia effettivamente clic sul link. In questo modo puoi navigare immediatamente tra le pagine.
CSS critico incorporato
Ridurre il CSS che blocca il rendering è una delle best practice per velocizzare il caricamento. Il sito web incorpora tutto il CSS fondamentale senza elenchi di stili che bloccano il rendering. Questa ottimizzazione ha ridotto il First Meaningful Paint di oltre 1 secondo.
Ottimizza i bundle JavaScript
Nella precedente esperienza, i bundle JavaScript di Nikkei erano eccessivamente grandi e pesavano più di 300 KB in totale. Attraverso una riscrittura al codice JavaScript "vanilla" e moderne ottimizzazioni del raggruppamento, come il chunking basato su route e l'assorbimento degli alberi, sono stati in grado di eliminare questo gonfiore. Ha ridotto le dimensioni del bundle JavaScript dell'80%, passando a 60 KB con RollUp.
Altre best practice implementate
- Compressione: Gzip/Brotli per tutte le risorse comprimibili utilizzando la CDN Fastly
- Memorizzazione nella cache: attiva la memorizzazione nella cache HTTP e la memorizzazione nella cache lato client.
- Ottimizzazione delle immagini: utilizza imgix per l'ottimizzazione e il rilevamento del formato delle immagini
- Caricamento lento di risorse non critiche: utilizza l'API intersezione di osservazione per caricare frammenti below the fold
- Avere una strategia di caricamento dei caratteri web: Dare la priorità all'utilizzo del carattere di sistema
- Ottimizza il First Meaningful Paint: esegui il rendering dei contenuti lato server
- Adotta budget di rendimento: mantieni bassi i tempi di trasmissione e analisi/compilazione di JavaScript
Ottimizzazione di JavaScript di terze parti
Sebbene non sia così facile ottimizzare i JavaScript di terze parti rispetto ai tuoi script personali, Nikkei ha minimizzato e raggruppato correttamente tutti gli script relativi agli annunci, che ora vengono pubblicati dalla sua rete CDN (Content Delivery Network). I tag correlati agli annunci in genere forniscono uno snippet per avviare e caricare altri script richiesti, che spesso bloccano il rendering della pagina e richiedono anche tempi di risposta della rete aggiuntivi per ciascuno degli script scaricati. Nikkei ha adottato il seguente approccio e ha migliorato il tempo di inizializzazione di 100 ms, oltre a ridurre le dimensioni del codice JS del 30%:
- Raggruppa tutti gli script richiesti utilizzando un bundler JS (ad es. Webpack)
- Carica in modo asincrono lo script in bundle, in modo che non blocchi il rendering della pagina
- Collega il banner dell'annuncio calcolato a Shadow DOM (anziché a iframe)
- Caricare progressivamente gli annunci quando l'utente scorre con l'API Intersection Observer
Miglioramento progressivo del sito web
Oltre a queste ottimizzazioni di base, Nikkei ha utilizzato il file manifest dell'app web e i service worker per rendere il proprio sito web installabile e persino utilizzabile offline. Utilizzando la strategia cache-first nel proprio worker di servizio, tutte le risorse di base e gli articoli principali vengono memorizzati nello spazio di archiviazione della cache e riutilizzati anche in situazioni di emergenza come una rete instabile o offline, garantendo prestazioni coerenti e ottimizzate.
Hack the Nikkei
Un'azienda tradizionale di quotidiani con una storia di oltre 140 anni ha accelerato con successo la propria digitalizzazione grazie alla potenza del web e delle PWA. Gli sviluppatori front-end di Nikkei hanno dimostrato che un'esperienza utente eccezionale genera un ottimo rendimento aziendale. La società continuerà il suo percorso per offrire un nuovo livello di qualità al web.