ProHoster > Preload, prefetch und andere Tags

Preload, prefetch und andere Tags

Ja Es gibt viele Möglichkeiten zur Steigerung der Webleistung. Eine davon ist das Vorladen von Inhalten, die spÀter benötigt werden. Pre-Fetching von CSS, das Vorladen einer kompletten Seite oder das Auflösen von Domainnamen. Wir erledigen alles im Voraus und zeigen das Ergebnis dann sofort an! Klingt cool.

Noch cooler ist, dass dies sehr einfach umzusetzen ist. FĂŒnf <link rel>-Tags geben dem Browser den Befehl 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" />


Lassen Sie uns kurz erklÀren, was sie tun und wann man sie einsetzen sollte.

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

preload

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

Der Browser macht nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgefĂŒhrt, Stylesheets werden nicht angewendet. Die Ressource wird einfach im Cache gespeichert und sofort auf Anfrage bereitgestellt.

Syntax

<link rel="preload" href="/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 Skripte,
  • font fĂŒr Schriftarten,
  • fetch fĂŒr Ressourcen, die ĂŒber 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 die Ladezeiten zu planen.

Wann man verwenden sollte

Verwenden Sie das Preloading, 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 wird erst nach dem Laden und Parsen von index.cssbeginnen zu laden. Um nicht so lange warten zu mĂŒssen, können Sie die Schriftart frĂŒher mit <link rel="preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Wenn Sie Ihre Stile nach dem Ansatz Critical CSS in zwei Teile unterteilen, kritische (fĂŒr das sofortige Rendern) und nicht-kritische:
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS, das das Herunterladen der nicht-kritischen Stile startet */
loadCSS('/app/non-critical.css');
</script>

    Bei diesem Ansatz werden nicht kritische Stile erst beim Start von JavaScript geladen, was einige Sekunden nach dem Rendern geschehen kann. Verwenden Sie stattdessen <link rel="preload">, um das Laden frĂŒher zu starten:

    /* Inline kritische Stile */

Missbrauchen Sie das Preloading nicht. Wenn alles wahllos geladen wird, beschleunigt sich die Website nicht auf magische Weise, im Gegenteil, das könnte verhindern, dass der Browser effizient plant.

Verwechseln Sie dies nicht mit Prefetching. Verwenden Sie <link rel="preload">, wenn Sie die Ressource nicht sofort nach dem Laden der Seite benötigen. Wenn sie spĂ€ter benötigt wird, beispielsweise fĂŒr die nĂ€chste Seite, verwenden Sie <link rel= "prefetch">.

Details

Dies ist ein obligatorisches Tag fĂŒr die AusfĂŒhrung im Browser (sofern unterstĂŒtzt), im Gegensatz zu allen anderen -Tags, die mit dem Vorabrufen verbunden sind. Der Browser ist verpflichtet, die Ressource, die in <link rel="preload">, angegeben ist, herunterzuladen. In anderen FĂ€llen kann er das Preloading ignorieren, beispielsweise bei langsamen Verbindungen.

PrioritĂ€ten. Verschiedenen Ressourcen (Stile, Skripte, Schriftarten usw.) weisen Browser normalerweise unterschiedliche PrioritĂ€ten zu, um in erster Linie die wichtigsten Ressourcen zu laden. 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.

Preload, prefetch und andere Tags

prefetch

<link rel= "prefetch"> veranlasst den Browser, die Ressource (z. B. ein Skript oder ein Stylesheet) im Hintergrund herunterzuladen und zu cachen. Der Download erfolgt mit niedriger PrioritĂ€t, sodass er wichtigeren Ressourcen nicht im Wege steht. Dies ist nĂŒtzlich, wenn die Ressource auf der nĂ€chsten Seite benötigt wird und Sie sie im Voraus cachen möchten.

Auch hier tut der Browser nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgefĂŒhrt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und sofort auf Anfrage bereitgestellt.

