Transizioni istantanee: Come estendere la cache Edge nel browser con Predictive Prefetching (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 un sacco di traffico, probabilmente avete visto questo scenario verificarsi. Speriamo che tu abbia anche visto l’inverso. Hai visto aumentare la conversione quando i tempi di navigazione e caricamento delle pagine migliorano.
Prestazioni e conversione vanno di pari passo.
Le aziende CDN spesso utilizzano questa illustrazione come esempio per dimostrare il ROI per i propri servizi. La soluzione è semplice. Ottenete contenuti statici il più vicino possibile agli utenti per velocizzare la distribuzione e l’investimento è positivo per il ROI. I visitatori resteranno più a lungo, effettueranno più acquisti e ritorneranno più spesso. Ha senso, vero? Se stai leggendo questo allora probabilmente sai già che è vero. Ma cosa succederà dopo? Possiamo fare un ulteriore passo avanti ed 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, simili a quelle di 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 grandi le applicazioni mobili native. La maggior parte degli utenti di app mobili non sa cosa sta accadendo dietro le quinte, ma certamente apprezzano 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 intoppi. Raramente l’utente vede un indicatore di “caricamento” e, quando lo fa, ha senso, come inviare informazioni di pagamento durante il checkout. Tutto è possibile con uno sviluppo intelligente e una piattaforma capace.
Accedere a 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 “precaricamento” per aiutare a trasferire i contenuti dall’origine all’edge.” Un grande primo passo, ma non ti porta fin lì. L’utente deve ancora attendere che il contenuto si sposti sul proprio dispositivo. Come facciamo a fare un passo avanti? Dall’origine al bordo e fino al browser prima che facciano clic, il pre-caricamento di Edgio è un’integrazione del browser che porta l’edge direttamente nel dispositivo. Qualcosa di cui i CDN tradizionali non sono capaci.
“Beh, sembra una magia, come funziona?”
Ottima domanda e comprendiamo perfettamente il suo scetticismo. Per capire come funziona, dobbiamo iniziare dalle basi. Guarda questo breve spiegatore qui sotto, quindi diamo un’occhiata a ciò che il precaricamento è al suo centro.
Cos’è il pre-caricamento… davvero?
Esaminiamo MDN per una definizione di precaricamento quando il tuo browser lo capisce. Il pre-caricamento dei collegamenti suggerisce all’agente utente di scaricare una risorsa che potrebbe essere necessaria in un secondo momento quando le risorse si liberano. Innanzitutto, la pagina viene caricata e viene avviata l’elaborazione delle richieste asincrone. Quando la rete e la CPU si liberano, il browser raccoglierà le risorse aggiuntive che hai aggiunto al documento. Per il pre-caricamento di base, come il browser lo capisce, può apparire un po’ 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, potrebbero essere necessari ulteriori CSS, JS e altre risorse, ma abbiamo portato le parti più critiche del percorso nel browser prima che sia necessario. Questo è un ottimo inizio e come puoi vedere dall’esempio funziona davvero bene per un piccolo caso d’uso. Siti di viaggio sequenziale, forse una pagina di destinazione o due, ma quello che probabilmente stai pensando è questo…
“Il mio sito ha migliaia di immagini e pagine, non posso farlo in alcun modo.
Non possiamo collegare ogni immagine e pagina nella testa di tutte le nostre pagine giusto?”
No, e non devi farlo. Utilizzando i plugin Predictive Prefetching e Deep Fetching di Edgio, è possibile evitare la progettazione e le congetture mentre il browser dell’utente funziona con la nostra rete perimetrale per ottenere risorse critiche.
OK, allora come facciamo?
Il Predictive Prefetching di Edgio utilizza qualcosa chiamato service-worker. Un software è qualcosa che tutti i browser moderni comprendono, è in realtà 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 ai lavoratori dei servizi se hai mai lavorato nello sviluppo front-end o nelle 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 facilmente uno 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. Consulta 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 far funzionare il browser dell’utente. Per impostazione predefinita, la cache del service worker viene memorizzata per due minuti. Per ottimizzare le prestazioni, possiamo modificare questo valore 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 Edge in modo da mantenere la freschezza della risposta della nostra API convalidandola per ventiquattro ore e abbiamo chiesto al browser di non solo precaricarla, ma di agganciarla per un’ora.
Se hai familiarità con Edgio sai che puoi testarlo localmente. Aprire gli strumenti per sviluppatori del browser e osservare la scheda rete mentre si visita il sito. Vedrete il service-worker afferrare l’HTML grezzo per i collegamenti nel vostro file Route mentre navighi. “Notare l’icona distintiva dell’ingranaggio e il “service worker” indicati come iniziatore.”
È inoltre possibile visualizzare separatamente la cache di Service worker selezionando la scheda applicazione e controllando la cache.
Lo script di precaricamento Edgio consente di inserire i collegamenti nella vista dell’utente per consentirgli di fare clic su di essi. Se fanno clic, saranno immediatamente portati alla pagina successiva.
Un ottimo punto di partenza, ma cosa succede se si dispone di un sito con contenuti pesanti con immagini di prodotti o articoli che devono essere scaricati anche? Allora è il momento per il plugin Deep Fetch unico nel suo genere di Edgio.
Abilitare il plugin Deep Fetch è facile. È sufficiente importare il plug-in nel progetto esistente e scegliere alcuni selettori HTML che il plug-in dovrebbe cercare. Se si utilizza un sito di e-commerce, è probabile che le pagine dei prodotti siano modellate. “L’LCP potrebbe avere un aspetto simile a questo: Ogni pagina ha un’immagine diversa, ma si utilizza il selettore CSS “immagine principale” per mantenere lo stile in tutto il sito.”
<img src=”/images/product-image.jpg” class=”main-image” />
“Provare ad aggiungere il selettore “immagine principale” all’array Deep Fetch e lasciare che il service worker vada al lavoro.”
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 l’src come immagine. Nell’esempio, abbiamo impostato maxMatches su 1. Il che significa che precariceremo solo la prima partita. Ma non c’è bisogno di fermarsi qui. Regolare le corrispondenze massime come si ritiene opportuno a seconda del tipo di risorsa che si sta precaricando.
A questo punto, l’addetto al servizio di assistenza eseguirà il pre-caricamento dei collegamenti nella vista, eseguirà la scansione del selettore HTML e aggiungerà un collegamento di pre-caricamento 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à richieste di pre-etch 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 passeremo all’origine come farebbe per qualsiasi altra richiesta e rispetteremo le regole proxy in vigore. State certi che la vostra origine e’ al sicuro con Edgio. Il traffico naturale all’interno del sito riscalderà la cache e le risposte 412 diminuiranno. Per mantenere il vostro sito sempre in ordine, assicuratevi di utilizzare la riconvalida obsoleta, in modo da poter consegnare un articolo obsoleto mentre ne cerchiamo uno nuovo.
Vuoi vedere tutto questo in azione senza dover scavare attraverso gli strumenti per sviluppatori di Chrome? Anche Edgio può aiutare lì. Abbiamo visto quanto sia prezioso il precaricamento predittivo per i nostri clienti, per cui abbiamo un dashboard appositamente costruito all’interno della console Edgio. Monitorare facilmente le prestazioni di precaricamento sia per la richiesta di precaricamento che per il rapporto di hit.
Si spera che ora scopriate come il Predictive Prefetching di Edgio può offrire ai vostri utenti un’esperienza digitale davvero incredibile, aumentare le conversioni e diminuire i tassi di rimbalzo portando la cache edge a tutto vantaggio dell’utente.
