{"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\/en\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch, and other tags","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>There is <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Many ways to enhance web performance<\/a><\/noindex>. One of them is preloading content that will be needed later. Prefetching CSS, prerendering a full page, or resolving a domain name. We do everything in advance, and then instantly display the result! Sounds great.<\/p>\n<p>Even cooler is that it's very easy to implement. Five &lt;link rel&gt; tags tell the browser to take preliminary actions:<\/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 \/>\nLet's briefly explain what they do and when to use them.<\/p>\n<p>Jump to: <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> tells the browser to load and cache the resource (like a script or a stylesheet) as soon as possible. This is useful when the resource will be needed a few seconds after the page loads \u2014 and you want to speed up the process.<\/p>\n<p>The browser does nothing with the resource after loading. Scripts are not executed, stylesheets are not applied. The resource is just cached and immediately provided upon request.<\/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> points to the resource you want to download.<\/p>\n<p><code> as<\/code> can be anything that can be downloaded in a browser:<\/p>\n<ul>\n<li><code>style<\/code> for stylesheets,\n<\/li>\n<li><code>script<\/code> for scripts,\n<\/li>\n<li><code>font<\/code> for fonts,\n<\/li>\n<li><code>fetch<\/code> for resources loaded with <code>fetch()<\/code> or <code>are triggered<\/code>,\n<\/li>\n<li>full list see. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">on MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nIt's important to specify the attribute <code>as<\/code> \u2014 this helps the browser prioritize correctly and plan loading.<\/p>\n<h3>When to use<\/h3>\n<p>\nUse preload when a resource will be needed very soon. For example:<\/p>\n<ul>\n<li>Custom fonts from an external file:\n<pre><code class=\"xml\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"index.css\" \/&gt;\n\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nthe net\/http <code>comic-sans.woff2<\/code> will start loading only after the <code>index.css<\/code>and parsing completes. To avoid waiting so long, you can load the font earlier with <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>If you split your styles according to the <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> approach into two parts, critical (for immediate rendering) and non-critical:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Inlined critical styles *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* Custom JS that starts downloading non-critical styles *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nWith this approach, non-critical styles will begin to load only when JavaScript is executed, which may happen a few seconds after rendering. Instead of waiting for JS, use <code>&lt;link rel=\"preload\"&gt;<\/code>, to start loading earlier:<\/p>\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Do not abuse preloading<\/b>. If you load everything indiscriminately, the site will not magically speed up; rather, it will hinder the browser from planning its work efficiently.<\/p>\n<p><b> Don't confuse this with prefetching<\/b>. Do not use <code>&lt;link rel=\"preload\"&gt;<\/code>, if you do not need the resource immediately after loading the page. If it will be needed later, for example, on the next page, then use <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>This is a mandatory tag<\/b> for the browser to execute (if supported), unlike all other  tags related to preloading. The browser is required to load the resource specified in <code>&lt;link rel=\"preload\"&gt;<\/code>. In other cases, it may ignore preloading, for instance, if running on a slow connection.<\/p>\n<p><b>Priorities<\/b>. Different resources (styles, scripts, fonts, etc.) are usually assigned different priorities by browsers to load the most important resources first. In this case, the browser determines priority by the attribute <code>as<\/code>. For Chrome browsers, you can view the <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">full priority table<\/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, and other 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> requests the browser to load and cache a resource (like a script or stylesheet) in the background. The loading occurs with low priority, thus not interfering with more important resources. This is useful if the resource will be needed on the next page, and you want to cache it in advance.<\/p>\n<p>Here too, the browser does nothing with the resource after loading. Scripts are not executed, stylesheets are not applied. The resource is simply cached and immediately provided upon request.<\/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> points to the resource you want to download.<\/p>\n<p><code> as<\/code> can be anything that can be downloaded in a browser:<\/p>\n<ul>\n<li><code>style<\/code> for stylesheets,\n<\/li>\n<li><code>script<\/code> for scripts,\n<\/li>\n<li><code>font<\/code> for fonts,\n<\/li>\n<li><code>fetch<\/code> for resources loaded with <code>fetch()<\/code> or <code>are triggered<\/code>,\n<\/li>\n<li>full list see. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">on MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nIt's important to specify the attribute <code>as<\/code>\u00a0\u2014 this helps the browser prioritize correctly and plan loading.<\/p>\n<h3>When to use<\/h3>\n<p>\n<b>To load resources from other pages<\/b>, if you need a resource from another page, and you want to preload it to speed up the rendering of that page later. For example:<\/p>\n<ul>\n<li>You have an online store, and 40% of users leave the homepage to go to the product page. Use <code>&lt;link rel= \"prefetch\"&gt;<\/code>, loading CSS and JS files for rendering product pages.\n<\/li>\n<li>You have a single-page application where different pages load different packages. When a user visits a page, you can pre-load the packages for all the pages it links to.<\/li>\n<\/ul>\n<p>\n<b>This tag can probably be safely used in any amount<\/b>. Browsers typically prioritize prefetching the least, so it won't interfere with anything else. Just keep in mind that it consumes user bandwidth, which may cost money.<\/p>\n<p><b>Not for urgent requests<\/b>. Do not use <code>&lt;link rel= \"prefetch\"&gt;<\/code>, when the resource will be needed in a few seconds. In this case, apply <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>An optional tag<\/b>. The browser is not obliged to follow this instruction; it can ignore it, for example, on a slow connection.<\/p>\n<p><b>Priority in Chrome<\/b>. In Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> it usually executes with minimal priority (see <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">full priority table<\/a><\/noindex>), meaning after loading everything else.<\/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> asks the browser to connect to the domain in advance when you want to speed up future connection establishment.<\/p>\n<p>The browser should establish a connection if it's retrieving some resources from a new external domain. For example, if it loads Google Fonts, React from a CDN, or requests a JSON response from an API server.<\/p>\n<p>Establishing a new connection usually takes a few hundred milliseconds. It happens only once but still takes time. If you pre-establish the connection, you will save time and load resources from this domain faster.<\/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> indicates the domain name for which to resolve the IP address. You can specify with a prefix (<code>https:\/\/domain.com<\/code>) or without it (<code>\/\/domain.com<\/code>).<\/p>\n<h3>When to use<\/h3>\n<p>\n<b>Use for domains that will be needed soon<\/b> to load important styles, scripts, or images from there, but you don't know the resource URL yet. For example:<\/p>\n<ul>\n<li>Your application is hosted on <code>my-app.com<\/code> and makes AJAX requests to <code>api.my-app.com<\/code>: you don't know the specific requests in advance because they are made dynamically from JS. Here, using the tag to preconnect to the domain is quite appropriate.\n<\/li>\n<li>Your application is hosted on <code>my-app.com<\/code> and uses Google Fonts. They are loaded in two stages: first, a CSS file is loaded from the domain <code>fonts.googleapis.com<\/code>, then this file requests the fonts from <code>fonts.gstatic.com<\/code>. You can't know which specific font files are <code>fonts.gstatic.com<\/code> you will need, until you upload the CSS file, so we can only establish a preliminary connection in advance.<\/li>\n<\/ul>\n<p>\n<b>Use this tag to slightly speed up some third-party script or style.<\/b> due to the preliminary connection setup.<\/p>\n<p><b>Do not misuse it.<\/b>Establishing and maintaining a connection is an expensive operation for both the client and the server. Use this tag for a maximum of 4-6 domains.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>An optional tag<\/b>The browser is not required to follow this instruction and may ignore it, for example, if it already has many connections established or in some other case.<\/p>\n<p><b>What the connection process includes<\/b>To connect to each site, the browser must perform the following actions:<\/p>\n<ul>\n<li><i>DNS resolution<\/i>Find the server's IP address (<code>216.58.215.78<\/code>) for the specified domain name (<code>mrkaran.dev<\/code>).<\/li>\n<li><i>TCP handshake<\/i>Packet exchange (client \u2192 server \u2192 client) to initiate a TCP connection with the server.<\/li>\n<li><i>TLS handshake (only for HTTPS sites)<\/i>Two rounds of packet exchange (client \u2192 server \u2192 client \u2192 server \u2192 client) to initiate a secure TLS session.<\/li>\n<\/ul>\n<p>\nNote: HTTP\/3 will improve and speed up the handshake mechanism, but it is still a long way off.<\/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> asks the browser to perform DNS resolution for the domain in advance if you will be connecting to it soon and want to speed up the initial connection.<\/p>\n<p>The browser must determine the domain's IP address if it will be fetching any resources from a new third-party domain. For example, loading Google Fonts, React from a CDN, or requesting a JSON response from the API server.<\/p>\n<p>For each new domain, DNS record resolution typically takes about 20\u2212120 ms. This only affects the loading of the first resource from that domain, but it still represents a delay. By performing DNS resolution in advance, we save time and load the resource faster.<\/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> indicates the domain name for which the IP address should be established. It can be specified with a prefix (<code>https:\/\/domain.com<\/code>) or without it (<code>\/\/domain.com<\/code>).<\/p>\n<h3>When to use<\/h3>\n<p>\n<b>Use for domains that will be needed soon<\/b> for loading resources from there that the browser does not know about in advance. For example:<\/p>\n<ul>\n<li>Your application is hosted on <code>my-app.com<\/code> and makes AJAX requests to <code>api.my-app.com<\/code>: you don't know the specific requests in advance because they are made dynamically from JS. Here, using the tag to preconnect to the domain is quite appropriate.\n<\/li>\n<li>Your application is hosted on <code>my-app.com<\/code>, and uses Google Fonts. They are loaded in two stages: first, the CSS file from the domain is loaded. <code>fonts.googleapis.com<\/code>, then this file requests the fonts from <code>fonts.gstatic.com<\/code>. You can't know which specific font files are <code>fonts.gstatic.com<\/code> you will need, until you upload the CSS file, so we can only establish a preliminary connection in advance.<\/li>\n<\/ul>\n<p>\n<b>Use this tag to slightly speed up some third-party script or style.<\/b> due to the preliminary connection setup.<\/p>\n<blockquote><p>Note similar characteristics on <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> and <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Using them together for one domain usually doesn't make sense: <code>&lt;link rel= \"preconnect\"&gt;<\/code> already includes <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> and much more. This can be justified in two cases:<\/p>\n<ul>\n<li><i>You want to support older browsers<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> is supported <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">starting from IE10 and Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> was supported for some time in Chrome and Firefox, but was added to Safari only in 11.1 and <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">is still not supported in IE\/Edge<\/a><\/noindex>. If you need to support these browsers, use <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> as a fallback for <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>You want to speed up connections to more than 4-6 domains<\/i>. The tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> is not recommended for use with more than 4-6 domains, as establishing and maintaining connections is an expensive operation. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> uses fewer resources, so use it if necessary.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Details<\/h3>\n<p>\n<b>An optional tag<\/b>. The browser is not required to follow this instruction, so it may not perform DNS resolution, for example, if there are many such tags on a page or in some other case.<\/p>\n<p><b>What is DNS<\/b>. Each server on the internet has a unique IP address that looks like <code>216.58.215.78<\/code>. In the browser's address bar, a website name is usually entered (for example, <code>mrkaran.dev<\/code>), and DNS servers (Domain Name System) map it to the server's IP address (<code>216.58.215.78<\/code>).<\/p>\n<p>To determine the IP address, the browser must make a request to the DNS server. This takes 20-120 ms when connecting to a new third-party domain.<\/p>\n<p><b>DNS is cached, though not very reliably<\/b>. Some operating systems and browsers cache DNS requests: this saves time on repeated requests, but caching cannot be relied on. In Linux, it usually doesn't work at all. Chrome has a DNS cache, but it only lasts for a minute. Windows caches DNS responses for five days.<\/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> asks the browser to fetch a URL and display it on a hidden tab. When the user clicks the link, the page should appear immediately. This is useful if you are sure the user will visit a particular page and want to speed up its display.<\/p>\n<p>Despite the exceptional efficiency of this tag (or because of it), in 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> it is poorly supported by major browsers. Read more at <noindex><a rel=\"nofollow\" href=\"#1\">further down<\/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> points to the URL for which you want to perform rendering in the background.<\/p>\n<h3>When to use<\/h3>\n<p>\n<b>When you are really sure that the user will go to a specific page<\/b>. If you have a 'tunnel' where 70% of visitors from page A go to page B, then <code>&lt;link rel= \"prerender\"&gt;<\/code> on page A will help display page B very quickly.<\/p>\n<p><b>Do not misuse it.<\/b>. Pre-rendering is extremely costly in terms of traffic and memory. Do not use <code>&lt;link rel= \"prerender\"&gt;<\/code> for more than one page.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Details<\/h3>\n<p>\n<b>An optional tag<\/b>. The browser is not obliged to follow this instruction and may ignore it, for example, on a slow connection or with insufficient free memory.<\/p>\n<p>To save memory, <b>Chrome does not perform a full render<\/b>, and <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">only preloads NoState<\/a><\/noindex>. This means that Chrome loads the page and all its resources but does not render or execute JavaScript.<\/p>\n<p>Firefox and Safari do not support this tag at all. This does not violate the specification, as browsers are not required to follow this instruction; but it is still unfortunate. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">A bug in the implementation<\/a><\/noindex> in Firefox was open for seven years. There are reports that Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">also does not support this tag.<\/a><\/noindex>.<\/p>\n<h1>Summary<\/h1>\n<p>\nUse:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 when you need a resource in a few seconds\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 when you need a resource on the next page\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 when you know you'll need a resource soon, but you don't know its full URL yet\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 similarly, when you know you'll need a resource soon, but you don't know its full URL yet (for older browsers)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 when you are sure that users will go to a certain page and want to speed up its display.<\/li>\n<\/ul>\n<p>Source: <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.1.1 - 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\/en\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/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, and other tags | ProHoster","description":"There are many ways to enhance web performance. One of them is to preload content that will be needed later.","canonical_url":"https:\/\/prohoster.info\/en\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"en_US","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\/en\/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\/en\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/en\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}