Syntax

<link rel="prefetch" href="/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 Skripte,
  • font fĂŒr Schriftarten,
  • fetch fĂŒr Ressourcen, die ĂŒber fetch() oder XMLHttpRequest,
  • vollstĂ€ndige Liste siehe auf MDN.

Es ist wichtig, das Attribut anzugeben, as – dies hilft dem Browser, PrioritĂ€ten richtig zu setzen und das Laden zu planen.

Wann man verwenden sollte

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

  • Sie betreiben einen Online-Shop und 40 % der Nutzer verlassen die Startseite und gehen zur Produktseite. Verwenden Sie <link rel= "prefetch">, indem Sie CSS- und JS-Dateien fĂŒr das Rendern von Produktseiten laden.
  • Sie haben eine Single-Page-Anwendung, bei der verschiedene Seiten unterschiedliche Pakete laden. Wenn ein Benutzer eine Seite besucht, können die Pakete fĂŒr alle Seiten, auf die diese verlinkt, im Voraus geladen werden.

Dieser Tag kann wahrscheinlich gefahrlos in beliebigem Umfang verwendet werden. Browser planen normalerweise das Vorabladen mit niedriger PrioritÀt, sodass es niemanden stört. Beachten Sie nur, dass die Daten des Benutzers konsumiert werden, was kostenpflichtig sein kann.

Nicht fĂŒr dringende Anfragen. Verwenden Sie <link rel= "prefetch">, wenn die Ressource in ein paar 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, er kann sie ignorieren, zum Beispiel bei einer langsamen Verbindung.

