Instant Transitions: So erweitern Sie den Edge-Cache mit Predictive Prefetching in den Browser
Es ist allgemein bekannt, dass Verzögerungen bei der Navigation die Konvertierung verringern und die Absprungraten erhöhen. Für diejenigen unter Ihnen, die die Konvertierung auf Websites mit viel Traffic verwalten und verfolgen, haben Sie dieses Szenario wahrscheinlich gesehen. Hoffentlich haben Sie auch den Umkehrschlag gesehen. Sie haben gesehen, dass die Konvertierung zunimmt, wenn sich die Navigation und die Seitenladezeiten verbessern.
Leistung und Umbau gehen Hand in Hand.
CDN-Unternehmen verwenden diese Abbildung häufig als Beispiel, um den ROI für ihre Services zu belegen. Die Lösung ist einfach. Stellen Sie statische Inhalte so nah wie möglich an Ihre Benutzer heran, um die Bereitstellung zu beschleunigen, und die Investition ist rentabel. Die Besucher bleiben länger, tätigen mehr Einkäufe und kehren häufiger zurück. Es ergibt Sinn, oder? Wenn Sie das lesen, wissen Sie wahrscheinlich schon, dass es wahr ist. Aber was kommt als Nächstes? Können wir noch einen Schritt weiter gehen und Netzwerkreaktionszeiten aus dem Web vollständig eliminieren und es einer nativen App ähneln? Wenn wir die Verzögerung auf Null reduzieren können, würden wir dann die Konvertierung nicht maximieren? Wenn wir Edge-Inhalte im Browser zwischenspeichern können, bevor der Benutzer klickt, können Übergänge sofort erfolgen, ähnlich wie bei einer nativen App.
„Können wir für unsere Websitebesucher eine ähnliche Leistung wie native Apps haben?“
Mit Edgio kannst du das.
Lassen Sie uns zunächst einmal einen Blick darauf werfen, was native mobile Anwendungen großartig macht. Die meisten Benutzer von mobilen Apps wissen nicht, was hinter den Kulissen passiert, aber sie schätzen sicherlich die Leistungsverbesserungen, die durch das Herunterladen und Installieren von Anwendungen auf ihre Geräte erzielt wurden. Es ist einfach, die App zu laden, durch Bildschirme zu navigieren und Übergänge sind sofort möglich. Tippen Sie von einer Sache zur nächsten, fügen Sie einen Artikel in Ihren Warenkorb und genießen Sie ein reibungsloses Erlebnis. Selten sieht der Benutzer eine „Ladeanzeige“, und wenn sie dies tun, ist dies sinnvoll, wie das Senden von Zahlungsinformationen während der Kasse. Alles ist möglich mit cleverer Entwicklung und einer leistungsfähigen Plattform.
Geben Sie Predictive Prefetching by Edgio ein. Jetzt können Ihre Web-Benutzer dasselbe Erlebnis genießen.
Viele CDN-Unternehmen bieten Optionen zur Cache-Erwärmung an, die sie als „Prefetching“ bezeichnen, um Inhalte von Ihrem Ursprung an die Peripherie zu bringen. Ein toller erster Schritt, aber er bringt Sie nicht ganz dorthin. Der Benutzer muss noch warten, während der Inhalt auf sein Gerät verschoben wird. Wie gehen wir also noch einen Schritt weiter? Vom Ursprung bis zum Edge und bis zum Browser, bevor sie klicken, ist Edgio Prefetching eine Browser-Integration, die die Edge direkt in das Gerät bringt. Etwas, wozu herkömmliche CDN nicht in der Lage sind.
„Das klingt wie Magie, wie funktioniert das?“
Tolle Frage und wir verstehen Ihre Skepsis. Um zu verstehen, wie es funktioniert, müssen wir mit den Grundlagen beginnen. Sehen Sie sich diese kurze Erklärung unten an, und schauen wir uns dann an, was Prefetching im Kern ist.
Was ist Prefetching … wirklich?
Sehen wir uns MDN an, um eine Definition des Vorabrufens zu finden, wie Ihr Browser dies versteht. Link Prefetching ist ein Hinweis für den Benutzer-Agent, dass er ein Asset herunterladen sollte, das später benötigt wird, wenn Ressourcen freigegeben werden. Zuerst wird Ihre Seite geladen und beginnt mit der Verarbeitung asynchroner Anforderungen. Wenn das Netzwerk und die CPU freigegeben werden, greift der Browser die zusätzlichen Ressourcen, die Sie dem Dokument hinzugefügt haben. Für grundlegende Vorabrufe kann es, wie der Browser es versteht, ein wenig wie folgt aussehen:
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
Das Ergebnis ist, dass next-page.html und next-image.jpg vom Browser heruntergeladen und zwischengespeichert werden, während der Benutzer mit der ursprünglichen Seite interagiert. Wenn sie auf klicken, wird das Skelett der nächsten Seite und ein zusätzliches Bild bereits lokal gecacht, das sofort angezeigt wird. Sicher, möglicherweise müssen zusätzliche CSS-, JS- und andere Ressourcen heruntergeladen werden, aber wir haben die wichtigsten Teile der Reise in den Browser gebracht, bevor sie benötigt werden. Das ist ein toller Anfang, und wie Sie aus dem Beispiel sehen können, funktioniert es wirklich gut für einen kleinen Anwendungsfall. Sequenzielle Reiseseiten, vielleicht eine Landing-Page oder zwei, aber was Sie wahrscheinlich denken, ist das…
„Meine Website hat Tausende von Bildern und Seiten, ich kann das nicht tun.
Wir können nicht jedes Bild und jede Seite im Kopf aller unserer Seiten verknüpfen, oder?“
Nein, und du musst es nicht. Mit den Plug-ins Predictive Prefetching und Deep Fetching von Edgio können Sie die Entwicklung und das Rätselraten umgehen, während der Browser Ihres Benutzers mit unserem Edge-Netzwerk arbeitet, um kritische Ressourcen einzubeziehen.
Okay, wie machen wir das?
Edgios Predictive Prefetching verwendet etwas, das als Servicearbeiter bezeichnet wird. Eine SW ist etwas, das alle modernen Browser verstehen, sie wird seit Chrome 40 unterstützt. Die SW ist ein Hintergrundprozess, der an Ihren Standort gebunden ist und funktioniert, während primäre Anforderungen inaktiv sind. Sie waren möglicherweise Servicemitarbeitern ausgesetzt, wenn Sie jemals in der Frontend-Entwicklung oder moderneren fortschrittlichen Webanwendungen gearbeitet haben. Wenn Sie jetzt keinen Servicemitarbeiter auf Ihrer Website verwenden, können Sie diesen problemlos hinzufügen, ohne dass dies Auswirkungen auf Ihre aktuelle Benutzererfahrung hat. Edgio hilft Ihnen bei der einfachen Einrichtung mit einem unserer vorgefertigten Servicemitarbeiter.
Die Registrierung und Installation eines Servicemitarbeiters kann variieren, je nachdem, ob Sie ein Front-End-Framework verwenden oder nicht. Lesen Sie unbedingt unsere Dokumentation, um detaillierte Anweisungen für verschiedene Methoden zu finden.
Nachdem Sie nun einen Servicemitarbeiter hinzugefügt haben und sich bei Ihrer Website registrieren, muss er etwas tun. Nachdem Sie das Edgio Prefetch-Paket hinzugefügt haben, ist es an der Zeit, unsere Routen hinzuzufügen, damit der Browser des Benutzers funktioniert. Standardmäßig wird der Service-Worker-Cache zwei Minuten lang gespeichert. Um die Leistung zu maximieren, können wir dies in unserer Routen-Datei anpassen:
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
Mit einer einfachen Regel haben wir die Edge so konfiguriert, dass die Aktualität der API-Antwort gewahrt bleibt, indem wir sie 24 Stunden lang validieren und den Browser angewiesen haben, sie nicht nur vorab abzurufen, sondern auch eine Stunde lang zu warten.
Wenn Sie mit Edgio vertraut sind, wissen Sie, dass Sie dies vor Ort testen können. Öffnen Sie die Entwicklertools Ihres Browsers, und sehen Sie sich die Registerkarte „Netzwerk“ an, während Sie die Website durchsuchen. Der Servicearbeiter greift beim Durchsuchen des Routes die RAW-HTML-Datei für die Links in Ihrer Routen-Datei. Beachten Sie das charakteristische Zahnradsymbol und „Servicearbeiter“ als Initiator.
Sie können den Service-Worker-Cache auch separat anzeigen, indem Sie die Registerkarte „Anwendung“ überprüfen und den Cache durchsuchen.
Mit dem Edgio Prefetch-Skript können Sie Links in das Viewport Ihres Benutzers ziehen, auf das Sie klicken können. Wenn sie auf klicken, wird sie sofort auf die folgende Seite gebracht.
Ein guter Anfang, aber was ist, wenn Sie eine inhaltsreiche Website mit Produkt- oder artikelbildern haben, die ebenfalls abgerufen werden müssen? Dann ist es Zeit für Edgios einzigartiges Deep Fetch-Plugin.
Das Deep Fetch-Plugin ist einfach zu aktivieren. Importieren Sie einfach das Plug-in in Ihr vorhandenes Projekt und wählen Sie einige HTML-Selektoren aus, nach denen das Plug-in suchen soll. Wenn Sie eine E-Commerce-Website betreiben, haben Ihre Produktseiten wahrscheinlich eine Vorlage. Ihr LCP sieht vielleicht so aus, wenn jede Seite ein anderes Bild hat, Sie aber den CSS-Selektor „Hauptbild“ verwenden, um das Styling auf Ihrer Website beizubehalten.
<img src=”/images/product-image.jpg” class=”main-image” />
Versuchen Sie, dem Deep Fetch-Array den Selektor „Main-Image“ hinzuzufügen, und lassen Sie den Servicearbeiter an die Arbeit gehen.
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
Kurz gesagt: Das Deep Fetch-Plugin wird angewiesen, nach dem Haupt-Mainframe-Selektor zu suchen und die Datei als Bild vorab abzurufen. Im Beispiel haben wir maxMatches auf 1 gesetzt. Das bedeutet, dass wir nur das erste Spiel vorholen. Es ist aber nicht nötig, dort anzuhalten. Passen Sie maxMatches je nach Art des Assets an, das Sie im Voraus abrufen.
Jetzt wird Ihr Service-Mitarbeiter Links im Viewport vorab abrufen, die HTML-Datei für diesen Selektor durchsuchen und einen Prefetch-Link für das fragliche Bild hinzufügen. Wenn der Benutzer auf das Bild klickt, wird die Seite sofort angezeigt.
„Was ist mit unserer Herkunft? Wir können nicht eine Zunahme des Datenverkehrs für jeden Nutzer unterstützen.“
Edgio bietet Ihnen Schutz. Unser WebCDN der nächsten Generation leitet Prefetch-Anforderungen nicht an Ihren Ursprung weiter, wenn das Asset nicht im Cache gespeichert ist. Edgio antwortet einfach mit einem 412. Wenn der Benutzer auf den nicht zwischengespeicherten Link klickt, leiten wir ihn wie bei jeder anderen Anfrage an den Ursprung weiter und halten die von Ihnen geltenden Proxy-Regeln ein. Seien Sie versichert, dass Ihre Herkunft bei Edgio sicher ist. Der natürliche Datenverkehr auf der Site wird den Cache aufwärmen, und die Antworten auf 412 werden verringert. Um Ihre Website reibungslos zu gestalten, sollten Sie unbedingt veraltete Elemente verwenden, damit wir einen veralteten Artikel liefern können, während wir nach einem neuen suchen.
Möchten Sie all dies in Aktion sehen, ohne sich die Entwicklungstools von Chrome durchzustöbern? Edgio kann da auch helfen. Wir haben gesehen, wie wertvoll Predictive Prefetching für unsere Kunden ist, sodass wir ein speziell entwickeltes Dashboard direkt in der Edgio-Konsole haben. Überwachen Sie Ihre Prefetching-Leistung sowohl für Ihre Prefetch-Anforderung als auch für Ihre Trefferquote.
Hoffentlich sehen Sie jetzt, wie Edgio Predictive Prefetching Ihren Benutzern ein wirklich unglaubliches digitales Erlebnis bieten kann, Konversionen erhöhen und Absprungraten senken kann, indem Sie den Edge-Cache vollständig zu Ihren Benutzern bringen.
