Farfetch, retailer di articoli di lusso, registra tassi di conversione più elevati per migliorare i Segnali web essenziali

Il modo in cui il retailer di moda di e-commerce ha messo in correlazione i Segnali web essenziali e le metriche sulle prestazioni con le metriche aziendali, ha registrato un aumento dei KPI e ha creato un "Calcolatore dei casi di business per le prestazioni" per guidare le decisioni sui prodotti e una cultura del rendimento.

Dikla Cohen
Dikla Cohen
Patrícia Couto Neto
Patrícia Couto Neto
Rui Santos
Rui Santos

All'interno di molte aziende, le prestazioni relative alla velocità del sito web e ai Segnali web essenziali sono ancora percepite come responsabilità dei team di progettazione. La velocità del sito può diventare invisibile ad altre aree dell'attività se non si comprende il valore dell'attività e del cliente. Di conseguenza, il rendimento può essere trascurato al momento di prendere decisioni chiave e di definire le roadmap.

Per migliorare la cultura del rendimento dei vari team e generare miglioramenti significativi all'esperienza web, il retailer di moda e-commerce di lusso Farfetch ha lanciato un progetto per definire e utilizzare metriche di rendimento reali incentrate sul cliente. Il loro obiettivo è correlarli alle metriche aziendali per capire meglio in che modo le prestazioni influiscono sui KPI dell'azienda.

Le loro ambizioni, però, non sono finite qui. In definitiva, l'obiettivo del progetto era un cambiamento culturale su larga scala, abbattendo i compartimenti stagni all'interno dell'organizzazione e introducendo un nuovo linguaggio orientato al business per offrire a tutti un modo condiviso di parlare di argomenti che un tempo erano considerati tecnici. Farfetch voleva che le prestazioni relative alla velocità del sito web fossero una responsabilità condivisa, facilitassero un processo decisionale informato e stabilissero come un pilastro principale di ciò che rende una buona esperienza web.

Un diagramma che mette a confronto la velocità tra la responsabilità di uno sviluppatore e la velocità come responsabilità condivisa. Nel primo caso, ogni fase è a sé stante, mentre nel secondo caso ogni fase è all'interno dello stesso silo.

All'inizio, Farfetch si è resa conto che un singolo reparto non poteva raggiungere questo obiettivo come prima e ha riunito un team centrale di esperti provenienti da varie aree dell'azienda (ingegneria, infrastruttura, architettura e prodotto), che ha adottato una strategia passo passo per rinnovare il modo in cui l'azienda ha esaminato l'argomento.

Passaggio 1: definizione, misurazione e monitoraggio delle metriche

Innanzitutto, Farfetch aveva bisogno di disporre dei giusti strumenti di monitoraggio per comprendere lo stato attuale e le deviazioni nei touchpoint e nelle applicazioni del percorso.

Ha usato sia i dati di prova controllati che il monitoraggio degli utenti reali (dati sul campo) per monitorare i Segnali web essenziali e ulteriori metriche sulle prestazioni incentrate sull'utente per analizzare lo stato attuale delle prestazioni in termini di velocità. Per acquisire i dati, ha utilizzato JavaScript e la libreria web-vitals.js, che ha permesso al team di analisi dei prodotti di ottenere visibilità sulle metriche sul rendimento insieme a quelle aziendali nella stessa sessione e, di conseguenza, iniziare a esaminare come l'una influisce sull'altra.

Il gruppo multidisciplinare ha cercato di capire quali metriche erano più importanti per l'azienda. Per farlo, ha esaminato il percorso critico del percorso degli utenti di Farfetch e ha cercato di collegarlo tramite indicatori di rendimento. Oltre alle metriche di Core Web Vitals delineate da Google, ciascuna delle quali rappresenta un aspetto distinto dell'esperienza utente, l'azienda ha utilizzato anche JavaScript personalizzato per monitorare Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint e Time to Interactive (TTI).

