Link Prefetching

Copyright © Shutterstock/ BestForBest

Was ist Link Prefetching?

Link Prefetching ist eine Methode, mit der Webseiten Hinweise deklarieren können, die es Webbrowsern ermöglichen, verschiedene externe Ressourcen vorab zu laden, um das Laden und Rendern der Seite zu beschleunigen. Die Ressourcen können JavaScript-, CSS-, Bild-, Audio-, Video- oder Web-Font-Dateien sowie DNS-Namen und TCP-Verbindungen enthalten.

Prefetching ist ein Ressourcenhinweis mit niedriger Priorität, der es dem Browser ermöglicht, Ressourcen im Hintergrund, während der Leerlaufzeit, abzurufen, die später benötigt werden, und diese im Cache des Browsers zu speichern. Sobald eine Seite fertig geladen ist, beginnt sie mit dem Herunterladen zusätzlicher Ressourcen. Wenn ein Benutzer dann auf einen Prefetch-Link klickt, wird der Inhalt sofort geladen. Es gibt drei verschiedene Arten von Prefetching, Link Prefetching, DNS Prefetching und Prerendering,.

HTML:

< link rel = "prefetch" href = "/ uploads / bilder / bild.png">

HTTP-Header:

< /uploads/bilder/bild.png>; rel = prefetch

Die Technik des Link Prefetching kann interaktive Websites beschleunigen, wird aber nicht überall funktionieren. Für einige Websites ist es einfach zu schwierig zu erraten, was der Benutzer als Nächstes tun könnte. Bei anderen sind die Daten möglicherweise veraltet, wenn sie zu früh abgerufen werden. Es ist auch wichtig, darauf zu achten, dass Dateien nicht zu früh abgerufen werden, sie können die Seite verlangsamen, die der Benutzer bereits betrachtet.

Link Prefetching wird von den meisten modernen Browsern mit Ausnahme von Safari, IOS Safari und Opera Mini unterstützt. Chrome und Firefox zeigen auch Prefetch-Ressourcen im Netzwerkfenster an, wenn Webseiten getestet werden.

DNS Prefetching

DNS Prefetching ermöglicht es dem Browser, DNS-Suchen auf einer Seite im Hintergrund durchzuführen, während der Benutzer gerade surft. Dies minimiert die Latenzzeit, da die DNS-Suche bereits stattgefunden hat, sobald der Benutzer auf einen Link klickt. Der DNS-Vorabruf kann zu einer bestimmten URL hinzugefügt werden, indem das Attribut rel = “dns-prefetch” zum Attribut der Verknüpfung hinzugefügt wird.

DNS-Anfragen sind sehr klein in Bezug auf die Bandbreite, aber die Latenz kann besonders in mobilen Netzwerken ziemlich hoch sein. Durch spekulatives Vorabholen von DNS-Ergebnissen kann die Latenzzeit zu bestimmten Zeiten erheblich reduziert werden, beispielsweise wenn der Benutzer auf den Link klickt. In einigen Fällen kann die Latenz um eine Sekunde reduziert werden.

< link rel = "dns-prefetch" href = "// fonts.googleapis.com">< link rel = "dns-prefetch" href = "// www.google-analytics.com">< link rel = "dns-prefetch" href = "// opensource.keycdn.com">< link rel = "dns-prefetch" href = "// cdn.domain.com">

Der DNS-Prefetch wird wie Link Prefetching von den meisten modernen Browsern mit Ausnahme von Opera Mini unterstützt.

Prerendering

Das Prerendering, oder Vorrendern ist dem Link Prefetching sehr ähnlich, da es Ressourcen sammelt, zu denen der Benutzer als nächstes navigieren kann. Der Unterschied besteht darin, dass das Vorrendern tatsächlich die gesamte Seite im Hintergrund darstellt, also alle Assets eines Dokuments. Ein Code-Beispiel für die Prerendering Anweisung:

< link rel = "prerender" href = "https://www.www.onlinesolutionsgroup.de.">

Der Prerender-Hinweis kann von der Anwendung verwendet werden, um das nächste wahrscheinliche HTML-Navigationsziel anzugeben. Der Benutzeragent wird die angegebene Ressource als HTML-Antwort abrufen und verarbeiten. Um andere Inhaltstypen mit entsprechenden Anforderungsheadern zu holen, oder wenn HTML-Vorverarbeitung nicht gewünscht ist, kann die Anwendung den Vorabrufhinweis verwenden.

Prerendering sollte mit Bedacht eingesetzt werden, da es ressourcenintensiv ist und insbesondere auf mobilen Geräten zu Bandbreitenverschwendung führen kann. Prerender wird von einigen Browsern mit Ausnahme von Mozilla Firefox, Safari, iOS Safari, Opera Mini und Android Browser unterstützt.

Preconnect

