Con più di 140 anni di storia dell'editoria, Nikkei è una delle aziende di comunicazione più autorevoli in Giappone. Oltre al giornale cartaceo, ogni mese l'organizzazione visita più di 450 milioni di visite alle proprie proprietà digitali. Per offrire un'esperienza utente migliore e accelerare la propria attività sul web, a novembre 2017 Nikkei ha lanciato con successo un'app web progressiva (PWA), https://r.nikkei.com. Ora stanno ottenendo risultati sorprendenti grazie alla nuova piattaforma.
Aumento delle prestazioni - Indice di velocità raddoppiato - Tempo di interazione più rapido di 14 secondi - Caricamento più veloce del 75% con il precaricamento
Impatto sull'attività - 2,3 volte il traffico organico - 58% in più di conversioni (abbonamenti) - 49% in più di utenti attivi giornalieri - Il doppio delle visualizzazioni di pagina per sessione
Scarica il case study in formato PDF
Panoramica attività
Challenge
Nikkei ha registrato un rapido aumento del traffico da dispositivi mobili verso il sito web legacy, dal momento che gli smartphone sono diventati il principale punto di accesso 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, il team ha capito che il 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 aveva una media di 10 secondi sull'indice di velocità. sapendo che il 53% degli utenti di dispositivi mobili abbandona un'esperienza se impiega più di tre secondi a caricarsi, Nikkei ha voluto 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 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 incrementi di prestazioni impressionanti. 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 giornalieri attivi sono aumentati.
La PWA è un'app a più pagine (MPA) che riduce la complessità del front-end, creata con Vanilla JavaScript. Cinque principali ingegneri front-end hanno lavorato per un anno per raggiungere queste prestazioni.
Gli ingegneri front-end di Nikkei hanno dimostrato che un'esperienza utente eccellente porta buone prestazioni aziendali. Siamo costantemente impegnati nel proseguimento del nostro percorso verso un nuovo livello di qualità sul web.
Hiroyuki Higashi, Product Manager, Nikkei
Soluzione
Nikkei ha creato e lanciato un'app web progressiva utilizzando il reattivo design, il JavaScript vanilla e un'architettura multipagina e si è concentrata sulla creazione di un'esperienza utente deliziosa. Aggiungendo un service worker, sono stati in grado di fornire prestazioni prevedibili, indipendentemente dalla rete. Ciò garantisce inoltre che gli articoli principali siano sempre disponibili e caricati quasi immediatamente perché vengono archiviati utilizzando Archiviazione cache. Ha aggiunto un file manifest dell'app web che, insieme al service worker, consente agli utenti di installare la PWA, che è quindi facilmente accessibile. Per assicurarsi che le prestazioni fossero interamente sotto il suo controllo, ha ottimizzato il suo codice JavaScript di terze parti.
best practice
- Migliora la velocità di caricamento e l'interattività utilizzando le moderne API web, la compressione e le pratiche di ottimizzazione del codice.
- Migliora progressivamente l'esperienza utente aggiungendo funzionalità PWA, come il supporto offline e l'opzione Aggiungi alla schermata Home.
- Trasforma i budget delle prestazioni in una strategia basata sulle prestazioni.
Approfondimento tecnico
La velocità conta
La velocità è più importante che mai. Man mano che gli smartphone sono diventati il dispositivo di navigazione principale per molti utenti, Nikkei ha registrato un rapido aumento del traffico mobile sul suo servizio. Ma utilizzando Lighthouse, si sono resi conto che il loro sito web legacy non era completamente ottimizzato per i dispositivi mobili, con un indice di velocità in media di 10 secondi, un caricamento iniziale molto lento e un grande bundle JavaScript. Per Nikkei era giunto il momento di ricreare il sito web e di adattare le best practice per il rendimento sul web. Ecco i risultati e le principali ottimizzazioni delle prestazioni nella nuova PWA.
Sfruttare le API web e le best practice per velocizzare il caricamento
Precarica le richieste chiave
È importante dare priorità al caricamento del percorso critico. Utilizzando la modalità push del server HTTP/2, l'organizzazione è in grado di dare la priorità ai bundle JavaScript e CSS critici di cui un utente ha bisogno.
Evita diversi e costosi viaggi di andata e ritorno per qualsiasi origine
Il sito web doveva caricare risorse di terze parti per il monitoraggio, gli annunci e molti altri casi d'uso. Ha utilizzato <link rel=preconnect> per pre-risolvere l'handshake DNS/TCP/SSL e la negoziazione per queste origini chiave di terze parti.
Precarica dinamicamente la pagina successiva
Quando l'utente era sicuro che sarebbe giunto a una determinata pagina, non ha semplicemente aspettato che la navigazione venisse completata. Nikkei aggiunge dinamicamente <link rel=prefetch> a <head> e precarica la pagina successiva prima che l'utente faccia effettivamente clic sul link. In questo modo viene attivata la navigazione istantanea nelle pagine.
CSS del percorso critico incorporato
La riduzione del blocco del rendering per i CSS è una delle best practice per velocizzare il caricamento. Il sito web include tutti i CSS critici con il valore 0 per i fogli di stile che bloccano la visualizzazione. Questa ottimizzazione ha ridotto la prima visualizzazione significativa di oltre un secondo.
Ottimizza bundle JavaScript
Nell'esperienza precedente, i bundle JavaScript di Nikkei erano gonfi, con un peso totale di oltre 300 kB. Grazie alla riscrittura di JavaScript vaniglia e alle moderne ottimizzazioni del raggruppamento, come il blocco basato su route e il tremolio degli alberi, l'azienda è stata in grado di eliminare questo eccesso. Ha ridotto le dimensioni del bundle JavaScript dell'80%, scendendo a 60 kB con RollUp.
Altre best practice implementate
- Compressione: tutte le risorse comprimibili con gzip/Brotli utilizzando Fastly CDN
- Memorizzazione nella cache: abilita la memorizzazione nella cache HTTP, la memorizzazione nella cache perimetrale
- Ottimizzazione delle immagini: utilizza imgix per l'ottimizzazione e il rilevamento del formato delle immagini.
- Risorse non critiche per il caricamento lento: utilizza l'API Intervista Analyzer per caricare frammenti below the fold.
- Avere una strategia di caricamento dei caratteri web: dagli la priorità all'utilizzo del carattere di sistema
- Ottimizza la prima visualizzazione significativa: visualizza i contenuti lato server
- Adottare i budget delle prestazioni: mantenere ridotti i tempi di trasmissione di JavaScript e di analisi/compilazione
Ottimizzazione di JavaScript di terze parti
Sebbene non sia facile ottimizzare i JavaScript di terze parti rispetto ai tuoi script, Nikkei ha minimizzato e raggruppato con successo tutti gli script correlati agli annunci, che ora vengono pubblicati dalla sua rete CDN (Content Delivery Network). In genere, i tag relativi agli annunci forniscono uno snippet per avviare e caricare altri script necessari, che spesso bloccano il rendering della pagina e richiedono 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 e ha ridotto le dimensioni JS del 30%:
- Raggruppa tutti gli script richiesti utilizzando un bundler JS (ad es. WebPack)
- Caricare in modo asincrono lo script in bundle, in modo che non blocchi il rendering della pagina
- Associa il banner dell'annuncio calcolato al DOM Shadow (anziché all'iframe)
- Carica progressivamente gli annunci allo scorrimento dell'utente con l'API Intersection Observationr
Miglioramento progressivo del sito web
Oltre a queste ottimizzazioni di base, Nikkei ha sfruttato il Web App Manifest e i service worker per rendere il proprio sito web installabile e persino funzionare offline. Utilizzando la strategia cache-first nel service worker, tutte le risorse di base e gli articoli principali vengono archiviati nell'archiviazione della cache e riutilizzati anche in situazioni di emergenza, ad esempio una rete instabile o offline, fornendo prestazioni coerenti e ottimizzate.
Hackera il Nikkei
Una società di quotidiani tradizionali con più di 140 anni di storia 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'esperienza utente eccellente genera ottime prestazioni aziendali. L'azienda continuerà il suo percorso per portare un nuovo livello di qualità sul web.