Con una storia di pubblicazioni di oltre 140 anni, Nikkei è una delle società di media più autorevoli del Giappone. Oltre al quotidiano stampato, le loro proprietà digitali registrano oltre 450 milioni di visite al mese. Per offrire una migliore esperienza utente e accelerare la propria attività sul web, Nikkei ha lanciato con successo un'app web progressiva (PWA) - https://r.nikkei.com - a novembre 2017. Ora stanno ottenendo risultati straordinari dalla nuova piattaforma.
Miglioramenti delle prestazioni - Indice di velocità due volte migliore - Tempo all'interattività 14 secondi più veloce - Caricamento più rapido del 75% con il recupero anticipato
Impatto sull'attività - Traffico organico 2,3 volte superiore - Conversioni (abbonamenti) superiori del 58% - Utenti attivi giornalieri superiori del 49% - Visualizzazioni di pagina per sessione raddoppiate
Scarica il case study in formato PDF
Panoramica attività
La sfida
Nikkei ha registrato un rapido aumento del traffico mobile verso il suo sito web legacy quando gli smartphone sono diventati il principale punto di accesso al web per molti utenti. Tuttavia, utilizzando Lighthouse, uno strumento di controllo che scansiona una pagina web e fornisce consigli su come migliorare in più categorie, hanno capito che il loro sito non era completamente ottimizzato per il mobile in più aree e che il caricamento era molto lento.
Il loro sito web impiegava circa 20 secondi per diventare costantemente interattivo e aveva una media di 10 secondi nell'indice di velocità. Sapendo che il 53% degli utenti di dispositivi mobili abbandonerà un'esperienza se impiega più di 3 secondi a caricarsi, Nikkei voleva ridurre il tempo di caricamento per offrire un'esperienza migliore e accelerare la sua attività sul web.
Il valore della velocità è indiscutibile, soprattutto per le notizie finanziarie. Abbiamo reso la velocità una delle nostre metriche principali e i nostri clienti hanno apprezzato il cambiamento.
Taihei Shigemori, Manager, Digital Strategy
Risultati
Nikkei ha ottenuto un aumento impressionante del rendimento. Il punteggio Lighthouse è salito da 23 a 82. La misurazione del tempo all'interattività è 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 multipagina (MPA) che riduce la complessità del front-end, creata con JavaScript Vanilla. Cinque ingegneri front-end principali hanno lavorato per un anno per ottenere queste prestazioni.
Gli ingegneri front-end di Nikkei hanno dimostrato che un'ottima UX porta a buoni risultati aziendali. Siamo pienamente impegnati a proseguire il nostro percorso per portare un nuovo livello di qualità sul web.
Hiroyuki Higashi. Product Manager, Nikkei
Soluzione
Nikkei ha creato e lanciato una Progressive Web App utilizzando un design adattabile, JavaScript vanilla e un'architettura multipagina, concentrandosi sulla creazione di un'esperienza utente piacevole. Aggiungendo un service worker, sono stati in grado di fornire prestazioni prevedibili, indipendentemente dalla rete. In questo modo si garantisce anche che gli articoli più popolari siano sempre disponibili e caricati quasi immediatamente perché vengono archiviati utilizzando Cache Storage. Hanno aggiunto un file manifest dell'app web e, insieme al service worker, ciò consente agli utenti di installare la PWA, in modo che sia facilmente accessibile. Per assicurarsi che il rendimento fosse interamente sotto il loro controllo, hanno ottimizzato il 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 l'esperienza utente aggiungendo funzionalità PWA come il supporto offline e l'aggiunta alla schermata Home.
- Integra i budget di rendimento nella strategia di rendimento.
Approfondimento tecnico
La velocità conta
La velocità è più importante che mai. Poiché 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 sono resi conto che il loro sito web legacy 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. Era arrivato il momento per Nikkei di ricostruire il proprio sito web e adattarsi alle best practice per il rendimento web. Ecco i risultati e le ottimizzazioni delle prestazioni chiave nella nuova PWA.
Utilizzo di API web e best practice per velocizzare il caricamento
Richieste di chiavi di precaricamento
È importante dare la priorità al caricamento del percorso critico. Utilizzando HTTP/2 Server Push, possono dare la priorità ai bundle JavaScript e CSS critici che sanno che un utente avrà bisogno.
Evitare più viaggi di andata e ritorno 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 risolvere in anticipo l'handshake e la negoziazione DNS/TCP/SSL per queste origini chiave di terze parti.
Recuperare in modo dinamico la pagina successiva
Quando avevano la certezza che l'utente avrebbe navigato su una determinata pagina, non si limitavano ad attendere che la navigazione avvenisse. Nikkei aggiunge dinamicamente
<link rel=prefetch>
a <head> e precarica la pagina successiva prima che l'utente faccia clic sul link. In questo modo, la navigazione tra le pagine è immediata.
CSS del percorso critico incorporato
La riduzione del CSS che blocca il rendering è una delle best practice per il caricamento rapido. Il sito web incorpora tutti i CSS critici con 0 fogli di stile di blocco del rendering. Questa ottimizzazione ha ridotto il tempo di First Meaningful Paint di oltre 1 secondo.
Ottimizzare i bundle JavaScript
Nella loro esperienza precedente, i bundle JavaScript di Nikkei erano gonfi, con un peso totale di oltre 300 KB. Grazie alla riscrittura in JavaScript nativo e alle moderne ottimizzazioni del bundling, come la suddivisione basata sulle route e l'eliminazione del codice inutilizzato, è stato possibile ridurre questo problema. Hanno ridotto le dimensioni del bundle JavaScript dell'80%, portandole a 60 KB con RollUp.
Altre best practice implementate
- Compressione: Gzip/Brotli tutte le risorse comprimibili utilizzando Fastly CDN
- Memorizzazione nella cache: attiva la memorizzazione nella cache HTTP, la memorizzazione nella cache lato edge
- Ottimizzazione delle immagini: utilizza imgix per l'ottimizzazione e il rilevamento del formato delle immagini
- Carica lentamente le risorse non critiche: Utilizza l'API Intersection Observer per caricare i frammenti below the fold
- Avere una strategia di caricamento dei caratteri web: Dai la priorità all'utilizzo del carattere di sistema
- Ottimizza il First Meaningful Paint: Esegui il rendering dei contenuti lato server
- Adotta budget per il rendimento: Mantieni bassi i tempi di trasmissione e analisi/compilazione di JavaScript
Ottimizzazione di JavaScript di terze parti
Sebbene non sia facile ottimizzare i JavaScript di terze parti rispetto ai tuoi script, Nikkei è riuscita a comprimere e raggruppare tutti gli script correlati agli annunci, che ora vengono pubblicati dalla propria 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 di 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 file 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 pubblicitario calcolato a Shadow DOM (anziché a iframe)
- Carica progressivamente gli annunci durante lo scorrimento dell'utente con l'API Intersection Observer
Migliorare progressivamente il sito web
Oltre a queste ottimizzazioni di base, Nikkei ha sfruttato il 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 service worker, tutte le risorse principali e gli articoli più popolari vengono memorizzati in Cache Storage e riutilizzati anche in situazioni di emergenza, ad esempio una rete instabile o offline, garantendo prestazioni coerenti e ottimizzate.
Hack the Nikkei
Un'azienda di quotidiani tradizionali con una storia di oltre 140 anni ha accelerato con successo la sua digitalizzazione grazie alla potenza del web e delle PWA. Gli ingegneri front-end di Nikkei hanno dimostrato che un'ottima UX offre solide prestazioni aziendali. L'azienda continuerà il suo percorso per portare un nuovo livello di qualità sul web.