Preconnect ermöglicht es dem Browser, frühe Verbindungen einzurichten, bevor eine HTTP-Anfrage tatsächlich an den Server gesendet wird. Dazu gehören DNS-Lookups, TLS-Verhandlungen, TCP-Handshakes. Dies wiederum verhindert Roundtrip-Latenz und spart Zeit für die Benutzer. Ein Preconnect kann direkt zu einem Link-Tag als Attribut im HTML hinzugefügt werden. Es kann auch über den Link-HTTP-Header bereitgestellt werden oder kann durch JavaScript basierend auf Benutzeraktivitäten aufgerufen werden. Ein Beispiel zum Aktivieren der Vorverbindung für eine CDN-URL.

< link href = "https://cdn.domain.de" rel = "preconnect" crossorigin>

Die effiziente und durchdachte Verwendung von Preconnect wird nicht nur zur Optimierung einer Website beitragen, sondern auch davor bewahren, Ressourcen zu wenig zu nutzen. Preconnect wird von einigen modernen Browsern mit Ausnahme von Internet Explorer, Safari, IOS Safari und Opera Mini unterstützt.

Lazy Load

Lazy Load ist eine Anweisung nur für den Internet Explorer um Bilder vorab laden. Anders als bei Link Prefetching wird die Anweisung im scr-Tag angeben. Zum Beispiel < img src=”bild.png” lazyload>

Webseiten, die Link-Prefetching verwenden

Google ist die bekannteste Website, die diese Funktion nutzt, um die Benutzerfreundlichkeit zu verbessern. Wenn der erste Treffer einer Suchanfrage mit hoher Wahrscheinlichkeit der gewünschte Treffer ist, wird die Zielseite vorab in den Browser geladen. Google implementierte im August 2011 “Google Instant Pages” um die Leistung der Suchmaschine zu verbessern. Google Instant Pages nutzen die oben genannten Funktionen, die Vorhersage der Suchanfrage und das Vorabladen von Suchergebnissen, während der Nutzer seine Suche eingibt. Die Suchmaschine Bing verwendet Prefetching und Preloading seit der Veröffentlichung von Internet Explorer 11 im Oktober 2013.

Probleme und Kritik am Link-Prefetching

Ein dem Link-Prefetching innewohnendes Problem betrifft den Missbrauch von sicheren HTTP-Methoden. Die HTTP-GET- und HEAD-Anforderungen gelten als sicher, das heißt, wenn der Benutzeragent, eine dieser Anforderungen ausgibt, wird erwartet, dass die Anforderung zu keiner Änderung auf dem Empfängerserver führt. Es ist jedoch nicht ungewöhnlich, dass Websitebetreiber diese Anforderungen außerhalb dieser Einschränkung verwenden.

Eindeutige Hyperlinks, die fast immer zu GET-Anforderungen führen, werden häufig verwendet, um eine Abmeldefunktionalität und Kontoverifizierung zu implementieren. Wenn zum Beispiel ein Benutzer, ein Kontoerstellungsformular ausfüllt und ein automatisierter Dienst eine Bestätigungs-E-Mail an die angegebene E-Mail-Adresse sendet. Ebenso ist es möglich, dass ein Hosting-Dienst ein Web-Frontend zur Verwaltung von Dateien bereitstellt, einschließlich Links, die eine oder mehrere Dateien löschen. Benutzer, die Seiten besuchen, die diese Art von Links enthalten, können dann feststellen, dass sie ausgeloggt oder dass ihre Dateien gelöscht wurden.

Darüber hinaus gibt es eine Reihe von Kritikpunkten bezüglich der Auswirkungen des Link-Prefetching auf die Privatsphäre und die Ressourcennutzung:

Benutzer und Website-Betreiber, die für die Bandbreite bezahlen, die sie verwenden, bezahlen den Traffic für Seiten und Ressourcen, die der Nutzer möglicherweise nicht besucht oder abruft. Werbetreibende könnten für bezahlte Anzeigen auf Websites zahlen, die tatsächlich nie angezeigt wurden. Webstatistiken wie die Browsernutzung, Suchmaschinenreferenz und Seitenzugriffe können aufgrund der Registrierung von Seitenaufrufen, die der Nutzer nie gesehen hat, weniger zuverlässig werden.

Benutzer können mehr Sicherheitsrisiken ausgesetzt sein, indem sie mehr Seiten herunterladen oder von nicht angeforderten Websites, die zusätzlich als Drive-by-Downloads kompiliert werden, gefährdet werden. Zudem könnten Benutzer gegen unternehmensinterne Richtlinien für eine erlaubte Nutzung des Unternehmens-Netzwerkes verstoßen, wenn der Vorabzugriff auf nicht autorisierte Inhalte erfolgt.

Im Fall von mobilen Geräten oder für Benutzer mit einer begrenzten Bandbreite erfolgt durch Prefetching ein unnötiger und in vielen Fällen kostenintensiver Verbrauch der Bandbreite. Nicht zuletzt warnt Google davor, dass eine unsachgemäße Verwendung des Link-Prefetching wegen der erhöhten Bandbreitennutzung zu einem verlangsamten Laden anderer Links führen kann.