ProHoster > Blog > Verwaltung > Vorladen, Vorabrufen und andere Tags

Vorladen, Vorabrufen und andere Tags

Es gibt viele Möglichkeiten zur Verbesserung der Webleistung. Eine davon ist das Vorabladen von Inhalten, die später benötigt werden. CSS-Vorverarbeitung, vollständiges Seiten-Pre-Rendering oder Domain-Namensauflösung. Wir machen alles im Voraus und zeigen dann sofort das Ergebnis an! Hört sich cool an.

Was noch cooler ist, ist, dass es sehr einfach implementiert ist. Fünf Tags Geben Sie dem Browser einen Befehl, um vorbereitende Aktionen auszuführen:

<link rel="prefetch" href="/de/style.css" as="style" />
<link rel="preload" href="/de/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />


Lassen Sie uns kurz erklären, was sie tun und wann Sie sie verwenden.

ерейти к: Vorspannung · Vorabholen · vorverbinden · DNS-Prefetch · vorgeben

Vorspannung

<link rel= "preload"> weist den Browser an, eine Ressource (z. B. ein Skript oder Stylesheet) so schnell wie möglich zu laden und zwischenzuspeichern. Dies ist nützlich, wenn eine Ressource einige Sekunden nach dem Laden der Seite benötigt wird und Sie den Vorgang beschleunigen möchten.

Der Browser führt nach dem Laden keine Aktionen mit der Ressource aus. Skripte werden nicht ausgeführt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und auf Anfrage sofort zur Verfügung gestellt.

Syntax

<link rel="preload" href="/de/style.css" as="style" />

href verweist auf die Ressource, die Sie herunterladen möchten.

as kann alles sein, was im Browser heruntergeladen werden kann:

  • style für Stylesheets,
  • script für Drehbücher,
  • font für Schriftarten,
  • fetch für Ressourcen, die mit geladen werden fetch() oder XMLHttpRequest,
  • siehe vollständige Liste auf MDN.

Es ist wichtig, das Attribut anzugeben as – Dies hilft dem Browser, Downloads richtig zu priorisieren und zu planen.

Wann zu verwenden

Verwenden Sie das Vorladen, wenn die Ressource in naher Zukunft benötigt wird. Zum Beispiel:

  • Nicht standardmäßige Schriftarten aus einer externen Datei: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Standardmäßig comic-sans.woff2 Der Ladevorgang beginnt erst nach dem Herunterladen und Parsen index.css. Um nicht so lange warten zu müssen, können Sie die Schriftart früher herunterladen <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Wenn Sie Ihre Stile nach dem Ansatz trennen Kritisches CSS in zwei Teile, kritisch (zur sofortigen Wiedergabe) und nicht kritisch: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Bei diesem Ansatz werden unkritische Stile erst dann geladen, wenn JavaScript ausgeführt wird, was einige Sekunden nach dem Rendern passieren kann. Anstatt auf die Verwendung von JS zu warten <link rel= "preload">Um den Download früher zu starten:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/de/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Überbeanspruchen Sie das Vorladen nicht. Wenn Sie alles nacheinander laden, wird die Site nicht auf magische Weise schneller, im Gegenteil, es verhindert, dass der Browser seine Arbeit richtig plant.

Nicht zu verwechseln mit Prefetching. Verwende nicht <link rel= "preload">, wenn Sie die Ressource nicht sofort nach dem Laden der Seite benötigen. Wenn Sie es später benötigen, zum Beispiel für die nächste Seite, dann verwenden Sie <link rel= "prefetch">.

Details

Dies ist ein erforderliches Tag im Gegensatz zu allen anderen Tags vom Browser ausgeführt werden (sofern dieser dies unterstützt). im Zusammenhang mit der Vorspannung. Der Browser muss die in angegebene Ressource herunterladen <link rel="preload">. In anderen Fällen wird das Vorladen möglicherweise ignoriert, beispielsweise wenn die Verbindung langsam ist.

Prioritäten. Normalerweise weisen Browser verschiedenen Ressourcen (Stile, Skripte, Schriftarten usw.) unterschiedliche Prioritäten zu, um die wichtigsten Ressourcen zuerst zu laden. In diesem Fall bestimmt der Browser die Priorität anhand des Attributs as. Den Chrome-Browser können Sie sich ansehen vollständige Prioritätstabelle.

Vorladen, Vorabrufen und andere Tags

Vorabholen

<link rel= "prefetch"> fordert den Browser auf, eine Ressource (z. B. ein Skript oder Stylesheet) im Hintergrund herunterzuladen und zwischenzuspeichern. Der Ladevorgang erfolgt mit niedriger Priorität, sodass wichtigere Ressourcen nicht beeinträchtigt werden. Dies ist nützlich, wenn die Ressource auf der nächsten Seite benötigt wird und Sie sie vorab zwischenspeichern möchten.

