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
Guilherme Moser de Souza

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 Content-Portale in Brasilien. Es bietet Unterhaltung, Nachrichten und Sport und hat mehr als 63 Millionen einzelne Besucher 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 dann ab, wenn:
    • 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-Leerlauf:Schließlich prüft Terra mithilfe von requestIdleCallback, ob die CPU inaktiv ist und zusätzliche Aufgaben ausführen kann. Dabei wird ein Rückruf verarbeitet, wenn der Hauptthread inaktiv ist oder bis zu einem bestimmten (optionalen) Termin – je nachdem, was zuerst eintritt.

Wenn Sie diese Bedingungen einhalten, werden Daten nur bei Bedarf abgerufen. Das spart Bandbreite und Akkulaufzeit und minimiert die Auswirkungen von vorab abgerufenen Daten, die letztendlich nicht verwendet werden.

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

Screenshot der beiden Bereiche auf der Terra-Website, in denen Links vorab abgerufen wurden Links ist der Bereich „Ähnliche Inhalte“ hervorgehoben, rechts der Bereich „Empfohlen für dich“.

Auswirkungen auf das Geschäft

Um die Auswirkungen dieser Technik zu messen, führte Terra diese Funktion zuerst im Bereich „Ähnliche Inhalte“ der Artikelseite ein. Mit einem UTM-Code konnte das Unternehmen zum Vergleich zwischen Artikeln mit und ohne Vorabruf unterscheiden. Nach zweiwöchigen erfolgreichen A/B-Tests entschied sich Terra, die Funktion zum Vorabladen dem Bereich „Empfohlen für dich“ hinzuzufügen.

Durch das Vorabladen von Artikeln wurden eine allgemeine Steigerung der Anzeigenmesswerte und eine Verringerung der LCP- und TTFB-Zeiten (Time to First Byte) beobachtet:

Messwert Mobilgeräte Computer
Anzeigen-CTR +11 % 30 %
Anzeigensichtbarkeit +10,5% +6 %
LCP -51% –73%
TTFB –83% -84%

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 Prefetching-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 die Verbindungsqualität und den Gerätespeicher, bevor das Vorabladen gestartet wird.
  • Anschließend wird mithilfe eines IntersectionObserver überwacht, wann Elemente im Viewport sichtbar werden, und URLs werden einer Liste zum Vorabladen hinzugefügt.
  • Der Vorab-Ladeprozess 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.