Leistungsoptimierung mit Ressourcenhinweisen

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Viele Leistungsoptimierungen können vorgenommen werden, wenn wir vorhersagen können, was Benutzer tun könnten, bevor sie es tatsächlich tun. Ressourcenhinweise sind eine einfache, aber effektive Methode, mit der Webentwickler dem Browser helfen können, dem Benutzer einen Schritt voraus zu sein und Seiten schnell zu halten.

Moderne Webbrowser verwenden alle möglichen Techniken, um die Leistung beim Laden von Seiten zu verbessern, indem sie erraten, was der Benutzer wahrscheinlich als Nächstes tun wird. Der Browser weiß jedoch nicht viel über unsere Website oder Anwendung als Ganzes, und oft kommen die besten Erkenntnisse darüber, was ein Benutzer wahrscheinlich tun wird, von uns, den Entwicklern.

Nehmen wir das Beispiel von paginierten Inhalten wie einem Fotoalbum. Wir wissen, dass, wenn der Benutzer ein Foto in einem Album ansieht, die Wahrscheinlichkeit, dass er auf den „Weiter“-Link klickt, um das folgende Bild im Album anzuzeigen, ziemlich hoch ist. Der Browser weiß jedoch nicht wirklich, dass von allen Links auf der Seite derjenige am wahrscheinlichsten ist, auf den der Benutzer klickt. Für einen Browser haben alle diese Links das gleiche Gewicht.

Was wäre, wenn der Browser irgendwie wissen könnte, wohin der Benutzer als nächstes geht, und die nächste Seite im Voraus abrufen könnte, sodass die Seite viel, viel schneller geladen wird, wenn der Benutzer auf den Link klickt? Das sind im Prinzip Ressourcenhinweise. Sie sind eine Möglichkeit für den Entwickler, dem Browser mitzuteilen, was wahrscheinlich in der Zukunft passieren wird , damit der Browser dies bei seinen Entscheidungen zum Laden von Ressourcen berücksichtigen kann.

Alle diese Ressourcenhinweise verwenden das rel Attribut des <link> -Elements, das Sie im <head> Ihrer HTML-Dokumente finden werden. In diesem Artikel werfen wir einen Blick auf die wichtigsten Arten von Ressourcenhinweisen und darauf, wann und wo wir sie auf unseren Seiten verwenden können. Wir gehen von den kleinen und subtilen Hinweisen bis zu den großen Kanonen am Ende.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

DNS-Vorabruf

Ein DNS-Lookup ist der Prozess, bei dem ein menschenfreundlicher Domainname wie example.com in eine maschinenfreundliche IP-Adresse wie 123.54.92.4 wird, die tatsächlich benötigt wird, um eine Ressource abzurufen.

Jedes Mal, wenn Sie eine URL in die Adressleiste des Browsers eingeben, einem Link auf einer Seite folgen oder sogar eine Ressource wie ein Bild von einer anderen Domain laden, muss der Browser eine DNS-Suche durchführen, um den Server zu finden, der die Ressource enthält, die wir haben angefordert. Für eine stark frequentierte Seite mit vielen externen Ressourcen (wie vielleicht eine Nachrichten-Website mit vielen Anzeigen und Trackern) sind möglicherweise Dutzende von DNS-Lookups pro Seite erforderlich.

Der Browser speichert die Ergebnisse dieser Suchvorgänge im Cache, sie können jedoch langsam sein. Eine Technik zur Leistungsoptimierung besteht darin, die Anzahl der erforderlichen DNS-Lookups zu reduzieren, indem Ressourcen auf weniger Domänen organisiert werden. Wenn dies nicht möglich ist, können Sie den Browser mit dem Ressourcenhinweis dns-prefetch vor den Domänen warnen, die er nachschlagen muss.

 <link rel="dns-prefetch" href="https://images.example.com">

Wenn der Browser auf diesen Hinweis stößt, kann er so schnell wie möglich mit der Auflösung des images.example.com beginnen, obwohl er noch nicht weiß, wie er verwendet wird. Dadurch kann der Browser dem Spiel einen Schritt voraus sein und mehr Arbeit parallel erledigen, wodurch die Gesamtladezeit verkürzt wird.