Auch hier macht der Browser nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgeführt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und auf Anfrage sofort zur Verfügung gestellt.

Syntax

<link rel="prefetch" href="/de/style.css" as="style" />

href verweist auf die Ressource, die Sie herunterladen möchten.

as kann alles sein, was im Browser heruntergeladen werden kann:

  • style für Stylesheets,
  • script für Drehbücher,
  • font für Schriftarten,
  • fetch für Ressourcen, die mit geladen werden fetch() oder XMLHttpRequest,
  • siehe vollständige Liste auf MDN.

Es ist wichtig, das Attribut anzugeben as – Dies hilft dem Browser, Downloads richtig zu priorisieren und zu planen.

Wann zu verwenden

Um Ressourcen von anderen Seiten zu laden, wenn Sie eine Ressource von einer anderen Seite benötigen und diese vorab laden möchten, um dann das Rendern dieser Seite zu beschleunigen. Zum Beispiel:

  • Sie haben einen Online-Shop und 40 % der Nutzer verlassen die Startseite, um zur Produktseite zu gelangen. Verwenden <link rel= "prefetch">, Laden von CSS- und JS-Dateien zum Rendern von Produktseiten.
  • Sie haben eine einseitige Anwendung und verschiedene Seiten laden unterschiedliche Pakete. Wenn ein Benutzer eine Seite besucht, können Pakete für alle Seiten, auf die sie verlinkt, vorab geladen werden.

Es ist wahrscheinlich, dass dieses Tag in jedem Umfang sicher verwendet werden kann.. Browser planen Prefetch normalerweise mit der niedrigsten Priorität, sodass es niemanden stört. Bedenken Sie jedoch, dass dadurch Benutzerverkehr verbraucht wird, was Geld kosten kann.

Nicht für dringende Anfragen. Verwende nicht <link rel= "prefetch">, wenn die Ressource in wenigen Sekunden benötigt wird. In diesem Fall verwenden Sie <link rel= "preload">.

Details

Optionales Tag. Der Browser muss diese Anweisung nicht befolgen; er kann sie beispielsweise bei einer langsamen Verbindung ignorieren.

Priorität in Chrome. In Chrome <link rel= "prefetch"> normalerweise mit minimaler Priorität ausgeführt (siehe vollständige Prioritätstabelle), also nachdem alles andere geladen wurde.

vorverbinden

<link rel= "preconnect"> fordert den Browser auf, vorab eine Verbindung zur Domäne herzustellen, wenn Sie den Verbindungsaufbau in Zukunft beschleunigen möchten.

Der Browser muss eine Verbindung herstellen, wenn er Ressourcen von einer neuen Drittanbieterdomäne abruft. Wenn es beispielsweise Google Fonts oder React-Schriftarten von einem CDN lädt oder eine JSON-Antwort von einem API-Server anfordert.

Der Aufbau einer neuen Verbindung dauert in der Regel einige hundert Millisekunden. Man macht es einmal, braucht aber trotzdem Zeit. Wenn Sie im Voraus eine Verbindung hergestellt haben, sparen Sie Zeit und laden Ressourcen von dieser Domain schneller herunter.

Syntax

<link rel= "preconnect" href="https://api.my-app.com" />

