Creazione di una dashboard del rendimento web e ottimizzazione di JavaScript, delle risorse e della home page per raggiungere il successo aziendale.
Tokopedia è una delle più grandi aziende di e-commerce dell'Indonesia. Con oltre 2, 7 milioni di reti di commercianti a livello nazionale, oltre 18 milioni di schede di prodotto e oltre 50 milioni di visitatori mensili, il team web sapeva che investire nelle prestazioni web era essenziale. Creando una cultura incentrata sul rendimento, ha ottenuto un aumento del 35% delle percentuali di clic (CTR) e un incremento dell'8% delle conversioni (CVR).
35%
Aumento del CTR
8%
Aumento del CVR
4sec
Miglioramento del TTI
Mettere in evidenza l'opportunità
Il team web ha parlato con il proprio team dirigenziale dell'importanza di investire nelle prestazioni web per migliorare l'esperienza utente e il coinvolgimento e ha inoltre mostrato l'impatto delle prestazioni utilizzando API e pattern avanzati.
L'approccio utilizzato
JavaScript e ottimizzazione delle risorse
Il blocco del rendering o la lunga esecuzione di JavaScript sono una causa comune di problemi di prestazioni. Il team ha adottato diverse misure per ridurre al minimo questo problema:
- Creata una libreria di controller di script per caricare in modo selettivo script di terze parti al fine di ottimizzare il percorso di rendering critico.
- Abbiamo sostituito le librerie più pesanti con quelle più leggere.
- Implementata la suddivisione del codice ottimizzata per i contenuti above the fold.
- Implementato il caricamento adattivo, ad esempio il caricamento di immagini di alta qualità per i dispositivi su reti veloci e l'utilizzo di immagini di qualità inferiore per i dispositivi su reti lente.
- Immagini below the fold caricate tramite caricamento lento.
- Caricamento differito di JavaScript non critico.
Ottimizzazione della home page
Il team ha utilizzato Svelte per creare una versione Lite della home page per i nuovi visitatori, garantendo un'esperienza veloce sul sito web. Questa versione utilizzava anche un service worker per memorizzare nella cache gli asset non Lite in background.
Monitoraggio e budget delle prestazioni
Il team ha creato una dashboard di monitoraggio delle prestazioni utilizzando Lighthouse e altri strumenti per migliorare la qualità delle pagine web:
- Misura la qualità della rete, il monitoraggio dell'infrastruttura, le prestazioni del frontend e le prestazioni del server.
-
Utilizza una combinazione di API delle piattaforme web (come l'
API Resource Timing
e l'intestazione
Server-Timing), l' API PageSpeed Insights (PSI) e il Report sull'esperienza utente di Chrome per monitorare le metriche del campo e del lab. - Analizza le immagini di Lighthouse per identificare le opportunità di ottimizzazione delle immagini.
- Applica un budget per le dimensioni del pacchetto durante l'integrazione continua (CI). L'esecuzione di CI non va a buon fine se le dimensioni del pacchetto superano il budget.
Essendo un'attività di e-commerce, l'acquisizione utenti è al centro del nostro successo. Riconosciamo l'importanza del web e per questo ci impegniamo a investire in tutti gli strumenti e le funzionalità che offriranno la migliore esperienza utente ai nostri utenti.
Dendi Sunardi, Engineering Manager, piattaforma web, Tokopedia
Consulta la pagina Case study di Scale on Web per altri casi di successo da India e Sud-est asiatico.