Il precaricamento delle risorse velocizza i tempi di caricamento delle pagine e migliora le metriche aziendali.
Il precaricamento è una tecnica utilizzata per velocizzare il caricamento delle pagine scaricando risorse (o anche intere pagine) che probabilmente verranno utilizzate nel prossimo futuro. Gli studi hanno dimostrato che tempi di caricamento più rapidi generano tassi di conversione più elevati e migliori esperienze utente.
Terra è uno dei maggiori portali di contenuti del Brasile e offre intrattenimento, notizie e sport con oltre 63 milioni di visitatori unici al mese. Abbiamo collaborato con il team tecnico di Terra per migliorare il tempo di caricamento degli articoli utilizzando tecniche di precaricamento su alcune sezioni del sito web.
Questo case study descrive l'implementazione del percorso di Terra che ha portato a un aumento dell'11% della percentuale di clic (CTR) sugli annunci sui dispositivi mobili, del 30% del CTR degli annunci sui computer e del 50% in termini di Largest Contentful Paint (LCP).
Strategia di precaricamento
Il precaricamento esiste da un po' di tempo, ma è importante utilizzarlo con attenzione poiché consuma larghezza di banda aggiuntiva per risorse non immediatamente necessarie. Questa tecnica deve essere applicata in modo ponderato per evitare un utilizzo non necessario dei dati. Nel caso di Terra, gli articoli vengono precaricati se vengono soddisfatte le seguenti condizioni:
- Visibilità dei link agli articoli precaricati: Terra ha utilizzato l'API Intersection Observationr per rilevare la visibilità della sezione contenente gli articoli che voleva precaricare.
- Condizioni favorevoli per un maggiore utilizzo dei dati:come accennato in precedenza, il precaricamento è un miglioramento delle prestazioni speculativo che consuma dati aggiuntivi, che potrebbe non essere un risultato auspicabile in tutte le situazioni. Per ridurre le probabilità di spreco di larghezza di banda, Terra utilizza l'API Network Information e l'API Device Memory per determinare se recuperare l'articolo successivo. Terra recupera l'articolo successivo solo quando:
- La velocità di connessione è di almeno 3G e il dispositivo ha almeno 4 GB di memoria,
- o se il dispositivo utilizza iOS.
- CPU inattiva: Infine, Terra controlla se la CPU è inattiva e in grado di svolgere attività extra utilizzando
requestIdleCallback, che richiede l'elaborazione del callback quando il thread principale è inattivo o entro una scadenza specifica (facoltativa), a seconda dell'evento che si verifica per primo.
Il rispetto di queste condizioni garantisce che Terra recuperi i dati solo quando necessario, il che riduce l'utilizzo di larghezza di banda e durata della batteria e riduce al minimo l'impatto dei precaricamenti che finiscono per rimanere inutilizzati.
Quando queste condizioni sono soddisfatte, Terra precarica gli articoli presenti nelle sezioni "Contenuti correlati" e "Consigliati per te" evidenziati in blu qui sotto.
Impatto sul business
Per misurare l'impatto di questa tecnica, Terra ha lanciato inizialmente la funzionalità nella sezione "Contenuti correlati" della pagina dell'articolo. Grazie a un codice UTM, l'azienda ha potuto distinguere gli articoli precaricati da quelli non precaricati ai fini del confronto. Dopo due settimane di test A/B con ottimi risultati, Terra ha deciso di aggiungere la funzionalità di precaricamento alla sezione "Consigliate per te".
A seguito del precaricamento degli articoli, sono stati osservati un aumento complessivo delle metriche relative agli annunci e una riduzione dei tempi LCP e Time to First Byte (TTFB):
Se utilizzato con cautela, il precaricamento aumenta notevolmente il tempo di caricamento delle pagine, aumenta le metriche relative agli annunci e riduce il tempo LCP.
Dettagli tecnici
Il precaricamento può essere eseguito utilizzando suggerimenti di risorse come rel=prefetch o rel=preload, tramite librerie come quicklink o Guess.js oppure la più recente API Speculation Rules. Terra ha scelto di implementarla utilizzando l'API di recupero con una bassa priorità in combinazione con un'istanza Intersection Observationr. Terra ha fatto questa scelta perché consente di supportare Safari, che non supporta ancora altri metodi di precaricamento come rel=prefetch o l'API Speculation Rules e per le sue esigenze non era necessaria una libreria JavaScript completa.
Il codice JavaScript riportato di seguito equivale approssimativamente al codice utilizzato da Terra:
function prefetch(nodeLists) {
// Exclude slow ECTs < 3g
if (navigator.connection &&
(navigator.connection.effectiveType === 'slow-2g'
|| navigator.connection.effectiveType === '2g')
) {
return;
}
// Exclude low end device which is device with memory <= 2GB
if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
return;
}
const fetchLinkList = {};
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
if (!fetchLinkList[entry.target.href]) {
fetchLinkList[entry.target.href] = true;
fetch(entry.target, {
priority: 'low'
});
}
observer.unobserve(entry = entry.target);
}
});
});
}
const idleCallback = window.requestIdleCallback || function (cb) {
let start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
}
idleCallback(function () {
prefetch(nodeLists)
})
- La funzione
prefetchverifica innanzitutto la qualità della connessione e la memoria del dispositivo minime prima di avviare il precaricamento. - Dopodiché utilizza un oggetto
IntersectionObserverper monitorare quando gli elementi diventano visibili nell'area visibile e aggiunge poi URL a un elenco per il precaricamento. - Il processo di precaricamento è programmato con
requestIdleCallback, allo scopo di eseguire la funzioneprefetchquando il thread principale è inattivo.
Conclusione
Se utilizzato con cautela, il precaricamento può ridurre notevolmente i tempi di caricamento per le richieste di navigazione future, riducendo così gli attriti nel percorso dell'utente e aumentando il coinvolgimento. Il precaricamento comporta il caricamento di byte extra che potrebbero non essere utilizzati, quindi Terra ha eseguito ulteriori passaggi per eseguire il precaricamento solo in buone condizioni di rete e sui dispositivi idonei, dove queste informazioni sono disponibili.
Un ringraziamento speciale a Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, Leonardo Bellini e Lucca Paradeda del team Engineering di Terra per il loro contributo a questo lavoro.