Link Prefetching

Link Prefetching

┬ę Copyright Shutterstock/ Elle Aon

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,.

Link Prefetching

Link-Prefetching erm├Âglicht es dem Browser, Ressourcen abzurufen, sie im Cache zu speichern, vorausgesetzt, dass der Client sie anfordert. Der Browser sucht nach Prefetch im HTML < link> oder dem HTTP-Header Link zum Beispiel:

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.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte