In questo tutorial, ci concentreremo su come trovare e correggere i tempi di caricamento delle pagine con Raygun. Ma prima di farlo, discutiamo perché tempi di caricamento delle pagine leggermente più lunghi possono essere un grande problema.
Una delle cose più importanti che puoi fare per fare una buona impressione su potenziali clienti o clienti che visitano il tuo sito web è migliorare la sua velocità di caricamento.
Immagina un cliente che ha appena sentito parlare della tua azienda da un amico. Vendi un prodotto online che gli utenti possono acquistare visitando il tuo sito web. Se diverse pagine del sito web impiegano molto tempo per essere caricate e non stai vendendo quel prodotto esclusivamente, ci sono buone probabilità che il cliente abbandonerà il tuo sito e andrà da qualche altra parte.
Non ti sei perso la prima vendita qui, hai anche perso l'opportunità di avere un cliente fedele che avrebbe acquistato più prodotti in futuro.
Questa è la cosa con Internet: le persone sono solo a pochi clic dal lasciare il tuo sito web e comprare qualcosa dai tuoi concorrenti. Le pagine di caricamento più veloci possono darti un vantaggio rispetto alla concorrenza e aumentare le tue entrate.
Raygun si basa su Real User Monitoring Insights (RUM Insights) per migliorare le prestazioni di un sito Web e il tempo di caricamento della pagina. Il termine "monitoraggio utente reale" è la chiave qui. Potresti utilizzare strumenti come WebPagetest e Google Page Speed Insights per ottimizzare le singole pagine, ma tali risultati non si baseranno su dati reali dell'utente. D'altra parte, i dati forniti da Raygun si basano su utenti reali che hanno visitato il tuo sito web.
Raygun presenta anche le informazioni in un modo più organizzato dicendoti cose come la velocità media della pagina per il sito web, le pagine più richieste e le pagine più lente. In questo modo, puoi dare la priorità a quale pagina o sezione del sito web deve essere ottimizzata per prima.
Puoi anche vedere la velocità di caricamento del sito Web per gli utenti di Paesi diversi o per utenti con browser diversi. Allo stesso modo, puoi confrontare la velocità del tuo sito web su cellulare o desktop.
Un altro vantaggio di Raygun è che ti mostrerà come si sta comportando il sito Web per diversi utenti. Ad esempio, il sito potrebbe caricarsi lentamente per uno dei tuoi clienti più preziosi. In questi casi, vorresti sicuramente conoscerlo e fare qualcosa per migliorare la loro esperienza prima che sia troppo tardi.
Impareremo come fare tutto ciò con Raygun nelle prossime sezioni di questo articolo.
È necessario registrarsi per un account prima di integrare Raygun nel tuo sito web. Questo account ti darà accesso gratuito a tutte le funzionalità di Raygun per 14 giorni.
Dopo esserti registrato correttamente, puoi fare clic su Crea applicazione pulsante per creare una nuova applicazione. È possibile inserire un nome per la propria applicazione nella schermata successiva e quindi selezionare alcune caselle per ricevere notifiche sugli errori e informazioni dettagliate sul monitoraggio degli utenti.
Ora devi solo selezionare la tua piattaforma di sviluppo o il tuo framework. In questo caso, stiamo usando JavaScript.
Infine, riceverai del codice che dovrai aggiungere su tutte le pagine che vuoi monitorare. Invece di inserire il seguente codice nel tuo sito web, puoi anche scaricare la versione di produzione o sviluppo della libreria e includerla tu stesso.
Una volta aggiunto lo snippet di codice precedente prima della chiusura tag, devi inserire il seguente frammento prima della chiusura
etichetta.
Se non si aggiunge altro codice, Raygun inizierà a raccogliere dati anonimi. Ciò significa che sarai in grado di sapere come il tuo sito web sta funzionando per diversi utenti, ma non ci sarà modo di identificare quegli utenti.
C'è una soluzione semplice per questo problema. Tutto quello che devi fare è aggiungere il seguente codice nelle tue pagine web e Raygun si prenderà cura di tutto il resto.
rg4js ('setUser', identificatore: 'unique_id', isAnonymous: false, email: '[email protected]', firstName: 'Firstname', fullName: 'Firstname Lastname');
Dovrai includere questi tre pezzi di codice in tutte le pagine che desideri monitorare. Una volta terminato, i dati inizieranno a essere visualizzati nella dashboard per l'analisi.
La sezione Real User Monitoring nella dashboard di Raygun ha un sacco di schede per presentare i dati in diversi formati. Analizzeremo brevemente tutte queste schede per mostrarti come le informazioni presentate in esse possono essere utilizzate per trovare pagine con tempi di caricamento scadenti.
Il Vivere scheda ti darà una panoramica delle prestazioni del tuo sito in tempo reale. Ha diverse metriche come Punteggio di salute per mostrarti come sta attualmente eseguendo il sito. Puoi leggere ulteriori informazioni su tutte queste metriche nella documentazione per la scheda Live sul sito Web Raygun.
Ha anche una mappa del mondo per indicare i paesi dei tuoi utenti attualmente attivi. Troverai anche un elenco delle richieste più recenti al tuo sito web da parte di utenti diversi. Ecco un'immagine che mostra le richieste più recenti al nostro sito web.
La scheda delle prestazioni contiene cinque utili metriche per darti una rapida panoramica dei tempi di caricamento della pagina del sito web. Ad esempio, un tempo di caricamento medio di 1,41 secondi significa che il 50% delle pagine viene caricato prima di 1,41 secondi. Allo stesso modo, a Tempo di caricamento P90 di 6,78 secondi ti dice che il 90% delle volte il sito carica prima di 6,48 secondi.
Questo dovrebbe darti un'idea approssimativa delle prestazioni di un sito web e quanto è lento per il 10% più lento degli utenti.
La scheda delle prestazioni contiene anche un elenco delle pagine più lente e più richieste in basso. Conoscere le pagine più popolari e più lente può essere di grande aiuto quando si desidera stabilire la priorità di quali sezioni del proprio sito web devono essere corrette per prime.
Anche se tutte le pagine di un sito web devono essere caricate il più rapidamente possibile, alcune di queste pagine sono più importanti di altre. Pertanto, potresti essere interessato a scoprire le prestazioni di una determinata pagina su un sito web. Puoi farlo semplicemente digitando la pagina che stai cercando nel campo di inserimento. Ciò fornirà informazioni sul tempo di caricamento medio, medio e P90 di una determinata pagina. Ecco i dati per la home page del nostro sito web.
Puoi usare il sessioni scheda per visualizzare le informazioni relative alla sessione come il numero totale di sessioni, il numero totale di utenti e la durata della sessione mediana. La tabella delle sessioni ti fornirà una rapida panoramica delle ultime 150 sessioni con informazioni come il paese, la durata, le visualizzazioni totali della pagina e l'ultima pagina visitata per una sessione.
Facendo clic sulla lente di ingrandimento verranno visualizzati ulteriori dettagli di una sessione particolare come le pagine visitate dall'utente, il tempo di caricamento di tali pagine e il browser / dispositivo utilizzato durante la sessione.
Il utenti scheda ti darà una panoramica del livello di soddisfazione dei diversi utenti con il tuo sito web. Questo può essere molto utile quando vuoi vedere come un determinato utente sta interagendo con il tuo sito web e se o perché il tempo di caricamento della pagina è più del previsto.
Ci sono altre tre schede per mostrare informazioni su tutte le visualizzazioni di pagina in termini di browser, piattaforme e geografia. In questo modo sarai in grado di sapere se una pagina web si sta caricando lentamente solo su un particolare browser o piattaforma. Avrai anche un'idea approssimativa della distribuzione degli utenti. Ad esempio, sapere se la maggior parte dei tuoi clienti proviene da un determinato paese o utilizzare un particolare browser può essere molto utile.
Raygun elenca la percentuale di visitatori da un determinato continente nella parte superiore del Geo scheda. Successivamente, fornisce una mappa con la distribuzione dei tempi di caricamento. I paesi con i tempi di caricamento più lenti sono pieni di rosso e i paesi con tempi di caricamento rapidi sono pieni di verde.
Se si ottengono costantemente tempi di caricamento scadenti da un determinato paese, potrebbe valere la pena dedicare tempo per guardare da vicino e scoprire il motivo.
Nella sezione precedente, abbiamo imparato come utilizzare tutti i dati raccolti da Raygun per capire quali pagine impiegano molto tempo a caricarsi o se ci sono paesi in cui i tempi di caricamento della pagina sono più lunghi del solito.
Ora è tempo di vedere come possiamo usare Raygun per scoprire problemi che potrebbero causare una pagina in particolare o il caricamento dell'intero sito web più lentamente del solito.
Migliorare il tempo di caricamento delle pagine povere di un sito Web può essere piuttosto travolgente, soprattutto se il sito Web è molto complicato o se contiene molte pagine. Il problema è nel trovare cosa migliorare e da dove cominciare.
Fortunatamente, Raygun può offrirti alcune informazioni generali per correggere il tuo sito web. Puoi cliccare sul Approfondimenti opzioni sotto il Monitoraggio degli utenti reali menu e Raygun eseguirà la scansione del tuo sito Web per eventuali problemi. Puoi trovare un elenco di tutte queste regole nella documentazione ufficiale di Raygun. La risoluzione di tutti i problemi elencati accelera notevolmente il tuo sito web.
Oltre a seguire queste linee guida generali, potresti anche voler isolare le pagine che sono state caricate lentamente. Una volta che li hai isolati, Raygun può mostrarti il tempo che impiegano per risolvere DNS, latenza, handshake SSL, ecc. Ciò ti darà una buona idea delle aree in cui puoi apportare miglioramenti per ridurre il tempo di caricamento della pagina. La seguente immagine dovrebbe chiarire.
È inoltre possibile filtrare i dati per ottenere un'immagine più accurata del tempo di caricamento per una determinata pagina e vari fattori che la influenzano. L'immagine sopra mostra la latenza media per tutte le richieste fatte alla pagina "Chi siamo". Tuttavia, è possibile fare clic sul Aggiungi filtro in alto e vedi solo il grafico del tempo di caricamento "Chi siamo" per un paese specifico come l'Italia.
Vedrai anche tutte le richieste fatte da una pagina specifica in basso. Fondamentalmente, sarai in grado di vedere il DNS, la latenza, SSL, server e tempo di trasferimento per ogni risorsa caricata per una pagina specifica e vedere se qualcuno di loro è il colpevole.
Una volta individuate le risorse che impiegano troppo tempo per essere caricate, è possibile iniziare a ottimizzare le pagine.
Come hai visto in questo tutorial, Raygun può essere di grande aiuto per le organizzazioni che cercano di migliorare i tempi di caricamento della pagina. È super facile da integrare e, una volta completata l'integrazione, i dati inizieranno semplicemente a essere visualizzati nella dashboard senza alcun intervento da parte dell'utente.
Raygun ha anche diverse schede per organizzare i dati raccolti in modo da poterli analizzare in modo più semplice ed efficiente. Ad esempio, può mostrare tempi di caricamento per diversi paesi, browser e piattaforme. Dispone inoltre di filtri che è possibile utilizzare per isolare un particolare insieme di dati dal resto e analizzarli da vicino.
Se tu o la tua azienda siete alla ricerca di uno strumento di facile integrazione che possa fornire grandi informazioni su come i vostri utenti reali interagiscono con il vostro sito Web, dovete assolutamente provare Raygun. Non hai nulla da perdere dato che è gratuito per i primi 14 giorni!
E mentre sei qui, dai un'occhiata ad alcuni dei nostri altri tutorial su Raygun!