PrioritĂ€t in Chrome. In Chrome <link rel= "prefetch"> wird normalerweise mit minimaler PrioritĂ€t ausgefĂŒhrt (siehe 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 Verbindungsaufnahme in der Zukunft beschleunigen möchten.

Der Browser sollte eine Verbindung herstellen, wenn er Ressourcen von einer neuen Drittanbieter-Domain abruft. Zum Beispiel, wenn Schriftarten von Google Fonts, React von einem CDN oder eine JSON-Antwort vom API-Server abgerufen werden.

Die Einrichtung einer neuen Verbindung dauert normalerweise mehrere hundert Millisekunden. Sie erfolgt einmal, benötigt jedoch dennoch Zeit. Wenn Sie die Verbindung im Voraus hergestellt haben, sparen Sie Zeit und laden die Ressourcen von dieser Domain schneller.

Syntax

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

href weist auf den Domainnamen hin, fĂŒr den die IP-Adresse bestimmt werden muss. Sie können sie mit einem PrĂ€fix angeben (https://domain.com) oder ohne (//domain.com).

Wann man verwenden sollte

Verwenden Sie es fĂŒr Domains, die bald benötigt werden um von dort wichtige Stile, Skripte oder Bilder zu laden, aber Sie kennen den URL der Ressource noch nicht. Zum Beispiel:

  • Ihre Anwendung wird auf my-app.com gehostet und fĂŒhrt AJAX-Anfragen an api.my-app.com: Sie kennen die spezifischen Anfragen nicht im Voraus, da sie dynamisch aus JS generiert werden. Hier ist die Verwendung des Tags zur Vorverbindung zur Domain durchaus angemessen.
  • Ihre Anwendung wird auf my-app.com und verwendet Google Fonts. Sie werden in zwei Etappen geladen: Zuerst wird die CSS-Datei von der Domain fonts.googleapis.com, dann ruft diese Datei die Schriften von fonts.gstatic.com. Sie können nicht wissen, welche spezifischen Schriftdateien aus fonts.gstatic.com Sie benötigen dies, bis Sie die CSS-Datei hochgeladen haben, daher können wir vorab nur eine vorlĂ€ufige Verbindung herstellen.

Verwenden Sie dieses Tag, um ein externes Skript oder Stylesheet etwas zu beschleunigen. durch die vorlÀufige Verbindungseinrichtung.

Missbrauchen Sie das nicht. Die Einrichtung und Aufrechterhaltung einer Verbindung ist sowohl fĂŒr den Client als auch fĂŒr den Server eine teure Angelegenheit. Nutzen Sie dieses Tag maximal fĂŒr 4-6 Domains.

Details

einen optionalen Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie ignorieren, wenn beispielsweise bereits viele Verbindungen bestehen oder aus einem anderen Grund.

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

  • DNS-Auflösung. Die IP-Adresse des Servers zu finden (216.58.215.78) fĂŒr den angegebenen Domainnamen (google.com).
  • TCP-Handshake. Paket Austausch (Client → Server → Client), um eine TCP-Verbindung mit dem Server zu initiieren.
  • TLS-Handshake (nur fĂŒr HTTPS-Websites). Zwei Runden des Austauschs von Paketen (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 weit gekommen.

dns-prefetch

<link rel= "dns-prefetch"> fordert den Browser auf, die DNS-Auflösung fĂŒr die Domain im Voraus durchzufĂŒhren, wenn Sie sich bald damit verbinden und die anfĂ€ngliche Verbindung beschleunigen möchten.

Der Browser muss die IP-Adresse der Domain ermitteln, wenn er Ressourcen von einer neuen externen Domain abrufen möchte. Zum Beispiel beim Laden von Google Fonts, React von einem CDN oder beim Anfordern einer JSON-Antwort von einem API-Server.

Die Auflösung des DNS-Eintrags fĂŒr jede neue Domain dauert normalerweise etwa 20–120 ms. Dies betrifft nur das Laden der ersten Ressource von dieser Domain, stellt aber dennoch eine Verzögerung dar. Wenn die DNS-Auflösung im Voraus erfolgt, können wir Zeit sparen und die Ressource schneller laden.

Syntax

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

href zeigt auf den Domainnamen, fĂŒr den die IP-Adresse festgelegt werden soll. Sie können mit einem PrĂ€fix angeben (https://domain.com) oder ohne (//domain.com).

Wann man verwenden sollte

Verwenden Sie es fĂŒr Domains, die bald benötigt werden um von dort Ressourcen zu laden, von denen der Browser im Voraus nichts weiß. Zum Beispiel:

  • Ihre Anwendung wird auf my-app.com gehostet und fĂŒhrt AJAX-Anfragen an api.my-app.com: Sie kennen die spezifischen Anfragen nicht im Voraus, da sie dynamisch aus JS generiert werden. Hier ist die Verwendung des Tags zur Vorverbindung zur Domain durchaus angemessen.
  • Ihre Anwendung wird auf my-app.com, und nutzt Google Fonts. Diese werden in zwei Schritten geladen: Zuerst wird die CSS-Datei von der Domain geladen, fonts.googleapis.com, dann ruft diese Datei die Schriften von fonts.gstatic.com. Sie können nicht wissen, welche spezifischen Schriftdateien aus fonts.gstatic.com Sie benötigen dies, bis Sie die CSS-Datei hochgeladen haben, daher können wir vorab nur eine vorlĂ€ufige Verbindung herstellen.

Verwenden Sie dieses Tag, um ein externes Skript oder Stylesheet etwas zu beschleunigen. durch die vorlÀufige Verbindungseinrichtung.

Beachten Sie Ă€hnliche Merkmale auf <link rel= "dns-prefetch"/> und <link rel= "preconnect">. Die gleichzeitige Verwendung beider fĂŒr eine Domain ergibt normalerweise keinen Sinn: <link rel= "preconnect"> beinhaltet bereits <link rel= "dns-prefetch"/> und vieles mehr. Dies kann in zwei FĂ€llen gerechtfertigt werden:

  • Sie möchten Ă€ltere Browser unterstĂŒtzen. <link rel= "dns-prefetch" /> wird unterstĂŒtzt seit IE10 und Safari 5. <link rel= "preconnect"> wurde eine Zeit lang in Chrome und Firefox unterstĂŒtzt, wurde jedoch erst in Safari 11.1 hinzugefĂŒgt und wird weiterhin nicht in IE/Edge unterstĂŒtzt.. Wenn Sie diese Browser unterstĂŒtzen mĂŒssen, verwenden Sie <link rel= "dns-prefetch" /> als Alternative 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 die Einrichtung und Aufrechterhaltung einer Verbindung eine kostspielige Operation ist. <link rel= "dns-prefetch" /> verbraucht weniger Ressourcen, nutzen Sie es also, falls nötig.

Details

einen optionalen Tag. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen, daher kann es passieren, dass er das DNS-Resolving nicht durchfĂŒhrt, zum Beispiel wenn auf der Seite viele solcher Tags vorhanden sind oder in einem anderen Fall.

Was ist DNS. Jedes Server im Internet hat eine einzigartige IP-Adresse, die wie folgt aussieht 216.58.215.78. In die Adresszeile des Browsers wird normalerweise der Name der Website eingegeben (zum Beispiel google.com), und die DNS-Server (Domain Name System) verknĂŒpfen ihn mit der IP-Adresse des Servers (216.58.215.78).

. Um die IP-Adresse zu bestimmen, muss der Browser eine Anfrage an den DNS-Server senden. Dies dauert 20–120 ms, wenn eine Verbindung zu einer neuen Drittanbieter-Domain hergestellt wird.

DNS wird zwar zwischengespeichert, aber nicht sehr zuverlĂ€ssig.. Einige Betriebssysteme und Browser zwischenspeichern DNS-Anfragen: Das spart Zeit bei wiederholten Anfragen, aber auf das Caching ist nicht zu verlassen. In Linux funktioniert es normalerweise ĂŒberhaupt nicht. Chrome hat einen DNS-Cache, aber dieser lebt nur eine Minute. Windows speichert DNS-Antworten fĂŒnf Tage lang im Cache.

prerender

<link rel= "prerender"> fordert den Browser auf, eine URL zu laden und sie in einem unsichtbaren Tab anzuzeigen. Wenn der Benutzer auf den Link klickt, sollte die Seite sofort angezeigt werden. Dies ist nĂŒtzlich, wenn Sie sich 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"> schlecht von den gĂ€ngigen Browsern unterstĂŒtzt. Weitere Details finden Sie unter 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 man verwenden sollte

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

Missbrauchen Sie das nicht. Vorab-Rendering ist sehr teuer in Bezug auf Traffic und Speicher. Verwenden Sie nicht <link rel= "prerender"> mehr als fĂŒr eine einzige Seite.

Details

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

Um Speicher zu sparen fĂŒhrt Chrome kein vollstĂ€ndiges Rendering durch, und sondern nur NoState-Vorladen.. 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 diese Anweisung nicht befolgen mĂŒssen; es ist jedoch dennoch bedauerlich. Ein Implementierungsfehler in Firefox wurde ĂŒber einen Zeitraum von sieben Jahren entdeckt. Es gibt Berichte, dass Safari auch dieses Tag nicht unterstĂŒtzt..

Zusammenfassung

Verwenden Sie:

  • <link rel="preload"> — wenn Sie in ein paar Sekunden eine Ressource benötigen
  • <link rel= "prefetch"> — wenn Sie eine 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 alte Browser)
  • <link rel= "prerender"> — wenn Sie sicher sind, dass die Benutzer auf eine bestimmte Seite wechseln werden und deren Anzeige beschleunigen möchten

Quelle: habr.com

ZuverlĂ€ssiges Hosting fĂŒr Websites mit DDoS-Schutz kaufen, VPS VDS Server đŸ”„ ZuverlĂ€ssiges Hosting fĂŒr Websites mit DDoS-Schutz kaufen, VPS VDS Server - ProHoster