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 de ressources accélère le 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 sont susceptibles d'être nécessaires prochainement. Des études ont montré que des temps de chargement plus rapides améliorent les taux de conversion et l'expérience utilisateur.

Terra est l'un des plus grands portails de contenus du Brésil. Il propose des contenus d'actualités, de divertissement et de sport, et compte 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 son 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) des annonces sur mobile, de 30 % sur ordinateur et une réduction de 50 % des temps de LCP (Largest Contentful Paint).

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 des ressources qui ne sont pas immédiatement nécessaires. Cette technique doit être appliquée de manière réfléchie pour éviter une utilisation inutile des données. Dans le cas de Terra, les articles sont pré-extraits 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 qui n'est pas toujours souhaitable dans toutes les situations. Pour réduire le risque de gaspillage de bande passante, Terra utilise l'API Network Information ainsi que l'API Device Memory pour déterminer si elle doit extraire 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 fonctionne sous iOS.
• CPU inactif : Terra vérifie enfin si le processeur est inactif et peut effectuer des tâches supplémentaires à l'aide de requestIdleCallback, qui prend un rappel à traiter lorsque le thread principal est inactif ou avant une échéance spécifique (facultatif), selon la première éventualité.

Le respect de ces conditions garantit que Terra récupère les données uniquement 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 finissent par ne plus être utilisés.

Lorsque ces conditions sont remplies, Terra précharge les articles des sections "Contenu associé" et "Recommandations personnalisées" surlignées 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 de l'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 personnalisées".

Le préchargement des articles a entraîné une augmentation globale des métriques publicitaires et une réduction des temps de LCP et du temps de latence du premier octet (TTFB) :

Lorsque vous l'utilisez avec précaution, le préchargement améliore considérablement le temps de chargement de la page, augmente les métriques des annonces et réduit le temps de LCP.

Détails techniques

Le préchargement peut être réalisé à l'aide d'indices de ressources tels que rel=prefetch ou rel=preload, via des bibliothèques telles que quicklink ou Guess.js, ou en utilisant la nouvelle API Speculation Rules. Terra a choisi d'implémenter cela à l'aide de l'API fetch avec une priorité basse, en association avec une instance Intersection Observer. Terra a fait ce choix, car il lui permet de prendre en charge Safari, qui ne prend pas encore en charge 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 les besoins de Terra.

Le code JavaScript ci-dessous est à peu près équivalent 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 une qualité de connexion et une mémoire de l'appareil minimales avant de lancer le préchargement.
• Il utilise ensuite un IntersectionObserver pour surveiller le moment où les éléments deviennent visibles dans le viewport, puis ajoute les URL à une liste pour le préchargement.
• Le processus de préchargement est planifié avec requestIdleCallback, dans le but d'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 ne sont pas nécessairement utilisés. Terra a donc pris des mesures supplémentaires pour ne précharger que dans de bonnes conditions réseau et sur des appareils compatibles, où ces informations sont disponibles.

Nous remercions tout particulièrement Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner, ainsi que Leonardo Bellini et Lucca Paradeda de l'équipe d'ingénieurs de Terra pour leur contribution à ce travail.