Tempo di Lettura stimato: 6 minuti

Migliorare la velocità del tuo sito di e-commerce dovrebbe essere una priorità per il 2020.
Mentre i miglioramenti delle prestazioni possono richiedere molto tempo e denaro, ci sono soluzioni rapide che fanno la differenza.

La velocità della pagina è importante, soprattutto perché il team di Google Chrome sta pianificando di penalizzare i siti a caricamento lento quest’anno, come descritto a novembre 2019 sul suo blog Chromium:

In futuro, Chrome potrebbe identificare i siti che in genere si caricano velocemente o lentamente per gli utenti con badge chiaro. Questo può assumere una serie di forme e prevediamo di sperimentare diverse opzioni, per determinare quale fornisce il massimo valore ai nostri utenti.

Il badge ha lo scopo di identificare quando i siti sono creati in un modo che li rallenta in generale, osservando le latenze di carico storiche.
Più avanti, potremmo estenderlo per includere l’identificazione quando è probabile che una pagina sia lenta per un utente in base al dispositivo e alle condizioni della rete.

Negli articoli precedenti ho affrontato idee per migliorare le prestazioni, come la memorizzazione nella cache HTML, l’installazione di Memcached.
In questo post, spiegherò come determinare le pagine più lente e come applicare una semplice correzione per accelerarle.

Google Analytics riporta le pagine più lente su un sito e come gli utenti arrivano a loro.
Possiamo istruire i browser Web a “precaricare” tali pagine in modo che quando gli utenti fanno clic su di esse, si caricano molto velocemente.

Ecco il processo.

Pagine lente
In Google Analytics, vai su Comportamento> Velocità del sito> Tempi di pagina.
Seleziona la vista dati (griglia) e ordina le colonne in base a “Media. Tempo di caricamento della pagina. ”

Per visualizzare le pagine a caricamento lento in Google Analytics, vai a Comportamento> Velocità del sito> Tempi di pagina.
Per visualizzare le pagine a caricamento lento in Google Analytics, vai a Comportamento> Velocità del sito> Tempi di pagina . Clicca sull’immagine per ingrandirla.

Questo mostrerà prima le pagine più lente. L’ultima colonna, “Valore pagina”, normalizza le entrate attribuite a ciascuna pagina supponendo che sia abilitato l’e -commerce avanzato . È una buona metrica per i commercianti dare la priorità alle pagine su cui concentrarsi.

Leggi Anche  Come dotare i tuoi siti di certificato SSL gratuito in 5 minuti con CERTBOT

Successivamente, dobbiamo conoscere il percorso interno che conduce i visitatori alle pagine più lente.
Creeremo un rapporto personalizzato per questo.
Innanzitutto, osserviamo i percorsi utente tipici in Comportamento> Flusso di comportamento .

Qui possiamo vedere i percorsi più popolari dei visitatori. (Il rapporto può anche aiutare a capire quali pagine producono i maggiori drop-off dei visitatori.)


Vai a Comportamento> Flusso di comportamento per visualizzare i percorsi utente tipici. Clicca sull’immagine per ingrandirla.

Per creare il rapporto personalizzato, vai a Personalizzazione> Rapporti personalizzati> Nuovo rapporto personalizzato. Assegna un titolo al rapporto – Ho usato “Percorsi di pagina lenti” nello screenshot qui sotto – e seleziona come Dimensioni “Percorso di pagina precedente”, “Pagina” e “Pagina di uscita”. Per le metriche, seleziona “Valore di pagina” e “Avg. Tempo di caricamento della pagina. ”

Crea il rapporto personalizzato in Personalizzazione> Rapporti personalizzati> Nuovo rapporto personalizzato. Clicca sull’immagine per ingrandirla.

Riceviamo un rapporto come quello sopra (in Comportamento> Velocità del sito> Tempi di pagina) , ma questo include la pagina precedente in una sessione utente tipica.

Il rapporto personalizzato in Google Analytics include la pagina precedente in una sessione utente tipica. Clicca sull’immagine per ingrandirla.

Il prossimo passo è applicare un concetto potente: i suggerimenti del browser web.

Suggerimenti per il browser Web
I “suggerimenti” sono istruzioni per i browser Web per caricare anticipatamente risorse e collegamenti alle pagine.
Il processo migliora notevolmente la velocità della pagina.
Non tutti i browser supportano ogni suggerimento.
Tre dei più popolari sono “precaricamento”, “prefetching” e “prerendering”.

Il precaricamento richiede il codice nell’HEAD del documento HTML, ad esempio:

<link rel = "preload" as = "font" crossorigin = "crossorigin" type = "font / woff2" href = "myfont.woff2">

Il suggerimento per il precaricamento è una direttiva che impone al browser di scaricare una risorsa prima di farla apparire nel documento.
Un buon esempio è un font nei file CSS nascosti.
Invece di far scaricare ed elaborare i file CSS e quindi i caratteri dal browser, la direttiva di precaricamento scarica il carattere in background, rendendolo disponibile quando è necessario.

Leggi Anche  16+ Tools gratuiti (e premium) per far crescere il tuo canale Youtube 2020

Il precaricamento richiede un codice nell’HEAD del documento HTML, in questo modo:

