Home Blogs Ridurre i tassi di rimbalzo e migliorare l’esperienza del sito con il Predictive Prefetching di Edgio
Applications

Ridurre i tassi di rimbalzo e migliorare l’esperienza del sito con il Predictive Prefetching di Edgio

About The Author

Outline

Transizioni istantanee: Come estendere la cache Edge nel browser con Predictive Prefetching

È risaputo che i ritardi di navigazione diminuiscono la conversione e aumentano i tassi di rimbalzo. Per quelli di voi che gestiscono e monitorano la conversione su siti con molto traffico, probabilmente avete visto questo scenario giocare. Speriamo che tu abbia anche visto l’inverso. Hai visto aumentare la conversione quando la navigazione e i tempi di caricamento della pagina migliorano.

Prestazioni e conversione vanno di pari passo.

Le aziende CDN spesso utilizzano questa illustrazione come esempio per dimostrare il ROI dei loro servizi. La soluzione è semplice. Ottenete contenuti statici il più vicino possibile ai vostri utenti per velocizzare la distribuzione e l’investimento è positivo sul ROI. I visitatori resteranno in giro più a lungo, faranno più acquisti e ritorneranno più spesso. Ha senso, vero? Se stai leggendo questo probabilmente sai già che è vero. Ma cosa succede dopo? Possiamo fare un passo avanti e eliminare completamente i tempi di risposta della rete dall’esperienza Web e renderla simile a un’app nativa? Se riuscissimo a ridurre il ritardo a zero, non massimizzeremmo la conversione? Se riusciamo a memorizzare nella cache i contenuti edge nel browser prima che l’utente faccia clic, le transizioni potrebbero essere istantanee, in modo simile a un’app nativa.

“Possiamo davvero avere prestazioni delle applicazioni web simili alle app native per i visitatori del nostro sito?”

Con Edgio, puoi.

Iniziamo dando un’occhiata a ciò che rende fantastiche le applicazioni mobili native. La maggior parte degli utenti di app mobili non sa cosa sta succedendo dietro le quinte, ma apprezzano certamente i miglioramenti delle prestazioni ottenuti scaricando e installando applicazioni sui loro dispositivi. È semplice, carica l’app, naviga tra le schermate e le transizioni sono istantanee. Passa da una cosa all’altra, aggiungi un articolo al carrello e goditi un’esperienza senza problemi. Raramente l’utente vede un indicatore di “caricamento” e, quando lo fa, ha senso; come l’invio di informazioni di pagamento durante il checkout. Tutto è possibile con uno sviluppo intelligente e una piattaforma capace.

Immettere Predictive Prefetching by Edgio (Predictive Prefetching by Edgio). Ora i vostri utenti Web possono usufruire dello stesso tipo di esperienza.

Molte aziende CDN offrono opzioni di riscaldamento della cache che chiamano “pre-caricamento” per aiutare a portare i contenuti dalla tua origine alla periferia della rete. Un grande primo passo, ma non ti porta fin lì. L’utente deve ancora attendere mentre il contenuto si sposta sul proprio dispositivo. Quindi come facciamo a fare un passo avanti? Dall’origine al bordo e fino al browser prima di fare clic, il precaricamento di Edgio è un’integrazione del browser che porta il bordo direttamente nel dispositivo. Qualcosa di tradizionale CDN non sono in grado di.

“Beh, sembra una magia, come funziona?”

Ottima domanda e comprendiamo perfettamente il suo scetticismo. Per capire come funziona, dobbiamo iniziare dalle basi. Guardate questo rapido spiegatore qui sotto, poi diamo un’occhiata a cosa il prefetching è al suo centro.

Che cosa è il precaricamento … davvero?

Diamo un’occhiata a MDN per una definizione di precaricamento mentre il browser lo capisce. Il pre-caricamento dei collegamenti è un suggerimento per l’agente utente che dovrebbe scaricare una risorsa che potrebbe essere necessaria in un secondo momento quando le risorse saranno disponibili. Innanzitutto, la pagina viene caricata e viene avviata l’elaborazione delle richieste asincrone. Quando la rete e la CPU si liberano, il browser acquisirà le risorse aggiuntive che hai aggiunto al documento. Per il pre-caricamento di base, come il browser lo capisce, può sembrare qualcosa come questo:

				
					<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
				
			

Il risultato netto è che next-page.html e next-image.jpg verranno scaricati e memorizzati nella cache dal browser mentre l’utente interagisce con la pagina originale. Se fanno clic, avranno lo scheletro della pagina successiva e un’immagine aggiuntiva già memorizzata nella cache locale che apparirà immediatamente. Certo, potrebbe essere necessario scaricare altri CSS, JS e altre risorse, ma abbiamo portato i pezzi più critici del viaggio nel browser prima che sia necessario. Questo è un ottimo inizio e come si può dire dall’esempio funziona davvero bene per un piccolo caso d’uso. Siti di viaggio sequenziali, forse una landing page o due ma quello che probabilmente stai pensando è questo…

“Il mio sito ha migliaia di immagini e pagine, in nessun modo posso farlo.

Non possiamo forse collegare ogni immagine e pagina nella testa di tutte le nostre pagine giusto?”

No, e non devi. Utilizzando i plug-in Predictive Prefetching e Deep Fetching di Edgio , è possibile evitare le congetture e la progettazione mentre il browser dell’utente funziona con la nostra rete edge per estrarre risorse critiche.

OK, allora come facciamo?