Le metriche vengono raccolte utilizzando diversi metodi dell'API Performance, dell'API Long Tasks e i polyfill di Google. Puoi trovare ulteriori dettagli in questo post del blog sulle tecnologie Farfetch della metà del 2020 di Manuel Garcia, Senior Principal Engineer per il web.

Per quanto riguarda l'analisi dei dati, Farfetch ha la propria soluzione di monitoraggio multicanale utilizzata dalle applicazioni front-end chiamata Omnitracking. Monitora gli eventi generati dalle visualizzazioni di pagina, dalle azioni degli utenti e dalle azioni di sistema. Omnitracking Data Model è la soluzione di Farfetch per l'analisi, l'esplorazione dei dati e i casi di reporting, realizzati sulla base degli eventi generati dai tracker. L'obiettivo del modello di dati è aiutare e supportare chiunque abbia bisogno di comprendere:

  • Comportamento degli utenti
  • Esperienza utente sulle applicazioni Farfetch
  • Utilizzo delle applicazioni
  • Conversioni macro e micro
  • Analisi di più canali e canalizzazioni

L'idea era quindi di aggiungere a questo livello dati i dati sul rendimento di ogni visualizzazione di pagina su farfetch.com, acquisiti da JavaScript. Il rispetto di questo modello ha garantito una corrispondenza tra i dati sul rendimento e le principali metriche della canalizzazione di conversione per ogni sessione, nonché la base per un'esplorazione analitica sull'argomento.

Infine, Farfetch ha stabilito budget delle prestazioni basati sul tempo per ogni metrica sulle pagine principali del percorso e un processo di governance per gestire le violazioni del budget. Ha anche iniziato a incorporare metriche relative alle prestazioni nelle pipeline CI per comprendere le deviazioni di budget il prima possibile nel flusso di sviluppo.

Passaggio 2: comunica nella lingua dell'attività

Con i dati sulle prestazioni ora disponibili nei set di dati interni di business intelligence di Farfetch, il team di analisi ha iniziato a esplorare modelli matematici e pattern nei dati che potrebbero indicare una correlazione tra le metriche di rendimento e i KPI di business (ad esempio, tasso di conversione e percentuale di visite di una sola pagina), consentendo una nuova visione dell'impatto finanziario della velocità del sito e dell'UX per l'attività. Ciò ha permesso di discutere del rendimento in un linguaggio comune con i responsabili delle decisioni aziendali. L'analisi ha incluso tutti i Segnali web essenziali e le altre metriche ritenute importanti da Farfetch. Ha rivelato informazioni di grande impatto.

Tenendo presente che Google consiglia di utilizzare la Largest Contentful Paint (LCP) per rimanere al di sotto di 2,5 secondi per offrire un'esperienza utente ottimale, Farfetch ha studiato attentamente questa soglia e ha trovato risultati significativi.

L'analisi di correlazione statistica di Farfetch ha mostrato che oltre quel punto, il tasso di conversione inizia a diminuire e il tasso di uscita aumenta. Questo dimostra che gli utenti iniziano a percepire lo svantaggio di un caricamento lento delle pagine e che il tasso di conversione diminuisce in media dell'1,3% a ogni 100 ms in più di LCP.

Grafico della metrica LCP, dove l'asse Y indica il tasso di conversione e la percentuale di visite alla pagina e l'asse X indica il tempo LCP. Poiché il valore LCP è più veloce, la percentuale di visite di una sola pagina diminuisce e il tasso di conversione aumenta.

Farfetch ha anche verificato una diminuzione del tasso di uscita del -3,1% per ogni 0,01 in meno sul punteggio Cumulative Layout Shift (CLS), riaffermando l'impatto della stabilità della pagina per mantenere gli utenti su un sito web.

