Trovare la correlazione tra il rendimento del sito e le metriche aziendali è stato fondamentale per il successo delle attività di ottimizzazione.
Swappie è una start-up di successo che vende telefoni ricondizionati. Per alcuni anni, la priorità è stata data all'aggiunta di nuove funzionalità rispetto al rendimento del sito, ma quando ha notato che i risultati aziendali sul sito mobile erano in ritardo rispetto alla versione desktop, ha deciso di cambiare approccio. Si è concentrata sull'ottimizzazione del rendimento e presto ha registrato un aumento delle entrate da dispositivi mobili.
42%
Aumento delle entrate provenienti dai visitatori da dispositivo mobile
10pp*
*Aumento del TdCm relativo in punti percentuali
Mettere in evidenza l'opportunità
Il tasso di conversione da dispositivo mobile relativo (TdCm rel) viene calcolato dividendo il tasso di conversione da dispositivo mobile per il tasso di conversione da desktop. Esistono molte opportunità per monitorare le metriche sulla velocità, ma collegarle alle metriche aziendali può essere piuttosto complicato. Poiché le stesse campagne e stagionalità raggiungono sia i dispositivi mobili che i computer, la metrica TdCm rel elimina l'influenza di questi parametri esterni e mostra solo se il sito mobile sta migliorando o meno.
Il valore medio per i dieci siti di e-commerce più grandi degli Stati Uniti è un TdCm relativo del 50%, ma Swappie ha registrato il 24%. Ciò indicava che il sito mobile aveva dei problemi e che l'azienda stava perdendo entrate, il che ha portato al lancio del progetto di miglioramento del rendimento.
Misurare l'impatto dei miglioramenti del rendimento
Swappie ha utilizzato Google Analytics per configurare il monitoraggio giornaliero del tasso di conversione mobile relativo ai referral e del tempo di caricamento medio della pagina mobile utilizzando questo modello di foglio di lavoro. (Leggi le istruzioni per l'utilizzo del foglio di lavoro.) Inoltre, hanno iniziato a monitorare Core Web Vitals tramite Google Analytics e BigQuery. Una volta implementato il monitoraggio, gli sviluppatori hanno iniziato a lavorare sul rendimento del sito.
Dopo solo tre mesi di lavoro, l'impatto era chiaro: il TdCm relativo è passato dal 24% al 34% e le entrate da dispositivi mobili sono aumentate del 42%.
23%
Tempo di caricamento medio della pagina inferiore
55%
LCP inferiore
91%
CLS inferiore
90%
FID inferiore
Ottimizzazioni
Ottimizzazione per LCP e CLS
Il team di sviluppo di Swappie ha riscontrato che c'erano molti margini di miglioramento per piccole cose che sono state trascurate per molto tempo. L'analisi del sito su viewport diversi e in lingue diverse ha evidenziato problemi relativi a LCP e CLS che erano facili da risolvere e hanno avuto un grande impatto sul rendimento complessivo. Ad esempio, se possibile, il rendering dell'elemento LCP sul server anziché sul client ha comportato una diminuzione del valore LCP.
Il rilevamento dei cambiamenti di layout è stato complicato, poiché possono variare molto in base alla visualizzazione e alla connessione. Dopo aver trasferito Core Web Vitals dagli utenti ai propri dati di analisi, ha capito di essere sulla strada giusta poiché il CLS era diminuito.
Immagini
Le immagini sono state ottimizzate con il precaricamento, il caricamento lento e le dimensioni appropriate. Precaricano le immagini principali (ad esempio l'elemento LCP) e caricano le immagini al di fuori del viewport solo quando necessario.
Caratteri
Swappie ha ottimizzato i caratteri cambiando fornitore. Questo ha avuto un grande impatto perché avevano bisogno di un modo ottimale per gestire i caratteri richiesti da lingue diverse.
Script di terze parti
Swappie si è impegnata molto per esaminare ogni script e widget di terze parti, nonché dove sono stati utilizzati e le funzionalità che fornivano. Dopo aver discusso con tutti gli stakeholder, abbiamo pianificato di ridurre l'impatto degli script sul sito, mantenendo al contempo le funzionalità. Sono stati rimossi gli elementi non necessari e il resto è stato ottimizzato, riducendo notevolmente la quantità di codice JavaScript di terze parti sul sito.
Rimozione del codice inutilizzato e ottimizzazione del bundling
L'ottimizzazione delle importazioni e la rimozione di JS e CSS inutilizzati hanno contribuito a piccoli miglioramenti alle prestazioni del sito di Swappie, ma questi piccoli miglioramenti si accumulano nel tempo. Ha inoltre ottimizzato la configurazione del bundling.
Creare una cultura del rendimento in Swappie
Il risultato ottenuto da Swappie non deriva solo dalle modifiche al codice, ma anche alle modifiche all'organizzazione e alle sue priorità.
Il responsabile dell'ingegneria, Teemu Huovinen, spiega:
Devi collegare la velocità del sito alle metriche aziendali per evidenziarne l'importanza. Quando hai poco tempo e risorse, come accade sempre, tutto si riduce alla definizione delle priorità. Dare la priorità al valore del cliente è la strada da seguire, ma è fin troppo facile concentrarsi su nuove funzionalità e miglioramenti più diretti delle conversioni se ritieni che la velocità del sito migliori solo l'esperienza utente. Collegare la velocità del sito alle metriche aziendali non è sempre facile, ed è qui che il calcolo con il valore Rel mCvR ci ha aiutato molto.
Teemu Huovinen
Una volta che il team di sviluppatori ha avuto l'opportunità di concentrarsi completamente sulla velocità del sito per un trimestre, è stato più motivato ad approfondire l'argomento.
La combinazione del nostro impatto con la crescita del nostro team è ciò che rende il tutto ancora più impressionante. Quattro dei nostri sette sviluppatori avevano iniziato a lavorare al miglioramento del rendimento nel mese in cui abbiamo iniziato. Tutto il merito va al team. È davvero incredibile come abbiamo potuto unirci intorno all'argomento e avere un impatto così grande.
Teemu Huovinen
Teemu sottolinea inoltre l'importanza di dedicare tempo all'inizio per elaborare piani basati sui dati, imparare a utilizzare la scheda Rendimento di DevTools e configurare l'analisi degli utenti prima di apportare miglioramenti. I grafici (soprattutto quelli che vanno nella giusta direzione) sono un'ottima fonte di feedback e convalida per il tuo lavoro. L'analisi di Core Web Vitals sul campo insieme ai punteggi di Lighthouse (basati su test di laboratorio) li ha aiutati a concentrarsi sull'ottimizzazione degli aspetti giusti che interessano la maggior parte degli utenti.