Il Predictive Prefetching di Edgio utilizza qualcosa chiamato service worker. Un SW è qualcosa che tutti i browser moderni capiscono, è stato effettivamente supportato da Chrome 40. Il software è un processo in background legato al sito che funziona quando le richieste primarie sono inattive. Potresti essere stato esposto a lavoratori di servizi se hai mai lavorato nello sviluppo front-end o in applicazioni web più moderne e progressive. Se non stai utilizzando un service-worker sul tuo sito ora, puoi facilmente aggiungerne uno senza alcun impatto sulla tua attuale esperienza utente. Edgio può aiutarti a configurarne uno con facilità con uno dei nostri addetti all’assistenza preconfigurati.

La registrazione e l’installazione di un service worker possono variare a seconda che si utilizzi o meno un framework front-end. Consultate la nostra documentazione per trovare istruzioni più dettagliate su diversi metodi.

Ora che hai aggiunto un service-worker e si sta registrando con il tuo sito, ha bisogno di qualcosa da fare. Dopo aver aggiunto il pacchetto Edgio Prefetch, è il momento di aggiungere i nostri percorsi per mettere il browser dell’utente al lavoro. Per impostazione predefinita, la cache del service worker viene memorizzata per due minuti. Per ottimizzare le prestazioni, è possibile regolare tale impostazione nel file dei percorsi:

				
					import {Router} from '@edgio/core';

export default new Router()
  .get('/api/products/:id.json', ({cache, proxy}) => {
    cache({
      edge: {
        maxAgeSeconds: 60 * 60,
        staleWhileRevalidateSeconds: 60 * 60 * 24,
      },
      browser: {
        serviceWorkerSeconds: 60 * 60,
      },
    });
  });
				
			

Con una semplice regola, abbiamo configurato l’Edge per mantenere la freschezza della risposta della nostra API convalidandola per ventiquattro ore e istruendo il browser non solo a precaricarla ma ad attaccarla per un’ora.

Se hai familiarità con Edgio sai che puoi testarlo localmente. Aprite gli strumenti per gli sviluppatori del browser e osservate la scheda rete mentre esaminate il sito. Durante la navigazione, il tecnico del servizio preleva il codice HTML non elaborato per i collegamenti nel file di percorsi. “Notare l’icona dell’ingranaggio distintivo e “addetto all’assistenza” indicati come iniziatore.”

È inoltre possibile visualizzare separatamente la cache del lavoratore di servizio controllando la scheda applicazione e controllando la cache.

Lo script di precaricamento di Edgio consente di inserire i collegamenti nella vista dell’utente per farli clic. Se fanno clic, saranno immediatamente portati alla pagina successiva.

Un ottimo inizio, ma cosa succede se si dispone di un sito ricco di contenuti con immagini di prodotti o articoli che devono essere recuperate anche? Poi è il momento del plugin Deep Fetch di Edgio, unico nel suo genere.

Abilitare il plugin Deep Fetch è facile. Basta importare il plugin nel progetto esistente e scegliere alcuni selettori HTML che il plugin dovrebbe cercare. Se si sta gestendo un sito di e-commerce, è probabile che le pagine dei prodotti siano modellate. Il tuo LCP potrebbe avere un aspetto simile a questo: In cui ogni pagina ha un’immagine diversa, ma usi il selettore CSS “immagine principale” per mantenere lo stile nel tuo sito.

				
					<img src=”/images/product-image.jpg” class=”main-image” />
				
			

“Provare ad aggiungere il selettore “immagine principale” all’array Deep Fetch e lasciare che l’addetto all’assistenza lavori lavori.”

				
					import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';

new Prefetcher({
  plugins: [
    new DeepFetchPlugin([
      {
        selector: 'img.main-image',
        maxMatches: 1,
        attribute: 'src',
        as: 'image',
      },
    ]),
  ],
});
				
			

In breve, questo indica al plugin Deep Fetch di cercare il selettore Main-Mage e precaricare src come immagine. Nell’esempio, abbiamo impostato maxMatches su 1. Il che significa che precariceremo solo la prima partita. Non c’è bisogno di fermarsi qui, però. Regolate maxMatches come ritenete opportuno, in base al tipo di risorsa che state caricando in anticipo.

A questo punto, il personale dell’assistenza precarica i collegamenti nella vista, esegue la scansione del codice HTML per quel selettore e aggiunge un collegamento di precaricamento per l’immagine in questione. Quando l’utente fa clic sull’immagine, la pagina viene visualizzata immediatamente.

“E la nostra origine? Non possiamo sostenere un aumento del traffico per ogni utente.”

Edgio ti ha coperto. Il nostro WebCDN di prossima generazione non passerà le richieste di pre-caricamento alla tua origine se la risorsa non è memorizzata nella cache. Edgio risponderà semplicemente con un 412. Se l’utente fa clic sul collegamento non memorizzato nella cache, lo trasferiremo all’origine come faremmo per qualsiasi altra richiesta e rispetteremo le regole proxy che avete in essere. State certi che la vostra origine è sicura con Edgio. Il traffico naturale all’interno del sito scalderà la cache e le risposte 412 diminuiranno. Per mantenere il tuo sito aggiornato, assicurati di utilizzare la convalida obsoleta durante la riconvalida, in modo che possiamo consegnare un articolo obsoleto mentre ne cerchiamo uno nuovo.

Vuoi vedere tutto questo in azione senza dover scavare attraverso gli strumenti di sviluppo di Chrome? Edgio può aiutare anche lì. Abbiamo visto quanto sia prezioso il prefetching predittivo per i nostri clienti, quindi abbiamo una dashboard appositamente creata proprio all’interno della console Edgio. Monitora facilmente le prestazioni di precaricamento sia per la richiesta di pre-caricamento che per il rapporto di hit.

Ci auguriamo che ora capiate come il Predictive Prefetching di Edgio possa offrire ai vostri utenti un’esperienza digitale davvero incredibile, aumentare le conversioni e ridurre la velocità di rimbalzo portando la cache edge fino in fondo all’utente.