Durch den Vorabruf von Ressourcen werden die Seitenladezeiten verkürzt und die Geschäftsmesswerte verbessert.
Der Prefetch wird verwendet, um den Seitenaufbau zu beschleunigen, indem Ressourcen – oder sogar ganze Seiten – heruntergeladen werden, die wahrscheinlich in naher Zukunft benötigt werden. Untersuchungen haben gezeigt, dass schnellere Ladezeiten zu höheren Conversion-Raten und einer besseren Nutzererfahrung führen.
Terra ist eines der größten Inhaltsportale Brasiliens mit mehr als 63 Millionen einzelnen Besuchern pro Monat für Unterhaltung, Nachrichten und Sport. Wir haben mit dem Entwicklungsteam von Terra zusammengearbeitet, um die Ladezeit von Artikeln zu verbessern, indem wir für bestimmte Bereiche der Website Prefetch-Techniken verwenden.
Diese Fallstudie beschreibt Terras Kaufprozess, der zu einer Steigerung der Anzeigenklickrate (Click-through-Rate, CTR) auf Mobilgeräten um 11 %, der Anzeigenklickrate auf Computern um 30% und einer Reduzierung der Largest Contentful Paint (LCP) um 50% führte.
Prefetch-Strategie
Prefetching gibt es schon eine Weile, aber es ist wichtig, sie mit Bedacht zu verwenden, da sie zusätzliche Bandbreite für Ressourcen verbraucht, die nicht sofort benötigt werden. Diese Methode sollte mit Bedacht angewendet werden, um eine unnötige Datennutzung zu vermeiden. Bei Terra werden Artikel vorab abgerufen, wenn die folgenden Bedingungen erfüllt sind:
- Sichtbarkeit von Links zu vorabgerufenen Artikeln:Terra hat die Intersection Observer API verwendet, um die Sichtbarkeit des Bereichs mit den Artikeln zu ermitteln, die vorab abgerufen werden sollten.
- Vorteilhafte Bedingungen für erhöhte Datennutzung: Wie bereits erwähnt, ist der Vorabruf eine spekulative Leistungsverbesserung, bei der zusätzliche Daten verbraucht werden. Dies ist nicht immer wünschenswert. Terra verwendet die Network Information API und die Device Memory API, um die Wahrscheinlichkeit zu verringern, dass Bandbreite verschwendet wird, um festzustellen, 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 verfügt über mindestens 4 GB Arbeitsspeicher,
- oder iOS ausgeführt wird.
- CPU-Inaktiv: Terra prüft mit
requestIdleCallback, ob die CPU inaktiv ist, und kann zusätzliche Arbeit ausführen. Dabei wird ein Callback verarbeitet, wenn der Hauptthread inaktiv ist, oder bis zu einem bestimmten (optionalen) Zeitlimit – je nachdem, was zuerst eintritt.
Wenn diese Bedingungen eingehalten werden, kann Terra nur dann Daten abrufen, wenn es notwendig ist. Dadurch wird Bandbreite und Akkulaufzeit gespart und die Auswirkungen von Prefetches, die letztlich nicht verwendet werden, minimiert.
Wenn diese Bedingungen erfüllt sind, ruft Terra die Artikel in den Abschnitten „Ähnliche Inhalte“ und „Empfehlungen für Sie“, die unten blau hervorgehoben sind, vorab ab.
Auswirkungen auf das Geschäft
Um die Auswirkungen dieser Technik zu messen, hat Terra diese Funktion zuerst im Abschnitt „Ähnliche Inhalte“ der Artikelseite eingeführt. Mithilfe eines UTM-Codes konnte das Team zu Vergleichszwecken zwischen vorab abgerufenen und nicht vorabgerufenen Artikeln unterscheiden. Nach zwei Wochen erfolgreichen A/B-Tests beschloss Terra, die Prefetch-Funktion zum Abschnitt „Empfehlungen für dich“ hinzuzufügen.
Durch den Vorabruf von Artikeln stiegen die Anzeigenmesswerte insgesamt und die LCP- und Time to First Byte (TTFB)-Zeiten reduzierten sich:
Durch den Prefetch wird – wenn er mit Bedacht eingesetzt – die Seitenladezeit erheblich verbessert, die Anzeigenmesswerte erhöht und der LCP-Wert verringert.
Technische Details
Der Prefetching ist über Ressourcenhinweise wie rel=prefetch oder rel=preload, über Bibliotheken wie Quicklink oder Guess.js oder die neuere Speculation Rules API möglich. Terra hat dazu die Fetch API mit niedriger Priorität in Kombination mit einer Intersection Observer-Instanz verwendet. Terra hat sich für diese Entscheidung entschieden, weil damit Safari unterstützt werden kann, das andere Prefetch-Methoden wie rel=prefetch oder die Speculation Rules API noch nicht unterstützt und eine voll funktionsfähige JavaScript-Bibliothek für Terras Anforderungen nicht erforderlich war.
Der folgende JavaScript-Code entspricht in etwa 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
prefetchprüft zuerst, ob die Mindestverbindungsqualität und der Gerätespeicher eingehalten werden, bevor der Prefetch initiiert wird. - Anschließend wird mithilfe eines
IntersectionObserverermittelt, wann Elemente im Darstellungsbereich sichtbar werden. Anschließend werden URLs für den Prefetch zu einer Liste hinzugefügt. - Der Prefetch-Prozess wird mit
requestIdleCallbackgeplant, um dieprefetch-Funktion auszuführen, wenn der Hauptthread inaktiv ist.
Fazit
Mit Vorsicht kann der Vorabruf mit Bedacht eingesetzt werden, wodurch die Ladezeiten für zukünftige Navigationsanfragen erheblich verkürzt werden können. Dadurch wird der Kaufprozess vereinfacht und Interaktionen gefördert. Durch den Vorabruf werden zusätzliche Bytes geladen, die möglicherweise nicht verwendet werden. Daher unternahm Terra zusätzliche Schritte, um den Prefetch nur unter guten Netzwerkbedingungen und auf kompatiblen Geräten, auf denen diese Informationen verfügbar sind, durchzuführen.
Ein besonderer Dank an Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner sowie Leonardo Bellini und Lucca Paradeda vom Entwicklungsteam von Terra für ihren Beitrag zu dieser Arbeit.