Un grafico CLS, dove l'asse Y rappresenta il tasso di conversione e la percentuale di visite alla pagina e l'asse X il punteggio CLS. I punteggi CLS più bassi mostrano la percentuale più alta di visite di una sola pagina, mentre le conversioni aumentano con punteggi CLS più bassi.

Per quanto riguarda l'interattività e la fluidità delle pagine, sebbene il First Input Delay (FID) venga monitorato e analizzato continuamente, Farfetch misura anche il TTI, che si è rivelato una metrica notevolmente efficace per la canalizzazione di conversione aziendale di Farfetch.

Per eseguire questa operazione, ha inserito il polyfill TTI di Google nel sito web per memorizzare questa metrica. Utilizzo dell'API Long Tasks per segnalare attività lunghe (attività che richiedono più di 50 millisecondi sul thread principale del browser).

Il team di analisi ha quindi potuto scoprire che il tasso di conversione è aumentato del 2,8% per ogni secondo riduzione del TTI, dimostrando chiaramente una migliore efficienza del codice e sbloccando il thread principale del browser.

Un grafico relativo al TTI, in cui l'asse Y rappresenta il tasso di conversione e la percentuale di visite di una singola pagina, mentre l'asse X indica il tempo TTI. Con l'aumentare del tempo TTI, il tasso di conversione diminuisce e la percentuale di visite di una sola pagina aumenta.

Alla fine, questa analisi ha dimostrato anche che alcune metriche non avevano un impatto significativo sui KPI aziendali o altre sarebbero più pertinenti nelle diverse fasi del percorso dell'utente. Ciò ha permesso di comprendere appieno le opportunità disponibili in ogni punto della canalizzazione di conversione.

Passaggio 3: integra il cambiamento culturale

Mostrare le informazioni di cui sopra insieme alla ricerca qualitativa sugli utenti sulla percezione da parte degli utenti della velocità del sito è stato fondamentale per stabilire l'allineamento con gli obiettivi aziendali, garantire la consapevolezza a livello dirigenziale e ottenere l'approvazione per il processo decisionale basato sul rendimento nelle roadmap dei prodotti. Ora è stato possibile dimostrare il valore delle prestazioni per Farfetch.

Per semplificare l'assegnazione delle priorità, Farfetch ha creato uno strumento self-service che ha chiamato Calcolatore dei casi di business per la velocità del sito, prendendo ispirazione dal Calcolatore dell'impatto della velocità di Google. Consente a qualsiasi product manager di creare un business case basato sui miglioramenti delle prestazioni calcolando all'istante l'impatto sull'attività. Con un modello dei dati che utilizza la correlazione tra il tasso di conversione e le metriche relative all'esperienza utente, è flessibile adattarsi a diversi ambiti dei prodotti, dispositivi e punti di contatto relativi al percorso dell'utente.

Uno screenshot del calcolatore del business case Site Speed di Farfetch.

Parallelamente, una serie di dashboard analitiche self-service ha creato una visibilità a livello aziendale degli indicatori di rendimento in tempo reale e del loro impatto sul business. Le prestazioni sono ora completamente integrate nello sviluppo dei prodotti e i team di prodotto possono accedere facilmente a metriche, strumenti di controllo e monitoraggio del budget delle prestazioni. Inoltre, grazie all'integrazione del livello dati, le metriche sul rendimento sono disponibili anche negli strumenti di test A/B di Farfetch, fornendo ai product manager un altro potente vettore di informazioni.

Negli ultimi mesi, il team centrale è anche sulla buona strada per stabilire questa cultura non solo sui team di sviluppo front-end, ma anche all'interno del dominio della piattaforma, utilizzando metodologie simili per monitorare e dimostrare l'impatto dei principali microservizi e transazioni.

Su questo argomento sono state fatte molte presentazioni basate su Farfetch, ma anche menzioni esterne. Ad esempio, una menzione a una conferenza Google I/O del 2021 sull'impatto commerciale dei Segnali web essenziali. Ciò ha anche contribuito a dare costantemente pertinenza al tema e a consolidare la strategia del team in materia culturale.