Wann sollte ich `dns-prefetch` verwenden?

Verwenden Sie dns-prefetch , wenn Ihre Seite Ressourcen von einer anderen Domain verwendet, um dem Browser einen Vorsprung zu verschaffen. Die Browserunterstützung ist wirklich großartig, aber wenn ein Browser sie nicht unterstützt, ist das kein Problem – der Prefetch findet einfach nicht statt.

Rufen Sie keine Domains vorab ab, die Sie nicht verwenden, und wenn Sie feststellen, dass Sie eine große Anzahl von Domains vorab abrufen möchten, sollten Sie sich vielleicht besser ansehen, warum all diese Domains benötigt werden und ob irgendetwas getan werden kann, um die Anzahl zu reduzieren.

Vorverbinden

Ein Schritt nach dem DNS- Vorabruf ist die Vorverbindung mit einem Server. Das Herstellen einer Verbindung zu einem Server, der eine Ressource hostet, erfordert mehrere Schritte:

DNS-Lookup (wie wir gerade besprochen haben);
TCP-Handshake
Ein kurzes „Gespräch“ zwischen Browser und Server, um die Verbindung herzustellen.
TLS-Aushandlung auf HTTPS-Sites
Dadurch wird überprüft, ob die Zertifikatsinformationen gültig und für die Verbindung korrekt sind.

Dies geschieht normalerweise einmal pro Server und nimmt wertvolle Zeit in Anspruch – insbesondere, wenn der Server sehr weit vom Browser entfernt und die Netzwerklatenz hoch ist. (Hier helfen global verteilte CDNs wirklich!) Genauso wie das Vorabrufen von DNS dem Browser helfen kann, dem Spiel einen Schritt voraus zu sein, bevor er sieht, was kommt, kann die Vorabverbindung mit einem Server sicherstellen, dass der Browser den Teil erreicht, wenn er ankommt der Seite, auf der eine Ressource benötigt wird, die langsame Arbeit des Verbindungsaufbaus bereits stattgefunden hat und die Leitung offen und einsatzbereit ist.

 <link rel="preconnect" href="https://scripts.example.com">

Wann sollte ich `preconnect` verwenden?

Auch hier ist die Browserunterstützung stark und es schadet nichts, wenn ein Browser die Vorverbindung nicht unterstützt – das Ergebnis wird genauso sein wie zuvor. Erwägen Sie die Verwendung von Preconnect, wenn Sie sicher sind, dass Sie auf eine Ressource zugreifen werden, und Sie weiterkommen möchten.

Achten Sie darauf, sich nicht vorab zu verbinden und die Verbindung dann nicht zu verwenden, da dies sowohl Ihre Seite verlangsamt als auch eine kleine Menge an Ressourcen auf dem Server bindet, mit dem Sie sich verbinden.

Vorabrufen der nächsten Seite

Die beiden Hinweise, die wir uns bisher angesehen haben, konzentrieren sich hauptsächlich auf Ressourcen innerhalb der geladenen Seite. Sie können nützlich sein, um dem Browser beispielsweise bei Bildern, Skripten oder Schriftarten zu helfen, weiterzukommen. Die nächsten paar Hinweise befassen sich mehr mit der Navigation und der Vorhersage, wohin der Benutzer nach der gerade geladenen Seite gehen könnte.

Das erste davon ist das Prefetching, und sein Link-Tag könnte so aussehen:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Dies teilt dem Browser mit, dass er fortfahren und eine Seite im Hintergrund abrufen kann, damit sie bereit ist, wenn sie angefordert wird. Hier ist ein bisschen Glücksspiel, weil Sie vorhersehen müssen, wohin der Benutzer Ihrer Meinung nach als nächstes navigieren wird. Machen Sie es richtig, und die nächste Seite scheint sehr schnell geladen zu werden. Wenn Sie es falsch machen, haben Sie Zeit und Ressourcen verschwendet, um etwas herunterzuladen, das nicht verwendet wird. Wenn der Benutzer eine getaktete Verbindung wie einen eingeschränkten Mobilfunkplan verwendet, könnten Sie ihn tatsächlich echtes Geld kosten.

