In che modo il precaricamento ha aiutato Terra ad aumentare la percentuale di clic degli annunci del 30% e ad accelerare Largest Contentful Paint.

Il pre-caricamento delle risorse velocizza i tempi di caricamento delle pagine e migliora le metriche aziendali.

Guilherme Moser de Souza

Thierno Thiam

Il pre-caricamento è una tecnica utilizzata per velocizzare il caricamento delle pagine scaricando le risorse o addirittura intere pagine che potrebbero essere necessarie nel prossimo futuro. La ricerca ha dimostrato che tempi di caricamento più rapidi si traducono in tassi di conversione più elevati ed esperienze utente migliori.

Terra è uno dei più grandi 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 in alcune sezioni del sito web.

Questo caso studio descrive l'implementazione del percorso di Terra, che ha comportato un aumento dell'11% della percentuale di clic (CTR) degli annunci sui dispositivi mobili, del 30% del CTR degli annunci sui computer e una riduzione del 50% dei tempi di Largest Contentful Paint (LCP).

Strategia di precaricamento

Il pre-caricamento è disponibile da un po' di tempo, ma è importante utilizzarlo con attenzione perché consuma larghezza di banda aggiuntiva per risorse non immediatamente necessarie. Questa tecnica deve essere applicata con attenzione per evitare un utilizzo non necessario dei dati. Nel caso di Terra, gli articoli vengono prerecuperati se sono soddisfatte le seguenti condizioni:

• Visibilità dei link agli articoli pre-caricati: Terra ha utilizzato l'API Intersection Observer per rilevare la visibilità della sezione contenente gli articoli che voleva pre-caricare.
• Condizioni favorevoli per un aumento dell'utilizzo dei dati: come accennato in precedenza, il pre-caricamento è un miglioramento speculativo delle prestazioni che consuma dati aggiuntivi e che potrebbe non essere un risultato auspicabile in ogni situazione. Per ridurre la probabilità di sprecare larghezza di banda, Terra utilizza l'API Network Information insieme all'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 esegue iOS.
• Inattività CPU: infine, Terra controlla se la CPU è inattiva e in grado di eseguire un lavoro extra utilizzando requestIdleCallback, che riceve un callback da elaborare quando il thread principale è inattivo o entro una scadenza specifica (facoltativa), a seconda del caso che si verifica per primo.

Il rispetto di queste condizioni garantisce che Terra recuperi i dati solo quando necessario, il che consente di risparmiare larghezza di banda e durata della batteria e riduce al minimo l'impatto dei pre-caricamenti che non vengono utilizzati.

Quando queste condizioni sono soddisfatte, Terra esegue il pre-caricamento degli articoli presenti nelle sezioni "Contenuti correlati" ed "Consigliati per te" evidenziate in blu di seguito.

Impatto sul business

Per misurare l'impatto di questa tecnica, Terra ha lanciato questa funzionalità per la prima volta nella sezione "Contenuti correlati" della pagina dell'articolo. Il codice UTM li ha aiutati a distinguere gli articoli precaricati da quelli non precaricati a fini di confronto. Dopo due settimane di test A/B riusciti, Terra ha deciso di aggiungere la funzionalità di prefetching alla sezione "Consigliati per te".

In seguito al pre-caricamento degli articoli, è stato osservato un aumento complessivo delle metriche degli annunci e una riduzione dei tempi LCP e Time to First Byte (TTFB):

Se utilizzato con attenzione, il precaricamento migliora notevolmente il tempo di caricamento della pagina, aumenta le metriche degli annunci e riduce il tempo LCP.

Dettagli tecnici

Il pre-caricamento può essere ottenuto tramite l'utilizzo di suggerimenti di risorse come rel=prefetch o rel=preload, tramite librerie come quicklink o Guess.js oppure utilizzando la più recente API Speculation Rules. Terra ha scelto di implementare questa funzionalità utilizzando l'API di recupero con una priorità bassa in combinazione con un'istanza Intersection Observer. Terra ha fatto questa scelta perché le consente di supportare Safari, che non supporta ancora altri metodi di pre-caricamento come rel=prefetch o l'API Speculation Rules, e una libreria JavaScript completa non era necessaria per le esigenze di Terra.

Il codice JavaScript riportato di seguito è approssimativamente equivalente 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 prefetch controlla innanzitutto la qualità della connessione e la memoria del dispositivo prima di avviare il pre-caricamento.
• Poi utilizza un IntersectionObserver per monitorare quando gli elementi diventano visibili nel viewport e successivamente aggiunge gli URL a un elenco per il pre-caricamento.
• Il processo di prelettura viene pianificato con requestIdleCallback, allo scopo di eseguire la funzione prefetch quando il thread principale è inattivo.

Conclusione

Se utilizzato con attenzione, il pre-caricamento può ridurre in modo significativo i tempi di caricamento per le richieste di navigazione future, riducendo così le difficoltà nel percorso dell'utente e aumentando il coinvolgimento. Il pre-caricamento comporta il caricamento di byte aggiuntivi che potrebbero non essere utilizzati, pertanto Terra ha adottato ulteriori passaggi per eseguire il pre-caricamento solo in condizioni di rete ottimali e su dispositivi idonei, dove sono disponibili queste informazioni.

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 di ingegneri di Terra per il loro contributo a questo lavoro.