So konnte Terra mithilfe von Vorabrufen die Klickrate von Anzeigen um 30% steigern und den Largest Contentful Paint beschleunigen.

Durch das Vorabladen von Ressourcen werden die Seitenladezeiten verkürzt und die Geschäftsmesswerte verbessert.

Guilherme Moser de Souza

Thierno Thiam

Beim Prefetching werden Ressourcen oder sogar ganze Seiten heruntergeladen, die in naher Zukunft wahrscheinlich benötigt werden, um das Laden der Seite zu beschleunigen. Studien haben gezeigt, dass kürzere Ladezeiten zu höheren Conversion-Raten und einer besseren Nutzererfahrung führen.

Terra ist eines der größten Inhaltsportale in Brasilien. Es bietet Unterhaltung, Nachrichten und Sport mit über 63 Millionen eindeutigen Besuchern pro Monat. Wir haben mit dem Entwicklungsteam von Terra zusammengearbeitet, um die Ladezeit von Artikeln zu verbessern. Dazu haben wir in bestimmten Bereichen der Website Prefetching-Techniken eingesetzt.

In dieser Fallstudie wird die Implementierung des Kaufprozesses von Terra beschrieben, die zu einer Steigerung der Anzeigenklickrate (CTR) von 11 % auf Mobilgeräten, 30 % auf Computern und einer Verringerung der LCP-Zeit (Largest Contentful Paint) um 50 % führte.

Strategie für das Vorabladen

Das Vorabladen gibt es schon seit einiger Zeit, aber es ist wichtig, es mit Bedacht zu verwenden, da es zusätzliche Bandbreite für Ressourcen verbraucht, die nicht sofort benötigt werden. Diese Technik sollte mit Bedacht angewendet werden, um unnötige Datennutzung zu vermeiden. Bei Terra werden Artikel vorab abgerufen, wenn die folgenden Bedingungen erfüllt sind:

• Sichtbarkeit von Links zu vorab abgerufenen Artikeln: Terra nutzte die Intersection Observer API, um die Sichtbarkeit des Bereichs mit den Artikeln zu erkennen, die vorab abgerufen werden sollten.
• Günstige Bedingungen für eine erhöhte Datennutzung: Wie bereits erwähnt, ist das Prefetching eine spekulative Leistungsverbesserung, die zusätzliche Daten verbraucht. Das ist nicht in jeder Situation wünschenswert. Um die Wahrscheinlichkeit zu verringern, dass Bandbreite verschwendet wird, verwendet Terra die Network Information API zusammen mit der Device Memory API, um zu bestimmen, ob der nächste Artikel abgerufen werden soll. Terra ruft den nächsten Artikel nur in folgenden Fällen ab:
  • Die Verbindungsgeschwindigkeit beträgt mindestens 3G und das Gerät hat mindestens 4 GB Arbeitsspeicher.
  • oder wenn auf dem Gerät iOS installiert ist.
• CPU-Inaktivität:Schließlich prüft Terra mit requestIdleCallback, ob die CPU inaktiv ist und zusätzliche Arbeit ausführen kann. Dabei wird ein Callback verarbeitet, wenn der Hauptthread inaktiv ist, oder eine bestimmte (optionale) Frist – je nachdem, was zuerst eintritt.

Durch die Einhaltung dieser Bedingungen wird sichergestellt, dass Terra Daten nur bei Bedarf abruft. Das spart Bandbreite und Akkulaufzeit und minimiert die Auswirkungen von Prefetches, die letztendlich ungenutzt bleiben.

Wenn diese Bedingungen erfüllt sind, werden die Artikel in den Abschnitten „Ähnliche Inhalte“ und „Empfohlen für dich“ (blau hervorgehoben) vorab abgerufen.

Auswirkungen auf das Geschäft

Um die Auswirkungen dieser Technik zu messen, führte Terra diese Funktion zuerst im Bereich „Weitere ähnliche Inhalte“ auf der Artikelseite ein. Mit einem UTM-Code konnte das Unternehmen zum Vergleich zwischen Artikeln mit und ohne Vorabruf unterscheiden. Nach zwei Wochen erfolgreichen A/B-Tests hat Terra beschlossen, die Prefetch-Funktion dem Bereich „Empfehlungen“ hinzuzufügen.

Das Ergebnis des Vorabrufs von Artikeln führte zu einem Anstieg der Anzeigenmesswerte und einer Reduzierung der LCP- und Time to First Byte (TTFB)-Zeiten:

Wenn Sie das Vorabladen mit Bedacht einsetzen, lässt sich die Seitenladezeit deutlich verbessern, die Anzeigenmesswerte steigern und die LCP-Zeit verkürzen.

Technische Details

Das Vorabladen kann über Ressourcenhinweise wie rel=prefetch oder rel=preload, über Bibliotheken wie quicklink oder Guess.js oder über die neuere Speculation Rules API erfolgen. Terra hat sich dafür entschieden, die Fetch API mit einer niedrigen Priorität in Kombination mit einer Intersection Observer-Instanz zu verwenden. Terra hat sich für diese Lösung entschieden, da sie Safari unterstützt, das noch keine anderen Prefetch-Methoden wie rel=prefetch oder die Speculation Rules API unterstützt. Außerdem war für die Anforderungen von Terra keine vollwertige JavaScript-Bibliothek erforderlich.

Der folgende JavaScript-Code entspricht ungefähr dem von Terra verwendeten Code:

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)
})

• Die Funktion prefetch prüft zuerst, ob eine Mindestverbindungsqualität und ein Gerätespeicher vorhanden ist, bevor der Prefetch ausgelöst wird.
• Anschließend wird mithilfe eines IntersectionObserver überwacht, wann Elemente im Viewport sichtbar werden, und URLs werden einer Liste für das Prefetching hinzugefügt.
• Der Prefetch-Prozess wird mit requestIdleCallback geplant, um die prefetch-Funktion auszuführen, wenn der Hauptthread inaktiv ist.

Fazit

Wenn Sie das Prefetching mit Bedacht einsetzen, können Sie die Ladezeiten für zukünftige Navigationsanfragen erheblich reduzieren. So wird die User Journey optimiert und die Interaktionen gesteigert. Das Vorabladen führt zum Laden zusätzlicher Bytes, die möglicherweise nicht verwendet werden. Daher hat Terra zusätzliche Maßnahmen ergriffen, um das Vorabladen nur bei guten Netzwerkbedingungen und auf geeigneten Geräten durchzuführen, auf denen diese Informationen verfügbar sind.

Ein besonderer Dank geht an Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner sowie Leonardo Bellini und Lucca Paradeda vom Terra-Entwicklerteam für ihren Beitrag zu dieser Arbeit.