Individuare la correlazione tra le prestazioni del sito e le metriche di business è stata la chiave per il successo delle iniziative di ottimizzazione.
Stackpie è una startup di successo che vende telefoni ricondizionati. Per alcuni anni ha dato la priorità all'aggiunta di nuove funzionalità rispetto alle prestazioni del sito. Tuttavia, quando ha notato che i risultati aziendali sul sito per dispositivi mobili erano in ritardo rispetto alla versione desktop, si è verificato un cambiamento. L'azienda si è concentrata sull'ottimizzazione del rendimento e in breve tempo ha registrato un aumento delle entrate provenienti dai dispositivi mobili.
Il 42%
Aumento delle entrate generate dai visitatori che utilizzano dispositivi mobili
10pp*
*aumento del CVR Rel in punti percentuali
Segnalazione dell'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 computer desktop. Esistono molte opportunità per tracciare le metriche della velocità, ma collegarle a metriche aziendali può essere molto difficile. Poiché le stesse campagne e stagionalità raggiungono sia dispositivi mobili che desktop, la metrica TdCm rel elimina l'influenza di questi parametri esterni e mostra solo se il sito mobile sta migliorando o meno.
La media dei dieci principali siti di e-commerce degli Stati Uniti è un TdC Rel del 50%, ma Swappie si è attestato al 24%. Ciò indicava che il sito per dispositivi mobili presentava difficoltà e l'azienda stava perdendo entrate, il che ha portato al lancio del progetto di miglioramento del rendimento.
Misurazione dell'impatto dei miglioramenti del rendimento
Stackpie ha utilizzato Google Analytics per impostare il monitoraggio giornaliero del TdCm Rel e del tempo di caricamento medio della pagina su dispositivi mobili utilizzando questo modello di foglio di lavoro. Leggi le istruzioni su come utilizzare il foglio di lavoro. Ha anche iniziato a monitorare i Segnali web essenziali tramite Google Analytics e BigQuery. Dopo aver attivato il monitoraggio, gli sviluppatori hanno iniziato a lavorare al rendimento del sito.
Dopo soli tre mesi di lavoro, l'impatto è stato chiaro: il TdCm di Rel è passato dal 24% al 34% e le entrate da dispositivi mobili sono aumentate del 42%.
Il 23%
Riduzione del tempo medio di caricamento delle pagine
Il 55%
LCP inferiore
Il 91%
CLS inferiore
Il 90%
FID inferiore
Ottimizzazioni
Ottimizzazione per LCP e CLS
Il team di sviluppo di Swappie ha scoperto che c'è molto margine di miglioramento per le piccole cose che sono state trascurate per molto tempo. Lo studio del sito con aree visibili diverse e in lingue differenti ha evidenziato i problemi relativi a LCP e CLS, che erano facili da risolvere e che avevano un grande impatto sulle prestazioni complessive. Ad esempio, il rendering dell'elemento LCP sul server anziché sul client, quando possibile, ha comportato una riduzione dell'LCP.
Rilevare le variazioni del layout è stato difficile, poiché potrebbero variare molto in base all'area visibile e alla connessione. Dopo aver ricevuto i Segnali web essenziali dagli utenti ai loro analisi, hanno capito di essere sulla strada giusta poiché il CLS era diminuito.
Immagini
Le immagini sono state ottimizzate con precaricamento, caricamento lento e dimensionamento corretto. Precaricano le immagini principali (ad esempio LCP), caricando le immagini all'esterno dell'area visibile solo quando necessario.
Caratteri
Scambia i caratteri ottimizzati cambiando fornitore. Ciò ha avuto un grande impatto, in quanto l'azienda aveva bisogno di un modo ottimale per gestire i caratteri tipografici richiesti da lingue diverse.
Script di terze parti
Swappie si è impegnato molto per esaminare ogni script e widget di terze parti, dove erano utilizzati e le funzionalità che ha fornito. Dopo aver consultato tutti gli stakeholder, hanno pianificato di ridurre l'impatto degli script sul sito, mantenendo le funzionalità. Ha rimosso ciò che non era necessario e ha ottimizzato il resto, diminuendo significativamente la quantità di JavaScript di terze parti sul sito.
Rimozione del codice inutilizzato e ottimizzazione del raggruppamento
L'ottimizzazione delle importazioni e la rimozione di codice JS e CSS inutilizzati hanno contribuito a piccoli miglioramenti alle prestazioni del sito di Exchangepie, ma questi piccoli miglioramenti si accumulano nel tempo. Inoltre, ha ottimizzato la configurazione del raggruppamento.
Creare una cultura del rendimento su Swappie
Il risultato ottenuto da Swappie deriva non solo dalle modifiche al codice, ma anche dalle modifiche all'organizzazione e alle sue priorità.
L'ingegnere capo Teemu Huovinen spiega:
Devi collegare la velocità del sito alle metriche aziendali per metterne davvero in evidenza l'importanza. Dipende tutto dalla priorità quando si hanno poco tempo e risorse, come avviene sempre. Dare la priorità al valore del cliente è la soluzione, ma è fin troppo facile concentrarsi su nuove funzionalità e su un miglioramento diretto delle conversioni, se ritieni che la velocità del sito sia un miglioramento solo dell'aspetto tangibile del sito. Collegare la velocità del sito alle metriche aziendali non è sempre facile, ed è qui che il calcolo con TdC Rel ci ha aiutato molto.
Teemu Huovinen
Dopo aver dato al team di sviluppatori l'opportunità di concentrarsi completamente sulla velocità del sito per un trimestre, sono stati più motivati ad approfondire.
Combinare il nostro impatto con la crescita del nostro team è ciò che rende ancora più impressionante. Quattro dei nostri sette sviluppatori avevano avviato il processo nel mese in cui abbiamo iniziato a lavorare sulle prestazioni. Tutto merito al team, è davvero incredibile come siamo riusciti ad affrontare l'argomento e ad avere avuto un grande impatto.
Teemu Huovinen
Teemu sottolinea anche l'importanza di dedicare tempo all'inizio a creare piani basati sui dati, imparare a utilizzare la scheda Prestazioni DevTools e impostare l'analisi degli utenti prima di apportare eventuali miglioramenti. I grafici (soprattutto quelli che vanno nella direzione giusta) sono un'ottima fonte di feedback e convalida per il tuo lavoro. Osservare i Segnali web essenziali sul campo insieme ai punteggi di Lighthouse (basati su lab) lo ha aiutato a concentrarsi sull'ottimizzazione degli aspetti giusti che avrebbero un impatto maggiore sulla maggior parte delle persone.