{"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>Es gibt <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Viele M\u00f6glichkeiten zur Steigerung der Web-Performance<\/a><\/noindex>. Eine davon ist das Vorladen von Inhalten, die sp\u00e4ter ben\u00f6tigt werden. Pre-Fetching von CSS, das Vorladen einer gesamten Seite oder das Aufl\u00f6sen eines Dom\u00e4nennamens. Wir bereiten alles im Voraus vor und zeigen das Ergebnis dann sofort an! Klingt toll.<\/p>\n<p>Noch besser ist, dass das sehr einfach umzusetzen ist. F\u00fcnf &lt;link rel&gt;-Tags geben dem Browser die Anweisung 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 \/>\nKurz gesagt, was sie tun und wann man sie verwenden 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 (z. B. ein Skript oder ein Stylesheet) so schnell wie m\u00f6glich zu laden und zwischenzuspeichern. Dies ist n\u00fctzlich, 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 f\u00fchrt nach dem Laden nichts mit der Ressource durch. Skripte werden nicht ausgef\u00fchrt, Stylesheets werden nicht angewendet. Die Ressource wird nur zwischen gespeichert und auf Anfrage sofort 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> zeigt 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 mit <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> \u2013 es hilft dem Browser, die Priorit\u00e4ten richtig zu setzen und das Laden zu planen.<\/p>\n<h3>Wann verwenden<\/h3>\n<p>\nVerwenden Sie das Preloading, wenn die Ressource in naher Zukunft ben\u00f6tigt wird. Zum Beispiel:<\/p>\n<ul>\n<li>Benutzerdefinierte Schriftarten aus einer externen Datei:\n<pre><code class=\"xml\"><!-- index.html -->\n\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 gestartet <code>index.css<\/code>. Um nicht so lange zu warten, 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 Styles gem\u00e4\u00df 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, einen kritischen (f\u00fcr das sofortige Rendern) und einen nicht-kritischen:\n<pre><code class=\"xml\">\/* Eingegebene kritische Styles *\/<\/code><\/pre>\n<p>\nIn diesem Ansatz werden nicht-kritische Styles erst geladen, wenn JavaScript ausgef\u00fchrt wird, was einige Sekunden nach dem Rendering geschehen kann. Anstelle des Wartens auf JS verwenden Sie <code>&lt;link rel=\"preload\"&gt;<\/code>, um das Laden fr\u00fcher zu starten:<\/p>\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>\u00dcbertreiben Sie nicht mit der Preload-Funktion<\/b>. Wenn Sie alles auf einmal laden, wird die Website nicht auf magische Weise schneller, im Gegenteil, es hindert den Browser daran, effizient zu planen.<\/p>\n<p><b> Verwechseln Sie dies nicht mit Prefetching<\/b>. Verwenden Sie nicht <code>&lt;link rel=\"preload\"&gt;<\/code>, wenn Sie die Ressource nicht sofort nach dem Seitenladen ben\u00f6tigen. Wenn sie sp\u00e4ter ben\u00f6tigt wird, z. B. f\u00fcr die n\u00e4chste Seite, verwenden Sie <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>Dieser Tag ist zwingend<\/b> f\u00fcr die Ausf\u00fchrung durch den Browser (sofern er unterst\u00fctzt wird), im Gegensatz zu allen anderen -Tags, die mit dem Vorladen verbunden sind. Der Browser ist verpflichtet, die Ressource zu laden, die in <code>&lt;link rel=\"preload\"&gt;<\/code>angegeben ist. In anderen F\u00e4llen kann er das Vorladen ignorieren, z. B. wenn er \u00fcber eine langsame Verbindung arbeitet.<\/p>\n<p><b>Priorit\u00e4ten<\/b>. Verschiedene Ressourcen (Styles, Skripte, Schriftarten usw.) erhalten von Browsern unterschiedliche Priorit\u00e4ten, sodass die wichtigsten Ressourcen zuerst geladen werden. In diesem Fall bestimmt der Browser die Priorit\u00e4t anhand des Attributs. <code>as<\/code>. F\u00fcr den Chrome-Browser k\u00f6nnen Sie <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">die 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> anfordern, dass der Browser eine Ressource (wie ein Skript oder ein Stylesheet) im Hintergrund l\u00e4dt und cacht. Der Ladevorgang hat eine niedrige Priorit\u00e4t, sodass er wichtigeren Ressourcen nicht im Weg steht. Dies ist n\u00fctzlich, wenn die Ressource auf der n\u00e4chsten Seite ben\u00f6tigt wird und Sie sie vorher cachen m\u00f6chten.<\/p>\n<p>Auch hier macht der Browser nach dem Laden nichts mit der Ressource. Skripte werden nicht ausgef\u00fchrt, Stylesheets werden nicht angewendet. Die Ressource wird einfach gecacht 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> zeigt 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 mit <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>\u00a0hilft dem Browser, Priorit\u00e4ten korrekt zu setzen und die Ladeplanung vorzunehmen.<\/p>\n<h3>Wann verwenden<\/h3>\n<p>\n<b>Um Ressourcen von anderen Seiten zu laden.<\/b>, wenn Sie eine Ressource von einer anderen Seite ben\u00f6tigen und diese vorher laden m\u00f6chten, um das Rendern dieser Seite zu beschleunigen. Zum Beispiel:<\/p>\n<ul>\n<li>Sie betreiben einen Online-Shop, und 40 % der Nutzer verlassen die Startseite f\u00fcr die Produktseite. Nutzen Sie <code>&lt;link rel= \"prefetch\"&gt;<\/code>, um CSS- und JS-Dateien zu laden, die das Rendern der Produktseiten erm\u00f6glichen.\n<\/li>\n<li>Sie haben eine einseitige Anwendung, und verschiedene Seiten laden unterschiedliche Pakete. Wenn ein Nutzer eine Seite besucht, k\u00f6nnen die Pakete f\u00fcr alle Seiten, auf die verwiesen wird, im Voraus geladen werden.<\/li>\n<\/ul>\n<p>\n<b>Dieser Tag kann wahrscheinlich ohne Probleme in gro\u00dfem Umfang verwendet werden<\/b>. Browser planen in der Regel Prefetch mit der niedrigsten Priorit\u00e4t, sodass es niemanden st\u00f6rt. Achten Sie nur darauf, dass Datenverbrauch anfallen kann, was Geld kosten kann.<\/p>\n<p><b>Nicht f\u00fcr dringende Anfragen<\/b>. Verwenden Sie nicht <code>&lt;link rel= \"prefetch\"&gt;<\/code>, wenn die Ressource in wenigen 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 und kann sie ignorieren, beispielsweise 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\">die 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 Installation der Verbindung in der Zukunft beschleunigen m\u00f6chten.<\/p>\n<p>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.<\/p>\n<p>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.<\/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> zeigt auf den Domainnamen, f\u00fcr den die IP-Adresse ermittelt werden soll. Es kann mit einem Pr\u00e4fix angegeben werden (<code>https:\/\/domain.com<\/code>) oder ohne (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wann verwenden<\/h3>\n<p>\n<b>Verwenden Sie es f\u00fcr Domains, die in K\u00fcrze ben\u00f6tigt werden<\/b> um dort wichtige Stile, Skripte oder Bilder zu laden, aber Sie kennen die URL der Ressource noch nicht. Zum Beispiel:<\/p>\n<ul>\n<li>Ihre Anwendung wird gehostet auf <code>my-app.com<\/code> und f\u00fchrt AJAX-Anfragen an <code>api.my-app.com<\/code>: 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.\n<\/li>\n<li>Ihre Anwendung wird gehostet auf <code>my-app.com<\/code> und verwendet Google Fonts. Diese werden in zwei Schritten geladen: Zuerst wird die CSS-Datei von der Domain <code>fonts.googleapis.com<\/code>, dann fordert diese Datei Schriften von <code>fonts.gstatic.com<\/code>. Sie wissen nicht, welche spezifischen Schriftdateien von <code>fonts.gstatic.com<\/code> ben\u00f6tigt werden, bis Sie die CSS-Datei geladen haben. Daher k\u00f6nnen wir im Voraus nur eine vorl\u00e4ufige Verbindung herstellen.<\/li>\n<\/ul>\n<p>\n<b>Verwenden Sie dieses Tag, um einige externe Skripte oder Stile etwas zu beschleunigen<\/b> durch die vorzeitige Verbindungseinrichtung.<\/p>\n<p><b>Missbrauchen Sie diesen Tag nicht,<\/b>. Das Einrichten und Aufrechterhalten einer Verbindung ist ein kostspieliger Prozess, sowohl f\u00fcr den Kunden als auch f\u00fcr den Server. Verwenden Sie dieses Tag h\u00f6chstens 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, zum Beispiel, wenn bereits viele Verbindungen hergestellt wurden oder in einem anderen Fall.<\/p>\n<p><b>Was der Verbindungsprozess umfasst,<\/b>. Um sich mit einer Website zu verbinden, muss der Browser die folgenden Schritte ausf\u00fchren:<\/p>\n<ul>\n<li><i>DNS-Aufl\u00f6sung<\/i>. Den 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-Handschlag<\/i>. Austausch von Paketen (Client \u2192 Server \u2192 Client), um eine TCP-Verbindung zum Server herzustellen.<\/li>\n<li><i>TLS-Handschlag (nur f\u00fcr HTTPS-Websites)<\/i>. Zwei Runden des Paket-Austauschs (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 ein weiter Weg.<\/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 Dom\u00e4ne im Voraus durchzuf\u00fchren, falls Sie bald eine Verbindung herstellen m\u00f6chten und die Anfangsverbindung beschleunigen m\u00f6chten.<\/p>\n<p>Der Browser muss die IP-Adresse der Dom\u00e4ne bestimmen, falls er Ressourcen von einer neuen externen Dom\u00e4ne abrufen muss. Zum Beispiel beim Laden von Google Fonts, React von einem CDN oder beim Anfragen einer JSON-Antwort vom API-Server.<\/p>\n<p>F\u00fcr jede neue Dom\u00e4ne dauert die DNS-Record-Aufl\u00f6sung normalerweise etwa 20\u2013120 ms. Dies betrifft nur das Laden der ersten Ressource von dieser Dom\u00e4ne, stellt aber dennoch eine Verz\u00f6gerung dar. Wenn die DNS-Aufl\u00f6sung im Voraus erfolgt, sparen wir Zeit und laden die Ressource schneller.<\/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> gibt den Dom\u00e4nennamen an, f\u00fcr den eine IP-Adresse festgelegt werden soll. Kann mit einem Pr\u00e4fix angegeben werden (<code>https:\/\/domain.com<\/code>) oder ohne (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wann verwenden<\/h3>\n<p>\n<b>Verwenden Sie es f\u00fcr Domains, die in K\u00fcrze ben\u00f6tigt werden<\/b> zum Laden von Ressourcen von dort, die der Browser im Voraus nicht kennt. Zum Beispiel:<\/p>\n<ul>\n<li>Ihre Anwendung wird gehostet auf <code>my-app.com<\/code> und f\u00fchrt AJAX-Anfragen an <code>api.my-app.com<\/code>: 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.\n<\/li>\n<li>Ihre Anwendung wird gehostet auf <code>my-app.com<\/code>, und nutzt Google Fonts. Diese werden in zwei Phasen geladen: Zuerst wird die CSS-Datei von der Domain geladen. <code>fonts.googleapis.com<\/code>, dann fordert diese Datei Schriften von <code>fonts.gstatic.com<\/code>. Sie wissen nicht, welche spezifischen Schriftdateien von <code>fonts.gstatic.com<\/code> Sie ben\u00f6tigen dies, bis die CSS-Datei geladen ist. Daher k\u00f6nnen wir im Voraus nur eine vorl\u00e4ufige Verbindung herstellen.<\/li>\n<\/ul>\n<p>\n<b>Verwenden Sie dieses Tag, um einige externe Skripte oder Stile etwas zu beschleunigen<\/b> durch die vorzeitige Verbindungseinrichtung.<\/p>\n<blockquote><p>Beachten Sie \u00e4hnliche Eigenschaften unter <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> und <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Es macht normalerweise keinen Sinn, sie zusammen f\u00fcr eine Domain zu verwenden: <code>&lt;link rel= \"preconnect\"&gt;<\/code> ist bereits enthalten <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 alte 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\">ab IE10 und Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> wurde eine Zeit lang in Chrome und Firefox unterst\u00fctzt, wurde aber erst in Safari in 11.1 hinzugef\u00fcgt und <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">wird nach wie vor in IE\/Edge nicht unterst\u00fctzt.<\/a><\/noindex>. Wenn Sie diese Browser unterst\u00fctzen m\u00fcssen, verwenden Sie <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> als Fallback f\u00fcr <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Sie m\u00f6chten die Verbindung zu mehr als 4-6 Domains beschleunigen.<\/i>. Das Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> sollte nicht mit mehr als 4-6 Domains verwendet werden, da das Herstellen und Aufrechterhalten einer Verbindung eine kostspielige Angelegenheit ist. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> ben\u00f6tigt weniger Ressourcen, verwenden Sie es daher bei Bedarf.<\/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, und k\u00f6nnte daher DNS-Resolution m\u00f6glicherweise nicht durchf\u00fchren, beispielsweise wenn es viele solcher Tags auf der Seite gibt oder aus einem anderen Grund.<\/p>\n<p><b>Was ist DNS<\/b>. Jeder Server im Internet hat eine eindeutige IP-Adresse, die wie folgt aussieht <code>216.58.215.78<\/code>. In der Adresszeile des Browsers wird normalerweise der Name der Website eingegeben (zum Beispiel <code>google.com<\/code>), w\u00e4hrend DNS-Server (Domain Name System) ihn mit der IP-Adresse des Servers (<code>216.58.215.78<\/code>).<\/p>\n<p>) verkn\u00fcpfen. Um die IP-Adresse zu bestimmen, muss der Browser eine Abfrage an den DNS-Server senden. Dies dauert in der Regel 20\u2013120 ms, wenn man sich mit einer neuen externen Domain verbindet.<\/p>\n<p><b>DNS wird zwischengespeichert, wenn auch nicht sehr zuverl\u00e4ssig<\/b>. 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\u00fcr f\u00fcnf Tage.<\/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> 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\u00fctzlich, wenn Sie 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> von den g\u00e4ngigen Browsern schlecht unterst\u00fctzt. Weitere Informationen finden Sie <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 verwenden<\/h3>\n<p>\n<b>Wenn Sie sich wirklich sicher sind, dass der Benutzer auf eine bestimmte Seite wechselt<\/b>. Wenn Sie einen \u201eTunnel\u201c haben, bei dem 70 % der Besucher der Seite A auf die Seite B wechseln, dann <code>&lt;link rel= \"prerender\"&gt;<\/code> hilft das auf Seite A, Seite B sehr schnell anzuzeigen.<\/p>\n<p><b>Missbrauchen Sie diesen Tag nicht,<\/b>. Pre-rendering kann in Bezug auf Datenverkehr und Speicher extrem teuer sein. Verwenden Sie es daher nicht <code>&lt;link rel= \"prerender\"&gt;<\/code> f\u00fcr mehr als eine 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, beispielsweise bei einer langsamen Verbindung oder unzureichendem freiem Speicher.<\/p>\n<p>Um Speicher zu sparen <b>Chrome f\u00fchrt kein vollst\u00e4ndiges Rendering durch<\/b>, und <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">nur das Preloading von NoState<\/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 nicht verpflichtet sind, diese Anweisung auszuf\u00fchren; es ist jedoch dennoch bedauerlich. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Der Implementierungsfehler<\/a><\/noindex> in Firefox besteht seit sieben Jahren. Es gibt Berichte, dass auch Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">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 eine Ressource in ein paar Sekunden ben\u00f6tigen\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 wenn Sie die 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 \u00e4ltere Browser)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 wenn Sie sicher sind, dass die Benutzer zu einer bestimmten Seite wechseln, und die Darstellung 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 4.9.10 - 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. \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 \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:\" \/>\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) 4.9.10\" \/>\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. \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 \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:\" \/>\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, die Web-Performance zu steigern. Eine davon ist das Preloading von Inhalten, die sp\u00e4ter ben\u00f6tigt werden. Dazu geh\u00f6ren das Prefetching von CSS, das vorzeitige Rendern der gesamten Seite oder das Aufl\u00f6sen des Domainnamens. Wir handeln alles im Voraus, sodass das Ergebnis sofort angezeigt wird! Das klingt gro\u00dfartig. Noch besser ist, dass es sehr einfach umzusetzen ist. F\u00fcnf Tags geben dem Browser die Anweisung f\u00fcr diese Vorabma\u00dfnahmen:","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. \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 \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:","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"},"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}]}}