Es gibt Viele Möglichkeiten zur Steigerung der Web-Performance. Eine davon ist das Vorladen von Inhalten, die später benötigt werden. Pre-Fetching von CSS, das Vorladen einer gesamten Seite oder das Auflösen eines Domänennamens. Wir bereiten alles im Voraus vor und zeigen das Ergebnis dann sofort an! Klingt toll.

Noch besser ist, dass das sehr einfach umzusetzen ist. Fünf <link rel>-Tags geben dem Browser die Anweisung zu vorzeitigen Maßnahmen:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/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" />

Kurz gesagt, was sie tun und wann man sie verwenden sollte.

Gehe zu: preload · prefetch · preconnect · dns-prefetch · prerender

preload

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

Der Browser führt nach dem Laden nichts mit der Ressource durch. Skripte werden nicht ausgeführt, Stylesheets werden nicht angewendet. Die Ressource wird nur zwischen gespeichert und auf Anfrage sofort bereitgestellt.

Syntax

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

href zeigt 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 Skripte,
font für Schriftarten,
fetch für Ressourcen, die mit fetch() oder XMLHttpRequest,
vollständige Liste siehe auf MDN.

Es ist wichtig, das Attribut anzugeben as – es hilft dem Browser, die Prioritäten richtig zu setzen und das Laden zu planen.

Wann verwenden

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

Benutzerdefinierte Schriftarten aus einer externen Datei:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Standardmäßig comic-sans.woff2 wird erst nach dem Laden und Parsen gestartet index.css. Um nicht so lange zu warten, können Sie die Schriftart früher mit <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Wenn Sie Ihre Styles gemäß dem Ansatz Critical CSS in zwei Teile unterteilen, einen kritischen (für das sofortige Rendern) und einen nicht-kritischen:
```
/* Eingegebene kritische Styles */
```
In diesem Ansatz werden nicht-kritische Styles erst geladen, wenn JavaScript ausgeführt wird, was einige Sekunden nach dem Rendering geschehen kann. Anstelle des Wartens auf JS verwenden Sie <link rel="preload">, um das Laden früher zu starten:
```
/* Inlined critical styles */
```

Übertreiben Sie nicht mit der Preload-Funktion. Wenn Sie alles auf einmal laden, wird die Website nicht auf magische Weise schneller, im Gegenteil, es hindert den Browser daran, effizient zu planen.

Verwechseln Sie dies nicht mit Prefetching. Verwenden Sie nicht <link rel="preload">, wenn Sie die Ressource nicht sofort nach dem Seitenladen benötigen. Wenn sie später benötigt wird, z. B. für die nächste Seite, verwenden Sie <link rel= "prefetch">.

Details

Dieser Tag ist zwingend für die Ausführung durch den Browser (sofern er unterstützt wird), im Gegensatz zu allen anderen -Tags, die mit dem Vorladen verbunden sind. Der Browser ist verpflichtet, die Ressource zu laden, die in <link rel="preload">angegeben ist. In anderen Fällen kann er das Vorladen ignorieren, z. B. wenn er über eine langsame Verbindung arbeitet.

Prioritäten. Verschiedene Ressourcen (Styles, Skripte, Schriftarten usw.) erhalten von Browsern unterschiedliche Prioritäten, sodass die wichtigsten Ressourcen zuerst geladen werden. In diesem Fall bestimmt der Browser die Priorität anhand des Attributs. as. Für den Chrome-Browser können Sie die vollständige Prioritätstabelle.

prefetch

<link rel= "prefetch"> anfordern, dass der Browser eine Ressource (wie ein Skript oder ein Stylesheet) im Hintergrund lädt und cacht. Der Ladevorgang hat eine niedrige Priorität, sodass er wichtigeren Ressourcen nicht im Weg steht. Dies ist nützlich, wenn die Ressource auf der nächsten Seite benötigt wird und Sie sie vorher cachen 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 gecacht und sofort auf Anfrage bereitgestellt.

Syntax

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

href zeigt 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 Skripte,
font für Schriftarten,
fetch für Ressourcen, die mit fetch() oder XMLHttpRequest,
vollständige Liste siehe auf MDN.

Es ist wichtig, das Attribut anzugeben as hilft dem Browser, Prioritäten korrekt zu setzen und die Ladeplanung vorzunehmen.

Wann verwenden

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

Sie betreiben einen Online-Shop, und 40 % der Nutzer verlassen die Startseite für die Produktseite. Nutzen Sie <link rel= "prefetch">, um CSS- und JS-Dateien zu laden, die das Rendern der Produktseiten ermöglichen.
Sie haben eine einseitige Anwendung, und verschiedene Seiten laden unterschiedliche Pakete. Wenn ein Nutzer eine Seite besucht, können die Pakete für alle Seiten, auf die verwiesen wird, im Voraus geladen werden.

