Cosa dovresti misurare per migliorare il rendimento?

Strategie per misurare il rendimento in ogni fase della canalizzazione di acquisto.

I diversi passaggi di una canalizzazione di acquisto sono soggetti a problemi di rendimento in modi diversi e, di conseguenza, richiedono misurazioni e ottimizzazioni diverse:

In questa guida illustreremo come misurare i diversi passaggi. Per questo ti consigliamo di esaminare i dati di prova e sul campo.

I dati di prova controllati vengono raccolti eseguendo test in locale, ad esempio utilizzando Lighthouse e altri strumenti. Ciò può consentire di confrontare le prestazioni del sito web nel tempo e con quelle della concorrenza in un ambiente controllato e stabile, ma potrebbe non essere rappresentativo delle prestazioni dell'esperienza utente nella vita reale.

I dati reali vengono raccolti tramite analisi da utenti reali e, pertanto, rappresentano la loro esperienza. Tuttavia, non è facile paragonarla nel tempo o con la concorrenza. Le connessioni di rete e l'hardware degli smartphone si evolvono nel tempo e i diversi segmenti di pubblico di destinazione potrebbero utilizzare dispositivi diversi, rendendo difficile il confronto con i dati sul campo. Consulta anche Misurare il rendimento sul campo.

Per avere un quadro completo, sono necessarie entrambe le origini dati. Le seguenti sezioni mostrano come raccogliere dati di lab e campi per i diversi indicatori di rendimento pertinenti nella canalizzazione.

Discovery

Ottimizzare per la scoperta significa ottimizzare per il primo caricamento, ovvero ciò che riceveranno i nuovi utenti, ma anche i crawler della rete di ricerca e social. I dati di prova controllati per un primo caricamento possono essere facilmente acquisiti tramite Lighthouse, mentre i dati sul campo (almeno per Chrome) sono facilmente disponibili tramite i report sull'esperienza utente di Chrome. È possibile trovare una pratica combinazione di entrambi in PageSpeed Insights. Dovresti anche monitorare autonomamente le metriche pertinenti sul campo: la misurazione di queste metriche sui dispositivi di utenti reali offre una buona panoramica.

Dal punto di vista dell'utente, le metriche più importanti sono:

• First Contentful Paint (FCP): il tempo in cui l'utente fissa uno schermo vuoto. Questo è il momento in cui la maggior parte degli utenti rimbalza, perché non vede i progressi.
• First Meaningful Paint (FMP): quando l'utente inizia a vedere i contenuti principali che cerca. Spesso si tratta dell'immagine hero, ma per una pagina di destinazione può trattarsi anche di un invito all'azione come un pulsante Acquista, in quanto l'utente potrebbe essere arrivato con un'intenzione chiara, ad esempio tramite una campagna pubblicitaria mirata.
• First Input Delay (FID): il tempo necessario per far reagire il sito web al primo input dell'utente. Un eccessivo codice JavaScript e altri problemi di caricamento degli asset possono bloccarlo, causando tocchi o clic non riusciti, input errati e abbandono della pagina.

Puoi esaminare anche altre metriche, ma queste sono una buona base di riferimento. Inoltre, assicurati di acquisire frequenze di rimbalzo, conversioni e coinvolgimento degli utenti in modo da poterli mettere in relazione.

Coinvolgimento e conversione

Dopo il primo caricamento di una pagina di destinazione, l'utente procederà nel sito, si spera verso una conversione corretta.

In questa fase è importante avere navigazioni e interazioni veloci e reattive. Purtroppo non è banale misurare il flusso completo degli eventi di navigazione e interazione nel campo, poiché ogni utente segue percorsi diversi nella pagina. Consigliamo quindi di misurare il tempo necessario per i sottoobiettivi di conversione o conversione ("Tempo all'azione") mediante la creazione di script e la misurazione del flusso con un test di laboratorio, per confrontare le prestazioni nel tempo o con quelle della concorrenza.