Passaggio 4: migliora le metriche

In definitiva, tutto questo lavoro doveva contribuire a far sì che Farfetch possa migliorare oggettivamente le metriche relative alla velocità del suo sito web, garantendo che i suoi team seguissero le best practice del settore e perseguissero opportunità di miglioramento.

Una delle principali opportunità rilevate nel 2021 è stata la necessità di migliorare l'LCP nei due tipi di pagine principali di Farfetch: le pagine dei prodotti e le pagine delle schede di prodotto.

I team hanno esaminato il modo in cui caricavano i contenuti principali di quelle pagine. Grazie a un business case che mostrava l'impatto della ricerca di questa opportunità, l'azienda è stata in grado di:

  • Adatta il componente di caricamento dell'immagine prodotto da una soluzione basata su JavaScript a un'implementazione nativa.
  • Definire la priorità delle immagini e dividerle in asset critici e non critici.
  • Carica in anticipo le immagini critiche, con la sorgente già incorporata nel codice HTML e utilizzando <link rel="preload"> in modo che vengano scaricate il prima possibile.
  • Utilizza l'attributo <img loading="lazy"> per le immagini non critiche, con un polyfill che utilizza Intersection Observationr su browser non supportati come Safari.

In questo modo è stato in grado di spostare l'ago della bilancia e dimostrare mediante test A/B l'ipotesi e l'impatto sull'attività. Ad esempio, sulle pagine dei prodotti, questo sforzo ha fruttato più di 600 ms e il test A/B ha mostrato un aumento del tasso di conversione nell'intervallo dell'1-5% con il livello di confidenza definito dall'azienda.

Di seguito sono riportati i miglioramenti che il team è stato in grado di apportare in termini di percentuale di visualizzazioni di pagina considerate "buona", "da migliorare" e "scarsa", in base alla definizione di Google di punteggio LCP.

Un grafico a barre in pila dell&#39;LCP mediana delle soglie di Segnali web essenziali per le pagine delle schede di Farfetch. Le pagine con la soglia &quot;buona&quot; sono aumentate dal 37% al 53%.
Un grafico a barre in pila dell&#39;LCP mediana delle soglie di Segnali web essenziali per le pagine delle schede di Farfetch. Le pagine con la soglia &quot;buona&quot; sono aumentate dal 36% al 48%.

I vantaggi di un sito più veloce e di migliori prassi di lavoro

La creazione di una cultura del rendimento e di strumenti come il Business Case Calculator ha permesso a tutti di iniziare a parlare un linguaggio condiviso che può essere comprensibile da product manager, stakeholder e ingegneri. Questo ha dato accesso a discussioni continue su come definire le priorità delle nuove iniziative e migliorare il rendimento.

"Volevamo interrompere il ciclo del rendimento in quanto riguardava solo la tecnologia, ma la responsabilità era di proprietà del team di tecnici", spiega Rui Santos, Web Channels Senior Principal Product Manager di Farfetch. "Collegare le metriche sul rendimento e le metriche aziendali è stato sorprendentemente efficace per trasmettere il messaggio molto, molto rapidamente. Il business guida l'azienda e collegare il proprio successo alle metriche relative alla velocità ha incoraggiato un gruppo più ampio di stakeholder a comprendere e orientare le decisioni di compromesso".

Nel segmento dell'e-commerce di lusso, la velocità o la lentezza del tuo sito possono determinare il modo in cui i consumatori vedono il tuo brand e la qualità del tuo servizio nel complesso. Per gli utenti, qualità equivale a lusso, e questo vale per ogni aspetto della loro esperienza, incluso il rendimento del tuo sito web. Poiché la velocità del sito produce un effetto comprovato sul tasso di conversione, le prestazioni ora occupano una posizione sicura nella pianificazione futura in Farfetch.