Dieser Tag kann wahrscheinlich ohne Probleme in großem Umfang verwendet werden. Browser planen in der Regel Prefetch mit der niedrigsten Priorität, sodass es niemanden stört. Achten Sie nur darauf, dass Datenverbrauch anfallen kann, was Geld kosten kann.

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

Details

einen optionalen Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie ignorieren, beispielsweise bei einer langsamen Verbindung.

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

preconnect

<link rel= "preconnect"> fordert den Browser auf, sich im Voraus mit der Domain zu verbinden, wenn Sie die Installation der Verbindung in der Zukunft beschleunigen möchten.

Der Browser muss eine Verbindung herstellen, wenn er Ressourcen von einer neuen externen Domain abruft. Zum Beispiel, wenn Schriftarten von Google Fonts, React von einem CDN geladen werden oder ein JSON-Antwort vom API-Server angefordert wird.

Das Einrichten einer neuen Verbindung dauert in der Regel einige Hundert Millisekunden. Es wird einmalig hergestellt, kostet jedoch trotzdem Zeit. Wenn Sie die Verbindung im Voraus herstellen, sparen Sie Zeit und laden Ressourcen von dieser Domain schneller herab.

Syntax

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

href zeigt auf den Domainnamen, für den die IP-Adresse ermittelt werden soll. Es kann mit einem Präfix angegeben werden (https://domain.com) oder ohne (//domain.com).

Wann verwenden

Verwenden Sie es für Domains, die in Kürze benötigt werden um dort wichtige Stile, Skripte oder Bilder zu laden, aber Sie kennen die URL der Ressource noch nicht. Zum Beispiel:

Ihre Anwendung wird gehostet auf my-app.com und führt AJAX-Anfragen an api.my-app.com: Sie kennen im Voraus die spezifischen Anfragen nicht, da diese dynamisch aus JS erstellt werden. Hier ist die Verwendung des Tags zur Vorverbindung zur Domain durchaus sinnvoll.
Ihre Anwendung wird gehostet auf my-app.com und verwendet Google Fonts. Diese werden in zwei Schritten geladen: Zuerst wird die CSS-Datei von der Domain fonts.googleapis.com, dann fordert diese Datei Schriften von fonts.gstatic.com. Sie wissen nicht, welche spezifischen Schriftdateien von fonts.gstatic.com benötigt werden, bis Sie die CSS-Datei geladen haben. Daher können wir im Voraus nur eine vorläufige Verbindung herstellen.

Verwenden Sie dieses Tag, um einige externe Skripte oder Stile etwas zu beschleunigen durch die vorzeitige Verbindungseinrichtung.

Missbrauchen Sie diesen Tag nicht,. Das Einrichten und Aufrechterhalten einer Verbindung ist ein kostspieliger Prozess, sowohl für den Kunden als auch für den Server. Verwenden Sie dieses Tag höchstens für 4-6 Domains.

Details

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

Was der Verbindungsprozess umfasst,. Um sich mit einer Website zu verbinden, muss der Browser die folgenden Schritte ausführen:

DNS-Auflösung. Den IP-Adresse des Servers zu finden (216.58.215.78) für den angegebenen Domainnamen (google.com).
TCP-Handschlag. Austausch von Paketen (Client → Server → Client), um eine TCP-Verbindung zum Server herzustellen.
TLS-Handschlag (nur für HTTPS-Websites). Zwei Runden des Paket-Austauschs (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, die DNS-Auflösung für die Domäne im Voraus durchzuführen, falls Sie bald eine Verbindung herstellen möchten und die Anfangsverbindung beschleunigen möchten.

Der Browser muss die IP-Adresse der Domäne bestimmen, falls er Ressourcen von einer neuen externen Domäne abrufen muss. Zum Beispiel beim Laden von Google Fonts, React von einem CDN oder beim Anfragen einer JSON-Antwort vom API-Server.

Für jede neue Domäne dauert die DNS-Record-Auflösung normalerweise etwa 20–120 ms. Dies betrifft nur das Laden der ersten Ressource von dieser Domäne, stellt aber dennoch eine Verzögerung dar. Wenn die DNS-Auflösung im Voraus erfolgt, 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 eine IP-Adresse festgelegt werden soll. Kann mit einem Präfix angegeben werden (https://domain.com) oder ohne (//domain.com).

Wann verwenden

Verwenden Sie es für Domains, die in Kürze benötigt werden zum Laden von Ressourcen von dort, die der Browser im Voraus nicht kennt. Zum Beispiel:

Ihre Anwendung wird gehostet auf my-app.com und führt AJAX-Anfragen an api.my-app.com: Sie kennen im Voraus die spezifischen Anfragen nicht, da diese dynamisch aus JS erstellt werden. Hier ist die Verwendung des Tags zur Vorverbindung zur Domain durchaus sinnvoll.
Ihre Anwendung wird gehostet auf my-app.com, und nutzt Google Fonts. Diese werden in zwei Phasen geladen: Zuerst wird die CSS-Datei von der Domain geladen. fonts.googleapis.com, dann fordert diese Datei Schriften von fonts.gstatic.com. Sie wissen nicht, welche spezifischen Schriftdateien von fonts.gstatic.com Sie benötigen dies, bis die CSS-Datei geladen ist. Daher können wir im Voraus nur eine vorläufige Verbindung herstellen.

Verwenden Sie dieses Tag, um einige externe Skripte oder Stile etwas zu beschleunigen durch die vorzeitige Verbindungseinrichtung.

Beachten Sie ähnliche Eigenschaften unter <link rel= "dns-prefetch"/> und <link rel= "preconnect">. Es macht normalerweise keinen Sinn, sie zusammen für eine Domain zu verwenden: <link rel= "preconnect"> ist bereits enthalten <link rel= "dns-prefetch"/> und vieles mehr. Dies kann in zwei Fällen gerechtfertigt werden:

Sie möchten alte Browser unterstützen.. <link rel= "dns-prefetch" /> wird unterstützt ab IE10 und Safari 5. <link rel= "preconnect"> wurde eine Zeit lang in Chrome und Firefox unterstützt, wurde aber erst in Safari in 11.1 hinzugefügt und wird nach wie vor in IE/Edge nicht unterstützt.. Wenn Sie diese Browser unterstützen müssen, verwenden Sie <link rel= "dns-prefetch" /> als Fallback für <link rel= "preconnect">.

Sie möchten die Verbindung zu mehr als 4-6 Domains beschleunigen.. Das Tag <link rel= "preconnect"> sollte nicht mit mehr als 4-6 Domains verwendet werden, da das Herstellen und Aufrechterhalten einer Verbindung eine kostspielige Angelegenheit ist. <link rel= "dns-prefetch" /> benötigt weniger Ressourcen, verwenden Sie es daher bei Bedarf.

Details

einen optionalen Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen, und könnte daher DNS-Resolution möglicherweise nicht durchführen, beispielsweise wenn es viele solcher Tags auf der Seite gibt oder aus einem anderen Grund.

Was ist DNS. Jeder Server im Internet hat eine eindeutige IP-Adresse, die wie folgt aussieht 216.58.215.78. In der Adresszeile des Browsers wird normalerweise der Name der Website eingegeben (zum Beispiel google.com), während DNS-Server (Domain Name System) ihn mit der IP-Adresse des Servers (216.58.215.78).

) verknüpfen. Um die IP-Adresse zu bestimmen, muss der Browser eine Abfrage an den DNS-Server senden. Dies dauert in der Regel 20–120 ms, wenn man sich mit einer neuen externen Domain verbindet.

DNS wird zwischengespeichert, wenn auch nicht sehr zuverlässig. Einige Betriebssysteme und Browser speichern DNS-Abfragen zwischen: Dies spart Zeit bei wiederholten Anfragen, aber man kann sich nicht auf das Caching verlassen. Unter Linux funktioniert es normalerweise gar nicht. Chrome hat einen DNS-Cache, der jedoch nur eine Minute lang besteht. Windows speichert DNS-Antworten für fünf Tage.

prerender

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

Trotz der außergewöhnlichen Effizienz dieses Tags (oder gerade wegen ihr) wird es im Jahr 2019 <link rel= "prerender"> von den gängigen Browsern schlecht unterstützt. Weitere Informationen finden Sie unten.

Syntax

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

href zeigt die URL an, für die Sie das Rendering im Hintergrund starten möchten.

Wann verwenden

Wenn Sie sich wirklich sicher sind, dass der Benutzer auf eine bestimmte Seite wechselt. Wenn Sie einen „Tunnel“ haben, bei dem 70 % der Besucher der Seite A auf die Seite B wechseln, dann <link rel= "prerender"> hilft das auf Seite A, Seite B sehr schnell anzuzeigen.

Missbrauchen Sie diesen Tag nicht,. Pre-rendering kann in Bezug auf Datenverkehr und Speicher extrem teuer sein. Verwenden Sie es daher nicht <link rel= "prerender"> für mehr als eine Seite.

Details

einen optionalen Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie ignorieren, beispielsweise bei einer langsamen Verbindung oder unzureichendem freiem Speicher.

Um Speicher zu sparen Chrome führt kein vollständiges Rendering durch, und nur das Preloading von NoState. Das bedeutet, dass Chrome die Seite und alle ihre Ressourcen lädt, aber kein Rendering durchführt und kein JavaScript ausführt.

Firefox und Safari unterstützen dieses Tag überhaupt nicht. Das verstößt nicht gegen die Spezifikation, da Browser nicht verpflichtet sind, diese Anweisung auszuführen; es ist jedoch dennoch bedauerlich. Der Implementierungsfehler in Firefox besteht seit sieben Jahren. Es gibt Berichte, dass auch Safari dieses Tag nicht unterstützt.

Zusammenfassung

Verwenden Sie:

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

Quelle: habr.com