Découvrez comment Terrasse a augmenté son taux de clics de 30% grâce au préchargement et accéléré la vitesse de Largest Contentful Paint.

Le préchargement des ressources accélère le temps de chargement des pages et améliore les métriques métier.

Guilherme Moser de Souza

Thierno Thiam

Le préchargement est une technique utilisée pour accélérer le chargement des pages en téléchargeant des ressources, voire des pages entières, qui seront probablement nécessaires dans un avenir proche. Des études ont montré que des temps de chargement plus rapides se traduisent par des taux de conversion plus élevés et une meilleure expérience utilisateur.

Terra est l'un des plus grands portails de contenus du Brésil. Il propose des divertissements, des actualités et le sport, avec plus de 63 millions de visiteurs uniques par mois. Nous avons collaboré avec l'équipe d'ingénieurs de Terra pour améliorer le temps de chargement des articles en utilisant des techniques de préchargement sur certaines sections de leur site Web.

Cette étude de cas décrit l'implémentation du parcours de Terra, qui a entraîné une augmentation de 11% du taux de clics (CTR) sur les annonces sur mobile, de 30% du CTR des annonces sur ordinateur et de 50% du temps consacré au Largest Contentful Paint (LCP).

Stratégie de préchargement

Le préchargement existe depuis un certain temps, mais il est important de l'utiliser avec précaution, car il consomme de la bande passante supplémentaire pour les ressources qui ne sont pas nécessaires immédiatement. Cette technique doit être appliquée de manière réfléchie afin d’éviter toute consommation de données inutile. Dans le cas de Terra, les articles sont préchargés si les conditions suivantes sont remplies:

• Visibilité des liens vers les articles préchargés:Terra a utilisé l'API Intersection Observer pour détecter la visibilité de la section contenant les articles qu'il souhaitait précharger.
• Conditions favorables à une utilisation accrue des données:comme indiqué précédemment, le préchargement est une amélioration des performances spéculative qui consomme des données supplémentaires. Ce résultat n'est pas forcément souhaitable dans toutes les situations. Pour réduire les risques de gaspillage de bande passante, Terra utilise l'API Network Information avec l'API Device Memory pour déterminer s'il faut récupérer l'article suivant. Terra ne récupère l'article suivant que dans les cas suivants :
  • La vitesse de connexion est d'au moins 3G et l'appareil dispose d'au moins 4 Go de mémoire,
  • ou si l'appareil est sous iOS.
• Processeur inactif:Enfin, Terra vérifie si le processeur est inactif et peut effectuer des tâches supplémentaires en utilisant requestIdleCallback, qui nécessite un rappel à traiter lorsque le thread principal est inactif, ou selon un délai spécifique (facultatif), selon la situation qui se présente en premier.

En respectant ces conditions, Terra ne récupère les données que lorsque cela est nécessaire, ce qui permet d'économiser la bande passante et l'autonomie de la batterie, et de réduire l'impact des préchargements qui ne sont jamais utilisés.

Lorsque ces conditions sont remplies, Terra précharge les articles présents dans les sections "Contenu associé" et "Recommandations personnalisées" mises en surbrillance en bleu ci-dessous.

Impact sur l'entreprise

Pour mesurer l'impact de cette technique, Terra a d'abord lancé cette fonctionnalité dans la section "Contenu associé" de la page d'article. Un code UTM leur a permis de différencier les articles préchargés des articles non préchargés à des fins de comparaison. Après deux semaines de tests A/B réussis, Terra a décidé d'ajouter la fonctionnalité de préchargement à la section "Recommandations".

Suite au préchargement des articles, nous avons observé une augmentation globale des métriques relatives aux annonces, ainsi qu'une réduction du LCP et du temps de chargement du premier octet (TTFB):

Lorsqu'elle est utilisée avec précaution, la fonctionnalité de préchargement améliore considérablement le temps de chargement des pages, augmente les métriques relatives aux annonces et réduit le temps LCP.

Détails techniques

Le préchargement peut être réalisé à l'aide de suggestions de ressources telles que rel=prefetch ou rel=preload, via des bibliothèques telles que quicklink ou Guess.js, ou à l'aide de la nouvelle API Speculation Rules. Terra a choisi d'implémenter cela en utilisant l'API fetch avec une faible priorité en combinaison avec une instance "Intersection Observer". Terra a fait ce choix, car il est compatible avec Safari, qui n'est pas encore compatible avec d'autres méthodes de préchargement telles que rel=prefetch ou l'API Speculation Rules. De plus, une bibliothèque JavaScript complète n'était pas nécessaire pour répondre aux besoins de Terra.

Le code JavaScript ci-dessous équivaut à peu près au code utilisé par 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 fonction prefetch vérifie d'abord la qualité minimale de la connexion et de la mémoire de l'appareil avant de lancer le préchargement.
• Elle utilise ensuite un IntersectionObserver pour surveiller quand les éléments deviennent visibles dans la fenêtre d'affichage, puis ajoute les URL à une liste en vue du préchargement.
• Le processus de préchargement est planifié avec requestIdleCallback, visant à exécuter la fonction prefetch lorsque le thread principal est inactif.

Conclusion

Lorsqu'il est utilisé avec précaution, le préchargement peut réduire considérablement les temps de chargement des futures requêtes de navigation, ce qui réduit les frictions dans le parcours utilisateur et augmente l'engagement. Le préchargement entraîne le chargement d'octets supplémentaires qui pourraient ne pas être utilisés. Terra a donc pris des mesures supplémentaires pour précharger uniquement dans de bonnes conditions de réseau et sur des appareils compatibles, lorsque ces informations sont disponibles.

Un grand merci à Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, Leonardo Bellini et Lucca Paradeda de l'équipe d'ingénierie de Terra pour leur contribution à ce travail.