Puoi farlo in due modi comodi:

WebPageTest

WebPageTest offre una soluzione di script molto flessibile. L'idea di base è:

• Indica a WebPageTest di navigare tra le pagine del flusso con il comando navigate.
• Se necessario, crea script per fare clic sui pulsanti tramite i comandi di clickAndWait e compilare i campi di testo tramite setValue. Per testare le applicazioni a pagina singola, utilizza i comandi clickAndWait anziché navigate per tutti i passaggi dopo il primo, poiché navigate eseguirà un caricamento completo anziché il caricamento leggero della pagina virtuale.
• Assicurati di combinare i diversi passaggi del flusso nell'analisi tramite combineSteps per generare un unico report sui risultati complessivi per l'intero flusso.

Uno script di questo tipo potrebbe avere il seguente aspetto:

combineSteps
navigate    https://www.store.google.com/landingpage
navigate    https://www.store.google.com/productpage
clickAndWait    innerText=Buy Now
navigate    https://www.store.google.com/basket
navigate    https://www.store.google.com/checkout

Grazie a uno script come questo, puoi facilmente misurare e confrontare il rendimento nel tempo. Ciò può anche essere automatizzato tramite l'API WebPageTest.

Burattinaio

Un'altra valida opzione per testare gli script è tramite Chrome headless, che può essere controllato tramite l'API Node Puppeteer. L'idea generale è avviare il browser tramite Puppeteer, accedere alla pagina di destinazione utilizzando la funzione goto, inserire codice JavaScript per compilare i campi o fare clic sui pulsanti e procedere nella canalizzazione attraverso ulteriori chiamate goto, se necessario.

Come metrica, la durata del flusso può essere misurata direttamente, ma puoi anche sommare i valori FCP, FMP o TTI dei singoli carichi del flusso. Testa le prestazioni del sito web con Puppeteer offre una panoramica su come ottenere le metriche sulle prestazioni tramite Puppeteer. Uno script di nodi di esempio molto semplificato potrebbe avere il seguente aspetto:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const start = performance.now();
  await page.goto('https://www.store.google.com/landingpage');
  await page.goto('https://www.store.google.com/productpage');
  // click the buy button, which triggers overlay basket
  await page.click('#buy_btn');
  // wait until basket overlay is shown
  await page.waitFor('#close_btn');
  await page.goto('https://www.store.google.com/basket');
  await page.goto('https://www.store.google.com/checkout');
  console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
  await browser.close();
})();

Questo script può essere facilmente automatizzato e persino incluso nel processo di compilazione o nell'esecuzione dei budget, ed essere monitorato regolarmente.

Ricoinvolgimento

Gli utenti torneranno sul tuo sito a intervalli di tempo diversi. A seconda del tempo trascorso, il browser potrebbe avere meno risorse del sito web memorizzate nella cache, il che necessita di più richieste di rete. Questo rende difficile stimare le differenze di prestazioni nelle visite ripetute nei test di laboratorio. Ti consigliamo comunque di tenere d'occhio questo aspetto. Un ottimo strumento di test di laboratorio per le visite ripetute è WebPageTest, che ha un'opzione dedicata per una visita ripetuta diretta:

Per capire meglio il rendimento delle visite ripetute sul campo, utilizza il pacchetto di analisi che preferisci per segmentare le metriche sul rendimento in base al tipo di utente. Di seguito è riportato un esempio di questo report in Google Analytics:

Un report di questo tipo indica i tempi di caricamento delle pagine anche per gli utenti nuovi e di ritorno.

Riepilogo

Questa guida ti ha mostrato come misurare il primo carico, il flusso e il carico ripetuto tramite test sul campo e di laboratorio. Assicurati di ottimizzare di conseguenza i diversi passaggi della canalizzazione per massimizzare la scoperta (primo caricamento), il coinvolgimento (navigazione e flusso) e il ricoinvolgimento (caricamento ripetuto).