{"id":30281,"date":"2019-10-31T21:34:39","date_gmt":"2019-10-31T18:34:39","guid":{"rendered":"https:\/\/prohoster.info\/blog\/preload-prefetch-i-drugie-tegi\/"},"modified":"2019-10-31T21:34:39","modified_gmt":"2019-10-31T18:34:39","slug":"preload-prefetch-i-drugie-tegi","status":"publish","type":"post","link":"https:\/\/prohoster.info\/de\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch und andere Tags","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Ja <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Es gibt viele M\u00f6glichkeiten zur Steigerung der Webleistung<\/a><\/noindex>. Eine davon ist das Vorladen von Inhalten, die sp\u00e4ter ben\u00f6tigt werden. Pre-Fetching von CSS, das Vorladen einer kompletten Seite oder das Aufl\u00f6sen von Domainnamen. Wir erledigen alles im Voraus und zeigen das Ergebnis dann sofort an! Klingt cool.<\/p>\n<p>Noch cooler ist, dass dies sehr einfach umzusetzen ist. F\u00fcnf &lt;link rel&gt;-Tags geben dem Browser den Befehl zu vorzeitigen Ma\u00dfnahmen:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;\n&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;\n\n&lt;link rel=\"preconnect\" href=\"https:\/\/example.com\" \/&gt;\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/example.com\" \/&gt;\n\n&lt;link rel=\"prerender\" href=\"https:\/\/example.com\/about.html\" \/&gt;<\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nLassen Sie uns kurz erkl\u00e4ren, was sie tun und wann man sie einsetzen sollte.<\/p>\n<p>Gehe zu: <noindex><a rel=\"nofollow\" href=\"#preload\">preload<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prefetch\">prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#preconnect\">preconnect<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#dns-prefetch\">dns-prefetch<\/a><\/noindex> \u00b7 <noindex><a rel=\"nofollow\" href=\"#prerender\">prerender<\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preload\"><\/a><\/noindex><\/p>\n<h1>preload<\/h1>\n<p>\n<code>&lt;link rel=\"preload\"&gt;<\/code> weist den Browser an, die Ressource so schnell wie m\u00f6glich 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\u00f6tigt wird \u2013 und Sie den Prozess beschleunigen m\u00f6chten.<\/p>\n<p>Der Browser macht nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgef\u00fchrt, Stylesheets werden nicht angewendet. Die Ressource wird einfach im Cache gespeichert und sofort auf Anfrage bereitgestellt.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> verweist auf die Ressource, die Sie herunterladen m\u00f6chten.<\/p>\n<p><code> as<\/code> kann alles sein, was im Browser heruntergeladen werden kann:<\/p>\n<ul>\n<li><code>style<\/code> f\u00fcr Stylesheets,\n<\/li>\n<li><code>script<\/code> f\u00fcr Skripte,\n<\/li>\n<li><code>font<\/code> f\u00fcr Schriftarten,\n<\/li>\n<li><code>fetch<\/code> f\u00fcr Ressourcen, die \u00fcber <code>fetch()<\/code> oder <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>vollst\u00e4ndige Liste siehe <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">auf MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nEs ist wichtig, das Attribut anzugeben, <code>as<\/code> es hilft dem Browser, die Priorit\u00e4ten richtig zu setzen und die Ladezeiten zu planen.<\/p>\n<h3>Wann man verwenden sollte<\/h3>\n<p>\nVerwenden Sie das Preloading, wenn die Ressource in naher Zukunft ben\u00f6tigt wird. Zum Beispiel:<\/p>\n<ul>\n<li>Nicht-standardm\u00e4\u00dfige Schriftarten aus einer externen Datei:\n<pre><code class=\"xml\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"index.css\" \/&gt;\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nStandardm\u00e4\u00dfig <code>comic-sans.woff2<\/code> wird erst nach dem Laden und Parsen von <code>index.css<\/code>beginnen zu laden. Um nicht so lange warten zu m\u00fcssen, k\u00f6nnen Sie die Schriftart fr\u00fcher mit <code>&lt;link rel=\"preload\"&gt;<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"comic-sans.woff2\" as=\"font\" \/&gt;<\/code><\/pre>\n<\/li>\n<li>Wenn Sie Ihre Stile nach dem Ansatz <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> in zwei Teile unterteilen, kritische (f\u00fcr das sofortige Rendern) und nicht-kritische:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Inlined critical styles *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* Custom JS, das das Herunterladen der nicht-kritischen Stile startet *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nBei diesem Ansatz werden nicht kritische Stile erst beim Start von JavaScript geladen, was einige Sekunden nach dem Rendern geschehen kann. Verwenden Sie stattdessen <code>&lt;link rel=\"preload\"&gt;<\/code>, um das Laden fr\u00fcher zu starten:<\/p>\n<pre><code class=\"xml\">\/* Inline kritische Stile *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Missbrauchen Sie das Preloading nicht<\/b>. Wenn alles wahllos geladen wird, beschleunigt sich die Website nicht auf magische Weise, im Gegenteil, das k\u00f6nnte verhindern, dass der Browser effizient plant.<\/p>\n<p><b> Verwechseln Sie dies nicht mit Prefetching<\/b>. Verwenden Sie <code>&lt;link rel=\"preload\"&gt;<\/code>, wenn Sie die Ressource nicht sofort nach dem Laden der Seite ben\u00f6tigen. Wenn sie sp\u00e4ter ben\u00f6tigt wird, beispielsweise f\u00fcr die n\u00e4chste Seite, verwenden Sie <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>Dies ist ein obligatorisches Tag<\/b> f\u00fcr die Ausf\u00fchrung im Browser (sofern unterst\u00fctzt), im Gegensatz zu allen anderen -Tags, die mit dem Vorabrufen verbunden sind. Der Browser ist verpflichtet, die Ressource, die in <code>&lt;link rel=\"preload\"&gt;<\/code>, angegeben ist, herunterzuladen. In anderen F\u00e4llen kann er das Preloading ignorieren, beispielsweise bei langsamen Verbindungen.<\/p>\n<p><b>Priorit\u00e4ten<\/b>. Verschiedenen Ressourcen (Stile, Skripte, Schriftarten usw.) weisen Browser normalerweise unterschiedliche Priorit\u00e4ten zu, um in erster Linie die wichtigsten Ressourcen zu laden. In diesem Fall bestimmt der Browser die Priorit\u00e4t anhand des Attributs <code>as<\/code>. F\u00fcr den Chrome-Browser k\u00f6nnen Sie die <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">vollst\u00e4ndige Priorit\u00e4tstabelle<\/a><\/noindex>.<\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/habrastorage.org\/webt\/i2\/bf\/vi\/i2bfvijtqhb3wt6cnkcskwc55ew.png\"><img decoding=\"async\" alt=\"Preload, prefetch und andere Tags\" src=\"\/wp-content\/uploads\/2019\/03\/3d66bce7749d647e16d842958f56ff3c.png\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prefetch\"><\/a><\/noindex><\/p>\n<h1>prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"prefetch\"&gt;<\/code> veranlasst den Browser, die Ressource (z. B. ein Skript oder ein Stylesheet) im Hintergrund herunterzuladen und zu cachen. Der Download erfolgt mit niedriger Priorit\u00e4t, sodass er wichtigeren Ressourcen nicht im Wege steht. Dies ist n\u00fctzlich, wenn die Ressource auf der n\u00e4chsten Seite ben\u00f6tigt wird und Sie sie im Voraus cachen m\u00f6chten.<\/p>\n<p>Auch hier tut der Browser nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgef\u00fchrt, Stylesheets werden nicht angewendet. Die Ressource wird einfach zwischengespeichert und sofort auf Anfrage bereitgestellt.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> verweist auf die Ressource, die Sie herunterladen m\u00f6chten.<\/p>\n<p><code> as<\/code> kann alles sein, was im Browser heruntergeladen werden kann:<\/p>\n<ul>\n<li><code>style<\/code> f\u00fcr Stylesheets,\n<\/li>\n<li><code>script<\/code> f\u00fcr Skripte,\n<\/li>\n<li><code>font<\/code> f\u00fcr Schriftarten,\n<\/li>\n<li><code>fetch<\/code> f\u00fcr Ressourcen, die \u00fcber <code>fetch()<\/code> oder <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>vollst\u00e4ndige Liste siehe <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">auf MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nEs ist wichtig, das Attribut anzugeben, <code>as<\/code>\u00a0\u2013 dies hilft dem Browser, Priorit\u00e4ten richtig zu setzen und das Laden zu planen.<\/p>\n<h3>Wann man verwenden sollte<\/h3>\n<p>\n<b>Um Ressourcen von anderen Seiten herunterzuladen<\/b>, wenn Sie eine Ressource von einer anderen Seite ben\u00f6tigen und sie vorab laden m\u00f6chten, um das Rendern dieser Seite sp\u00e4ter zu beschleunigen. Zum Beispiel:<\/p>\n<ul>\n<li>Sie betreiben einen Online-Shop und 40 % der Nutzer verlassen die Startseite und gehen zur Produktseite. Verwenden Sie <code>&lt;link rel= \"prefetch\"&gt;<\/code>, indem Sie CSS- und JS-Dateien f\u00fcr das Rendern von Produktseiten laden.\n<\/li>\n<li>Sie haben eine Single-Page-Anwendung, bei der verschiedene Seiten unterschiedliche Pakete laden. Wenn ein Benutzer eine Seite besucht, k\u00f6nnen die Pakete f\u00fcr alle Seiten, auf die diese verlinkt, im Voraus geladen werden.<\/li>\n<\/ul>\n<p>\n<b>Dieser Tag kann wahrscheinlich gefahrlos in beliebigem Umfang verwendet werden<\/b>. Browser planen normalerweise das Vorabladen mit niedriger Priorit\u00e4t, sodass es niemanden st\u00f6rt. Beachten Sie nur, dass die Daten des Benutzers konsumiert werden, was kostenpflichtig sein kann.<\/p>\n<p><b>Nicht f\u00fcr dringende Anfragen<\/b>. Verwenden Sie <code>&lt;link rel= \"prefetch\"&gt;<\/code>, wenn die Ressource in ein paar Sekunden ben\u00f6tigt wird. In diesem Fall verwenden Sie <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>einen optionalen Tag<\/b>. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen, er kann sie ignorieren, zum Beispiel bei einer langsamen Verbindung.<\/p>\n<p><b>Priorit\u00e4t in Chrome<\/b>. In Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> wird normalerweise mit minimaler Priorit\u00e4t ausgef\u00fchrt (siehe <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">vollst\u00e4ndige Priorit\u00e4tstabelle<\/a><\/noindex>), das hei\u00dft, nachdem alles andere geladen wurde.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"preconnect\"><\/a><\/noindex><\/p>\n<h1>preconnect<\/h1>\n<p>\n<code>&lt;link rel= \"preconnect\"&gt;<\/code> fordert den Browser auf, sich im Voraus mit der Domain zu verbinden, wenn Sie die Verbindungsaufnahme in der Zukunft beschleunigen m\u00f6chten.<\/p>\n<p>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.<\/p>\n<p>Die Einrichtung einer neuen Verbindung dauert normalerweise mehrere hundert Millisekunden. Sie erfolgt einmal, ben\u00f6tigt jedoch dennoch Zeit. Wenn Sie die Verbindung im Voraus hergestellt haben, sparen Sie Zeit und laden die Ressourcen von dieser Domain schneller.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"preconnect\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> weist auf den Domainnamen hin, f\u00fcr den die IP-Adresse bestimmt werden muss. Sie k\u00f6nnen sie mit einem Pr\u00e4fix angeben (<code>https:\/\/domain.com<\/code>) oder ohne (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wann man verwenden sollte<\/h3>\n<p>\n<b>Verwenden Sie es f\u00fcr Domains, die bald ben\u00f6tigt werden<\/b> um von dort wichtige Stile, Skripte oder Bilder zu laden, aber Sie kennen den URL der Ressource noch nicht. Zum Beispiel:<\/p>\n<ul>\n<li>Ihre Anwendung wird auf <code>my-app.com<\/code> gehostet und f\u00fchrt AJAX-Anfragen an <code>api.my-app.com<\/code>: 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.\n<\/li>\n<li>Ihre Anwendung wird auf <code>my-app.com<\/code> und verwendet Google Fonts. Sie werden in zwei Etappen geladen: Zuerst wird die CSS-Datei von der Domain <code>fonts.googleapis.com<\/code>, dann ruft diese Datei die Schriften von <code>fonts.gstatic.com<\/code>. Sie k\u00f6nnen nicht wissen, welche spezifischen Schriftdateien aus <code>fonts.gstatic.com<\/code> Sie ben\u00f6tigen dies, bis Sie die CSS-Datei hochgeladen haben, daher k\u00f6nnen wir vorab nur eine vorl\u00e4ufige Verbindung herstellen.<\/li>\n<\/ul>\n<p>\n<b>Verwenden Sie dieses Tag, um ein externes Skript oder Stylesheet etwas zu beschleunigen.<\/b> durch die vorl\u00e4ufige Verbindungseinrichtung.<\/p>\n<p><b>Missbrauchen Sie das nicht<\/b>. Die Einrichtung und Aufrechterhaltung einer Verbindung ist sowohl f\u00fcr den Client als auch f\u00fcr den Server eine teure Angelegenheit. Nutzen Sie dieses Tag maximal f\u00fcr 4-6 Domains.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>einen optionalen Tag<\/b>. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie ignorieren, wenn beispielsweise bereits viele Verbindungen bestehen oder aus einem anderen Grund.<\/p>\n<p><b>Was der Verbindungsprozess umfasst<\/b>. Um sich mit jeder Website zu verbinden, muss der Browser die folgenden Schritte ausf\u00fchren:<\/p>\n<ul>\n<li><i>DNS-Aufl\u00f6sung<\/i>. Die IP-Adresse des Servers zu finden (<code>216.58.215.78<\/code>) f\u00fcr den angegebenen Domainnamen (<code>google.com<\/code>).<\/li>\n<li><i>TCP-Handshake<\/i>. Paket Austausch (Client \u2192 Server \u2192 Client), um eine TCP-Verbindung mit dem Server zu initiieren.<\/li>\n<li><i>TLS-Handshake (nur f\u00fcr HTTPS-Websites)<\/i>. Zwei Runden des Austauschs von Paketen (Client \u2192 Server \u2192 Client \u2192 Server \u2192 Client), um eine sichere TLS-Sitzung zu initiieren.<\/li>\n<\/ul>\n<p>\nHinweis: HTTP\/3 wird den Handshake-Mechanismus verbessern und beschleunigen, aber es ist noch weit gekommen.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"dns-prefetch\"><\/a><\/noindex><\/p>\n<h1>dns-prefetch<\/h1>\n<p>\n<code>&lt;link rel= \"dns-prefetch\"&gt;<\/code> fordert den Browser auf, die DNS-Aufl\u00f6sung f\u00fcr die Domain im Voraus durchzuf\u00fchren, wenn Sie sich bald damit verbinden und die anf\u00e4ngliche Verbindung beschleunigen m\u00f6chten.<\/p>\n<p>Der Browser muss die IP-Adresse der Domain ermitteln, wenn er Ressourcen von einer neuen externen Domain abrufen m\u00f6chte. Zum Beispiel beim Laden von Google Fonts, React von einem CDN oder beim Anfordern einer JSON-Antwort von einem API-Server.<\/p>\n<p>Die Aufl\u00f6sung des DNS-Eintrags f\u00fcr jede neue Domain dauert normalerweise etwa 20\u2013120 ms. Dies betrifft nur das Laden der ersten Ressource von dieser Domain, stellt aber dennoch eine Verz\u00f6gerung dar. Wenn die DNS-Aufl\u00f6sung im Voraus erfolgt, k\u00f6nnen wir Zeit sparen und die Ressource schneller laden.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"dns-prefetch\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> zeigt auf den Domainnamen, f\u00fcr den die IP-Adresse festgelegt werden soll. Sie k\u00f6nnen mit einem Pr\u00e4fix angeben (<code>https:\/\/domain.com<\/code>) oder ohne (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wann man verwenden sollte<\/h3>\n<p>\n<b>Verwenden Sie es f\u00fcr Domains, die bald ben\u00f6tigt werden<\/b> um von dort Ressourcen zu laden, von denen der Browser im Voraus nichts wei\u00df. Zum Beispiel:<\/p>\n<ul>\n<li>Ihre Anwendung wird auf <code>my-app.com<\/code> gehostet und f\u00fchrt AJAX-Anfragen an <code>api.my-app.com<\/code>: 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.\n<\/li>\n<li>Ihre Anwendung wird auf <code>my-app.com<\/code>, und nutzt Google Fonts. Diese werden in zwei Schritten geladen: Zuerst wird die CSS-Datei von der Domain geladen, <code>fonts.googleapis.com<\/code>, dann ruft diese Datei die Schriften von <code>fonts.gstatic.com<\/code>. Sie k\u00f6nnen nicht wissen, welche spezifischen Schriftdateien aus <code>fonts.gstatic.com<\/code> Sie ben\u00f6tigen dies, bis Sie die CSS-Datei hochgeladen haben, daher k\u00f6nnen wir vorab nur eine vorl\u00e4ufige Verbindung herstellen.<\/li>\n<\/ul>\n<p>\n<b>Verwenden Sie dieses Tag, um ein externes Skript oder Stylesheet etwas zu beschleunigen.<\/b> durch die vorl\u00e4ufige Verbindungseinrichtung.<\/p>\n<blockquote><p>Beachten Sie \u00e4hnliche Merkmale auf <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> und <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Die gleichzeitige Verwendung beider f\u00fcr eine Domain ergibt normalerweise keinen Sinn: <code>&lt;link rel= \"preconnect\"&gt;<\/code> beinhaltet bereits <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> und vieles mehr. Dies kann in zwei F\u00e4llen gerechtfertigt werden:<\/p>\n<ul>\n<li><i>Sie m\u00f6chten \u00e4ltere Browser unterst\u00fctzen<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> wird unterst\u00fctzt <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">seit IE10 und Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> wurde eine Zeit lang in Chrome und Firefox unterst\u00fctzt, wurde jedoch erst in Safari 11.1 hinzugef\u00fcgt und <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">wird weiterhin nicht in IE\/Edge unterst\u00fctzt.<\/a><\/noindex>. Wenn Sie diese Browser unterst\u00fctzen m\u00fcssen, verwenden Sie <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> als Alternative f\u00fcr <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Sie m\u00f6chten die Verbindung zu mehr als 4\u20136 Domains beschleunigen.<\/i>. Das Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> sollte nicht mit mehr als 4\u20136 Domains verwendet werden, da die Einrichtung und Aufrechterhaltung einer Verbindung eine kostspielige Operation ist. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> verbraucht weniger Ressourcen, nutzen Sie es also, falls n\u00f6tig.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Details<\/h3>\n<p>\n<b>einen optionalen Tag<\/b>. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen, daher kann es passieren, dass er das DNS-Resolving nicht durchf\u00fchrt, zum Beispiel wenn auf der Seite viele solcher Tags vorhanden sind oder in einem anderen Fall.<\/p>\n<p><b>Was ist DNS<\/b>. Jedes Server im Internet hat eine einzigartige IP-Adresse, die wie folgt aussieht <code>216.58.215.78<\/code>. In die Adresszeile des Browsers wird normalerweise der Name der Website eingegeben (zum Beispiel <code>google.com<\/code>), und die DNS-Server (Domain Name System) verkn\u00fcpfen ihn mit der IP-Adresse des Servers (<code>216.58.215.78<\/code>).<\/p>\n<p>. Um die IP-Adresse zu bestimmen, muss der Browser eine Anfrage an den DNS-Server senden. Dies dauert 20\u2013120 ms, wenn eine Verbindung zu einer neuen Drittanbieter-Domain hergestellt wird.<\/p>\n<p><b>DNS wird zwar zwischengespeichert, aber nicht sehr zuverl\u00e4ssig.<\/b>. 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 \u00fcberhaupt nicht. Chrome hat einen DNS-Cache, aber dieser lebt nur eine Minute. Windows speichert DNS-Antworten f\u00fcnf Tage lang im Cache.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"prerender\"><\/a><\/noindex><\/p>\n<h1>prerender<\/h1>\n<p>\n<code>&lt;link rel= \"prerender\"&gt;<\/code> 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\u00fctzlich, wenn Sie sich sicher sind, dass der Benutzer eine bestimmte Seite besuchen wird, und deren Anzeige beschleunigen m\u00f6chten.<\/p>\n<p>Trotz der au\u00dfergew\u00f6hnlichen Effizienz dieses Tags (oder gerade wegen ihr), wird es im Jahr 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> schlecht von den g\u00e4ngigen Browsern unterst\u00fctzt. Weitere Details finden Sie unter <noindex><a rel=\"nofollow\" href=\"#1\">unten<\/a><\/noindex>.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prerender\" href=\"https:\/\/my-app.com\/pricing\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> zeigt die URL an, f\u00fcr die Sie das Rendering im Hintergrund starten m\u00f6chten.<\/p>\n<h3>Wann man verwenden sollte<\/h3>\n<p>\n<b>Wenn Sie sich wirklich sicher sind, dass der Benutzer auf eine bestimmte Seite gehen wird.<\/b>. Wenn Sie einen \u201eTunnel\u201c haben, durch den 70% der Besucher von Seite A auf Seite B wechseln, dann <code>&lt;link rel= \"prerender\"&gt;<\/code> hilft es auf Seite A, Seite B sehr schnell anzuzeigen.<\/p>\n<p><b>Missbrauchen Sie das nicht<\/b>. Vorab-Rendering ist sehr teuer in Bezug auf Traffic und Speicher. Verwenden Sie nicht <code>&lt;link rel= \"prerender\"&gt;<\/code> mehr als f\u00fcr eine einzige Seite.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Details<\/h3>\n<p>\n<b>einen optionalen Tag<\/b>. Der Browser ist nicht verpflichtet, dieser Anweisung zu folgen und kann sie ignorieren, z.B. bei einer langsamen Verbindung oder unzureichendem Speicherplatz.<\/p>\n<p>Um Speicher zu sparen <b>f\u00fchrt Chrome kein vollst\u00e4ndiges Rendering durch<\/b>, und <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">sondern nur NoState-Vorladen.<\/a><\/noindex>. Das bedeutet, dass Chrome die Seite und alle ihre Ressourcen l\u00e4dt, aber kein Rendering durchf\u00fchrt und kein JavaScript ausf\u00fchrt.<\/p>\n<p>Firefox und Safari unterst\u00fctzen dieses Tag \u00fcberhaupt nicht. Das verst\u00f6\u00dft nicht gegen die Spezifikation, da Browser diese Anweisung nicht befolgen m\u00fcssen; es ist jedoch dennoch bedauerlich. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Ein Implementierungsfehler<\/a><\/noindex> in Firefox wurde \u00fcber einen Zeitraum von sieben Jahren entdeckt. Es gibt Berichte, dass Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">auch dieses Tag nicht unterst\u00fctzt.<\/a><\/noindex>.<\/p>\n<h1>Zusammenfassung<\/h1>\n<p>\nVerwenden Sie:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 wenn Sie in ein paar Sekunden eine Ressource ben\u00f6tigen\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 wenn Sie eine Ressource auf der n\u00e4chsten Seite ben\u00f6tigen\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 wenn Sie wissen, dass Sie bald eine Ressource ben\u00f6tigen, aber die vollst\u00e4ndige URL noch nicht kennen\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 \u00e4hnlich, wenn Sie wissen, dass Sie bald eine Ressource ben\u00f6tigen, aber die vollst\u00e4ndige URL noch nicht kennen (f\u00fcr alte Browser)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 wenn Sie sicher sind, dass die Benutzer auf eine bestimmte Seite wechseln werden und deren Anzeige beschleunigen m\u00f6chten<\/li>\n<\/ul>\n<p>Quelle: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/445264\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445\u00a0\u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041f\u0440\u0435\u0444\u0442\u0435\u0447\u0438\u043d\u0433 CSS, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u043d\u0433 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u0417\u0432\u0443\u0447\u0438\u0442 \u043a\u0440\u0443\u0442\u043e. \u0415\u0449\u0451 \u043a\u0440\u0443\u0447\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041f\u044f\u0442\u044c \u0442\u0435\u0433\u043e\u0432 &lt;link rel&gt; \u0434\u0430\u044e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: &lt;link rel=&#187;prefetch&#187; href=&#187;\/style.css&#187; as=&#187;style&#187; \/&gt; [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-30281","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/de\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"de_DE\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/de\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-31T18:34:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Preload, Prefetch und andere Tags | ProHoster","description":"Es gibt viele M\u00f6glichkeiten zur Verbesserung der Web-Performance. Eine davon ist das Vorladen von Inhalten, die sp\u00e4ter ben\u00f6tigt werden.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"de_DE","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47Preload, prefetch \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0433\u0438 | ProHoster","og:description":"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.","og:url":"https:\/\/prohoster.info\/de\/blog\/preload-prefetch-i-drugie-tegi","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T18:34:39+00:00","article:modified_time":"2019-10-31T18:34:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"30281","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 00:29:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 03:37:28","updated":"2026-01-21 00:29:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}