Wenn ein Prefetch stattfindet, führt der Browser die DNS-Suche durch und stellt die Serververbindung her, die wir in den beiden vorherigen Hinweistypen gesehen haben, geht dann aber noch einen Schritt weiter und fordert die Dateien tatsächlich an und lädt sie herunter. Es stoppt jedoch an diesem Punkt und die Dateien werden nicht geparst oder ausgeführt und sie werden in keiner Weise auf die aktuelle Seite angewendet. Sie werden nur angefordert und bereitgehalten.

Sie können sich einen Prefetch wie das Hinzufügen einer Datei zum Cache des Browsers vorstellen. Anstatt zum Server gehen und es herunterladen zu müssen, wenn der Benutzer auf den Link klickt, kann die Datei aus dem Speicher gezogen und viel schneller verwendet werden.

Das `as` -Attribut

Im obigen Beispiel können Sie sehen, dass wir das Attribut as auf as="document" setzen. Dies ist ein optionales Attribut, das dem Browser mitteilt, dass das, was wir abrufen, als Dokument (dh als Webseite) behandelt werden soll. Dadurch kann der Browser die gleiche Art von Anforderungsheadern und Sicherheitsrichtlinien festlegen, als ob wir gerade einem Link zu einer neuen Seite gefolgt wären.

Es gibt viele mögliche Werte für das as -Attribut, indem Sie dem Browser ermöglichen, verschiedene Arten von Prefetch auf geeignete Weise zu handhaben.

Wert von `as`	Art der Ressource
`audio`	Ton- und Musikdateien
`video`	Video
`Track`	Video- oder Audio-WebVTT-Tracks
`script`	JavaScript-Dateien
`style`	CSS-Stylesheets
`font`	Web-Schriftarten
`image`	Bilder
`fetch`	XHR- und Fetch-API-Anfragen
`worker`	Web-Arbeiter
`embed`	Multimedia- `<embed>` -Anforderungen
`object`	Multimedia- `<object>` -Anforderungen
`document`	Webseiten

Die verschiedenen Werte, die verwendet werden können, um Ressourcentypen mit dem as -Attribut anzugeben.

Wann sollte ich `prefetch` verwenden?

Auch hier bietet prefetch eine hervorragende Browserunterstützung. Sie sollten es verwenden, wenn Sie ein angemessenes Maß an Sicherheit haben, dass der Benutzer Ihrer Website folgen könnte, wenn Sie glauben, dass eine Beschleunigung der Navigation die Benutzererfahrung positiv beeinflussen wird. Dies sollte gegen das Risiko abgewogen werden, Ressourcen zu verschwenden, indem möglicherweise eine Ressource abgerufen wird, die dann nicht verwendet wird.

Die nächste Seite vorab rendern

Mit prefetch haben wir gesehen, wie der Browser die Dateien im Hintergrund gebrauchsfertig herunterladen kann, aber auch festgestellt, dass zu diesem Zeitpunkt nichts mehr mit ihnen gemacht wurde. Prerendering geht noch einen Schritt weiter und führt die Dateien aus, wobei so ziemlich die gesamte Arbeit erledigt wird, die zum Anzeigen der Seite erforderlich ist, außer sie tatsächlich anzuzeigen.

Dies kann das Analysieren der Ressource für alle Unterressourcen wie JavaScript-Dateien und Bilder und das Vorabrufen dieser ebenfalls umfassen.

 <link rel="prerender" href="https://example.com/news/?page=2">

Dadurch kann sich das Laden der folgenden Seite wirklich augenblicklich anfühlen, mit der Art von schneller Ladeleistung, die Sie möglicherweise sehen, wenn Sie auf die Schaltfläche „ Zurück “ Ihres Browsers klicken. Das Glücksspiel ist hier jedoch noch größer, da Sie nicht nur Zeit damit verbringen, die Dateien anzufordern und herunterzuladen, sondern sie zusammen mit JavaScript und dergleichen auszuführen. Dies könnte Speicher und CPU (und damit Batterie) verbrauchen, die der Benutzer nicht sehen wird, wenn er die Seite nicht anfordert.

Wann sollte ich `prerender` verwenden?