href gibt den Domänennamen an, für den Sie die IP-Adresse ermitteln möchten. Kann mit einem Präfix angegeben werden (https://domain.com) oder ohne (//domain.com).

Wann zu verwenden

Für Domains verwenden, die bald benötigt werden um einen wichtigen Stil, ein Skript oder ein Bild von dort herunterzuladen, aber Sie kennen die Ressourcen-URL noch nicht. Zum Beispiel:

  • Ihre Anwendung wird auf gehostet my-app.com und stellt AJAX-Anfragen an api.my-app.com: Sie kennen die spezifischen Abfragen nicht im Voraus, da sie dynamisch von JS erstellt werden. Hier ist es durchaus sinnvoll, einen Tag zur Vorabverbindung mit der Domain zu verwenden.
  • Ihre Anwendung wird auf gehostet my-app.com und nutzt Google Fonts. Der Download erfolgt in zwei Schritten: Zunächst wird die CSS-Datei von der Domain heruntergeladen fonts.googleapis.com, dann fordert diese Datei Schriftarten mit an fonts.gstatic.com. Sie können nicht wissen, von welchen bestimmten Schriftartdateien sie stammen fonts.gstatic.com Sie benötigen bis zum Laden der CSS-Datei, daher können wir vorab nur eine vorläufige Verbindung herstellen.

Verwenden Sie dieses Tag, um ein Skript oder einen Stil eines Drittanbieters ein wenig zu beschleunigen aufgrund der vorab hergestellten Verbindung.

Nicht überbeanspruchen. Der Aufbau und die Aufrechterhaltung einer Verbindung ist sowohl für den Client als auch für den Server ein kostspieliger Vorgang. Verwenden Sie dieses Tag für maximal 4–6 Domains.

Details

Optionales Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie beispielsweise ignorieren, wenn bereits viele Verbindungen hergestellt wurden oder in einem anderen Fall.

Was beinhaltet der Verbindungsprozess?. Um eine Verbindung zu jeder Site herzustellen, muss der Browser Folgendes tun:

  • DNS-Auflösung. Finden Sie die IP-Adresse des Servers (216.58.215.78) für den angegebenen Domänennamen (google.com).
  • TCP-Handshake. Tauschen Sie Pakete aus (Client → Server → Client), um eine TCP-Verbindung mit dem Server herzustellen.
  • TLS-Handshake (nur HTTPS-Sites). Zwei Paketaustauschrunden (Client → Server → Client → Server → Client), um eine sichere TLS-Sitzung zu initiieren.

Hinweis: HTTP/3 wird den Handshake-Mechanismus verbessern und beschleunigen, aber es ist noch ein weiter Weg.

DNS-Prefetch

<link rel= "dns-prefetch"> fordert den Browser auf, vorab eine DNS-Auflösung für die Domäne durchzuführen, wenn Sie bald eine Verbindung herstellen und die Erstverbindung beschleunigen möchten.

Der Browser muss die IP-Adresse der Domäne ermitteln, wenn er Ressourcen von einer neuen Drittanbieterdomäne abrufen möchte. Laden Sie beispielsweise Google Fonts oder React-Schriftarten von einem CDN oder fordern Sie eine JSON-Antwort von einem API-Server an.

Für jede neue Domain dauert die Auflösung des DNS-Eintrags normalerweise etwa 20–120 ms. Dies wirkt sich nur auf das Laden der ersten Ressource aus einer bestimmten Domäne aus, führt aber dennoch zu einer Verzögerung. Wenn wir die DNS-Auflösung im Voraus durchführen, sparen wir Zeit und laden die Ressource schneller.

Syntax

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href gibt den Domänennamen an, für den Sie die IP-Adresse festlegen möchten. Kann mit einem Präfix angegeben werden (https://domain.com) oder ohne (//domain.com).

Wann zu verwenden

Für Domains verwenden, die bald benötigt werden um von dort Ressourcen herunterzuladen, von denen der Browser im Voraus nichts weiß. Zum Beispiel:

  • Ihre Anwendung wird auf gehostet my-app.com und stellt AJAX-Anfragen an api.my-app.com: Sie kennen die spezifischen Abfragen nicht im Voraus, da sie dynamisch von JS erstellt werden. Hier ist es durchaus sinnvoll, einen Tag zur Vorabverbindung mit der Domain zu verwenden.
  • Ihre Anwendung wird auf gehostet my-app.comund nutzt Google Fonts. Der Download erfolgt in zwei Schritten: Zunächst wird die CSS-Datei von der Domain heruntergeladen fonts.googleapis.com, dann fordert diese Datei Schriftarten mit an fonts.gstatic.com. Sie können nicht wissen, von welchen bestimmten Schriftartdateien sie stammen fonts.gstatic.com Sie benötigen es, bis Sie die CSS-Datei laden, sodass wir vorab nur eine vorläufige Verbindung herstellen können.

Verwenden Sie dieses Tag, um ein Skript oder einen Stil eines Drittanbieters ein wenig zu beschleunigen aufgrund der vorab hergestellten Verbindung.

Bitte beachten Sie ähnliche Eigenschaften <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Normalerweise macht es keinen Sinn, sie zusammen für eine Domain zu verwenden: <link rel= "preconnect"> bereits enthalten <link rel= "dns-prefetch"/> und vieles mehr. Dies lässt sich in zwei Fällen begründen:

  • Möchten Sie ältere Browser unterstützen?. <link rel= "dns-prefetch" /> unterstützt durch seit IE10 und Safari 5. <link rel= "preconnect"> wurde eine Zeit lang in Chrome und Firefox unterstützt, wurde aber erst in 11.1 und XNUMX zu Safari hinzugefügt Wird in IE/Edge immer noch nicht unterstützt. Wenn Sie diese Browser unterstützen müssen, verwenden Sie <link rel= "dns-prefetch" /> als Backup-Option für <link rel= "preconnect">.
  • Sie möchten Verbindungen zu mehr als 4–6 Domänen beschleunigen. Etikett <link rel= "preconnect"> Die Verwendung mit mehr als 4-6 Domänen wird nicht empfohlen, da der Aufbau und die Aufrechterhaltung einer Verbindung ein kostspieliger Vorgang ist. <link rel= "dns-prefetch" /> verbraucht weniger Ressourcen, also nutzen Sie es bei Bedarf.

Details

Optionales Tag. Der Browser ist nicht verpflichtet, diese Anweisung zu befolgen, daher kann es sein, dass er keine DNS-Auflösung durchführt, beispielsweise wenn es viele solcher Tags auf der Seite gibt oder in einem anderen Fall.

Was ist DNS. Jeder Server im Internet hat eine eindeutige IP-Adresse, die wie folgt aussieht 216.58.215.78. Der Name der Site wird normalerweise in die Adressleiste des Browsers eingegeben (z. B. google.com) und DNS-Server (Domain Name System) gleichen es mit der IP-Adresse des Servers ab (216.58.215.78).

Um eine IP-Adresse zu ermitteln, muss der Browser eine Abfrage beim DNS-Server durchführen. Die Verbindung zu einer neuen Drittanbieterdomäne dauert 20–120 ms.

DNS wird zwischengespeichert, allerdings nicht sehr zuverlässig. Einige Betriebssysteme und Browser speichern DNS-Abfragen im Cache: Dies spart Zeit bei wiederholten Abfragen, auf das Caching kann man sich jedoch nicht verlassen. Unter Linux funktioniert es normalerweise überhaupt nicht. Chrome verfügt über einen DNS-Cache, der jedoch nur eine Minute dauert. Windows speichert DNS-Antworten fünf Tage lang zwischen.

vorgeben

<link rel= "prerender"> fordert den Browser auf, die URL herunterzuladen und in einem unsichtbaren Tab anzuzeigen. Wenn der Benutzer auf den Link klickt, sollte die Seite sofort angezeigt werden. Dies ist nützlich, wenn Sie sicher sind, dass der Benutzer eine bestimmte Seite besuchen wird und deren Anzeige beschleunigen möchten.

Trotz (oder wegen) der außergewöhnlichen Wirksamkeit dieses Tags im Jahr 2019 <link rel= "prerender"> wird in den wichtigsten Browsern schlecht unterstützt. Weitere Details anzeigen. unten.

Syntax

<link rel="prerender" href="https://my-app.com/pricing" />

href verweist auf die URL, deren Rendering im Hintergrund gestartet werden soll.

Wann zu verwenden

Wenn Sie wirklich sicher sind, dass der Benutzer eine bestimmte Seite aufrufen wird. Wenn Sie einen „Tunnel“ haben, durch den 70 % der Besucher von Seite A zu Seite B gelangen, dann <link rel= "prerender"> auf Seite A hilft dabei, Seite B sehr schnell anzuzeigen.

Nicht überbeanspruchen. Das Vorrendern ist im Hinblick auf Bandbreite und Speicher extrem teuer. Verwende nicht <link rel= "prerender"> für mehr als eine Seite.

Details

Optionales Tag. Der Browser ist nicht verpflichtet, diese Anweisung zu befolgen und ignoriert sie möglicherweise, beispielsweise bei einer langsamen Verbindung oder wenn nicht genügend freier Speicher vorhanden ist.

Um Speicher zu sparen Chrome führt kein vollständiges Rendering durchUnd Nur NoState vorladen. Das bedeutet, dass Chrome die Seite und alle ihre Ressourcen lädt, aber kein JavaScript rendert oder ausführt.

Firefox und Safari unterstützen dieses Tag überhaupt nicht. Dies verstößt nicht gegen die Spezifikation, da Browser nicht verpflichtet sind, dieser Anweisung zu folgen; aber trotzdem traurig. Implementierungsfehler Firefox ist seit sieben Jahren geöffnet. Es gibt Berichte, dass Safari unterstützt dieses Tag auch nicht.

Zusammenfassung

Verwenden:

  • <link rel= "preload"> - wenn Sie in wenigen Sekunden eine Ressource benötigen
  • <link rel= "prefetch"> - wenn Sie die Ressource auf der nächsten Seite benötigen
  • <link rel= "preconnect"> - wenn Sie wissen, dass Sie eine Ressource bald benötigen, aber die vollständige URL noch nicht kennen
  • <link rel= "dns-prefetch"> - Ebenso, wenn Sie wissen, dass Sie eine Ressource bald benötigen, aber die vollständige URL noch nicht kennen (für ältere Browser)
  • <link rel= "prerender"> — wenn Sie sicher sind, dass Benutzer zu einer bestimmten Seite gelangen, und Sie deren Anzeige beschleunigen möchten

Source: habr.com

Kommentar hinzufügen