<link rel = "prefetch" href = "page-2.html">

Questo suggerimento consente al browser Web di recuperare risorse che potrebbero essere necessarie quando l’utente esegue l’azione successiva.
Il browser lo farà solo dopo aver eseguito il rendering della pagina corrente, purché vi sia larghezza di banda sufficiente.

Il prerendering era una potente direttiva, ma ora è deprecato. Ha consentito il prefetching delle risorse su una pagina di destinazione e, inoltre, il rendering.
Richiedeva un codice come questo nell’HEAD del documento HTML:
<blockquote><link rel = "prerender" href = "slow-page.html">

Il prerendering diventa troppo dispendioso in termini di risorse quando, ad esempio, Chrome incontra un suggerimento di prerendering su una pagina ed esegue un ” Prefetch senza stato “, che è simile ma non esegue JavaScript o il rendering correlato.

Previsione rapida della sequenza

Possiamo inserire manualmente un suggerimento per chiedere al browser di precaricare le pagine imminenti più lente.
Sappiamo quali pagine inserire questo link dai dati di Google Analytics, descritti sopra.

Il mio rapporto di esempio, tuttavia, ha identificato circa 20.000 sequenze potenziali.
Inserire i suggerimenti in tutti loro richiederebbe un sacco di tempo!

Invece possiamo costruire un modello usando la pagina precedente e la pagina corrente che prevede la pagina successiva su cui è probabile che l’utente faccia clic.
Quindi possiamo pre-caricarlo.

Un metodo rapido e semplice è un albero predittivo compatto , un concetto sviluppato da tre professori di informatica.
Dal loro documento:

Dato un insieme di sequenze di allenamento, il problema della previsione della sequenza consiste nel trovare il prossimo elemento di una sequenza bersaglio osservando solo i suoi elementi precedenti. Il numero di applicazioni associate a questo problema è ampio. Include applicazioni come il prefetching delle pagine Web, i consigli sui prodotti di consumo, le previsioni meteorologiche e la previsione del mercato azionario.

Per implementare, userò JavaScript da un repository Github .

Leggi Anche  [Compravenita blog] Come ho venduto un blog per 20.000 euro in 8 mesi

È relativamente facile Inserisci i dati di allenamento, specifica un obiettivo per la previsione e recupera le partite migliori.

Un esempio di dati di formazione dal nostro rapporto personalizzato di Google Analytics sarebbe simile a:

let data = [
['/ previous-page1', '/ current-page1', '/ next-slow-page1'],
['/ previous-page2', '/ current-page2', '/ next-slow-page2'],
['/ previous-page3', '/ current-page3', '/ next-slow-page1'],
['/ previous-page4', '/ current-page1', '/ next-slow-page2'],
['/ previous-page2', '/ current-page3', '/ next-slow-page3'],
['/ previous-page3', '/ current-page2', '/ next-slow-page4'],
['/ previous-page4', '/ current-page1', '/ next-slow-page1'],
]

Ed ecco come testare una pagina di destinazione:

let target = [
['/ previous-page2', '/ current-page3']
];

E infine, una previsione sarebbe:


console.log (pronostici) // [['/ next-slow-page3]']

Mettendolo insieme

Per semplificare le cose, dovremmo includere un file JavaScript in tutte le pagine (o le pagine che portano a quelle che vogliamo migliorare).
Lo script otterrebbe il percorso del referrer della pagina corrente, il percorso dell’URL corrente e predirebbe la pagina successiva su cui l’utente ha maggiori probabilità di fare clic.

Quindi inseriamo semplicemente uno o più suggerimenti del browser con le previsioni.

link rel = "prefetch" href = "/ next-slow-page3

Ecco tutto lo script

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<script src=”index.js”></script>

<script>
let model = new CPT();

// GET This data from Google Analytics
let data = [
[‘/previous-page1’, ‘/current-page1’, ‘/next-slow-page1’],
[‘/previous-page2’, ‘/current-page2’, ‘/next-slow-page2’],
[‘/previous-page3’, ‘/current-page3’, ‘/next-slow-page1’],
[‘/previous-page4’, ‘/current-page1’, ‘/next-slow-page2’],
[‘/previous-page2’, ‘/current-page3’, ‘/next-slow-page3’],
[‘/previous-page3’, ‘/current-page2’, ‘/next-slow-page4’],
[‘/previous-page4’, ‘/current-page1’, ‘/next-slow-page1’],
];

model.train(
data // Training Data
);

// replace place holder values for commented lines to test with real data
let previous_page = ‘/previous-page2’;//document.referrer.replace(/^[^:]+:\/\/[^/]+/, ”).replace(/#.*/, ”);
let current_page = ‘/current-page3’;//document.location.pathname;

let target = [
[previous_page, current_page]
];

let predictions = model.predict(
target, // Test input
2, // The number of last elements that will be used
// to find similar sequences, (default: target.length)
1 // The number of predictions required.
);

//This part inserts the browser hint dynamically based on the next page predicted
document.write(`<link rel=”prefetch” href=”${predictions}”>`)

console.log(predictions)
</script>
</head>
<body>

Testing Prefetch

</body>
</html>