Die Browserunterstützung für prerender ist derzeit sehr eingeschränkt, wobei wirklich nur Chrome und der alte IE (nicht Edge) Unterstützung für die Option bieten. Dies könnte seine Nützlichkeit einschränken, es sei denn, Sie zielen speziell auf Chrome ab. Auch hier gilt „no harm, no foul“, da der Benutzer den Vorteil nicht sieht, aber es wird ihm keine Probleme bereiten, wenn dies nicht der Fall ist.

Verwendung von Ressourcenhinweisen

Wir haben bereits gesehen, wie Ressourcenhinweise im <head> eines HTML-Dokuments mit dem <link> -Tag verwendet werden können. Das ist wahrscheinlich der bequemste Weg, aber Sie können dasselbe auch mit dem Link: HTTP-Header erreichen.

Zum Beispiel zum Prefetch mit einem HTTP-Header:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

Sie können auch JavaScript verwenden, um Ressourcenhinweise dynamisch anzuwenden, vielleicht als Reaktion auf eine Benutzerinteraktion. So verwenden Sie ein Beispiel aus dem W3C-Spezifikationsdokument:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Dies eröffnet einige interessante Möglichkeiten, da es möglicherweise einfacher ist vorherzusagen, wohin der Benutzer als Nächstes navigieren könnte, basierend darauf, wie er mit der Seite interagiert.

Dinge zu beachten

Wir haben uns vier zunehmend aggressivere Möglichkeiten zum Vorabladen von Ressourcen angesehen, von der leichtesten Berührung der DNS-Auflösung bis hin zum Rendern einer vollständigen Seite, die im Hintergrund bereit ist. Es ist wichtig, sich daran zu erinnern, dass diese Hinweise genau das sind; sie sind Hinweise darauf, wie der Browser die Leistung optimieren könnte . Sie sind keine Direktiven. Der Browser kann unsere Vorschläge annehmen und nach bestem Wissen und Gewissen entscheiden, wie er reagieren soll.

Dies kann bedeuten, dass der Browser auf einem ausgelasteten oder überlasteten Gerät überhaupt nicht versucht, auf die Hinweise zu reagieren. Wenn der Browser weiß, dass es sich um eine getaktete Verbindung handelt, kann er beispielsweise DNS vorab abrufen, aber nicht die gesamten Ressourcen. Wenn der Arbeitsspeicher niedrig ist, entscheidet der Browser möglicherweise erneut, dass es sich nicht lohnt, die nächste Seite abzurufen, bis die aktuelle ausgelagert wurde.

Die Realität ist, dass auf einem Desktop-Browser die Hinweise wahrscheinlich alle befolgt werden, wie der Entwickler vorschlägt, aber seien Sie sich bewusst, dass es in jedem Fall Sache des Browsers ist.

Die Bedeutung der Wartung

Wenn Sie seit mehr als ein paar Jahren mit dem Web arbeiten, werden Sie mit der Tatsache vertraut sein, dass etwas, das auf einer Seite nicht gesehen wird, oft vernachlässigt werden kann. Versteckte Metadaten (wie Seitenbeschreibungen) sind ein gutes Beispiel dafür. Wenn die Personen, die sich um die Website kümmern, die Daten nicht ohne weiteres sehen können, können sie leicht vernachlässigt werden und veraltet sein.

Dies ist ein echtes Risiko mit Ressourcenhinweisen. Da der Code versteckt ist und bei der Verwendung so gut wie unentdeckt bleibt, wäre es für die Seite sehr einfach, sich zu ändern und alle Ressourcenhinweise nicht zu aktualisieren. Wenn Sie beispielsweise eine Seite vorab abrufen, die Sie nicht verwenden, bedeutet dies, dass die Tools, die Sie zur Verbesserung der Leistung Ihrer Website eingerichtet haben, dieser dann aktiv schaden. Es wird also wirklich, wirklich wichtig, gute Verfahren zu haben, um Ihre Ressourcenhinweise auf den neuesten Stand zu bringen.

Ressourcen

„Resource Hints-Spezifikation“, W3C
„Beschleunigen Sie die Navigation auf der nächsten Seite mit Prefetching“, Addy Osmani