{"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\/sk\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch a \u010fal\u0161ie zna\u010dky","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Existuje <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">mnoho sp\u00f4sobov zvy\u0161ovania v\u00fdkonu webu<\/a><\/noindex>. Jedn\u00fdm z nich je predna\u010d\u00edtanie obsahu, ktor\u00fd bude potrebn\u00fd nesk\u00f4r. Prefetching CSS, predrendrovanie celej str\u00e1nky alebo resolvovanie dom\u00e9nov\u00e9ho mena. Rob\u00edme v\u0161etko dopredu a potom okam\u017eite zobraz\u00edme v\u00fdsledok! Znie to skvele.<\/p>\n<p>E\u0161te lep\u0161ie je, \u017ee je to ve\u013emi jednoduch\u00e9 realizova\u0165. P\u00e4\u0165 tagov &lt;link rel&gt; d\u00e1va prehliada\u010du pr\u00edkaz na predbe\u017en\u00e9 \u010dinnosti:<\/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 \/>\nV skratke vysvetl\u00edme, \u010do robia a kedy ich pou\u017e\u00edva\u0165.<\/p>\n<p>Prejs\u0165 na: <noindex><a rel=\"nofollow\" href=\"#preload\">predna\u010d\u00edtania<\/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>predna\u010d\u00edtania<\/h1>\n<p>\n<code>&lt;link rel=\"preload\"&gt;<\/code> hovor\u00ed prehliada\u010du, aby \u010do najsk\u00f4r na\u010d\u00edtal a vyrovnal zdroj (napr\u00edklad skript alebo \u0161t\u00fdlov\u00fa tabu\u013eku). Je to u\u017eito\u010dn\u00e9, ke\u010f bude zdroj potrebn\u00fd za nieko\u013eko sek\u00fand po na\u010d\u00edtan\u00ed str\u00e1nky - a chcete ur\u00fdchli\u0165 proces.<\/p>\n<p>Prehliada\u010d nerob\u00ed ni\u010d so zdrojom po na\u010d\u00edtan\u00ed. Skripty sa nevykon\u00e1vaj\u00fa, \u0161t\u00fdlov\u00e9 tabu\u013eky sa neuplat\u0148uj\u00fa. Zdravotn\u00fd zdroj je jednoducho vyrovnan\u00fd a okam\u017eite k dispoz\u00edcii na po\u017eiadanie.<\/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> ukazuje na zdroj, ktor\u00fd chcete stiahnu\u0165.<\/p>\n<p><code> as<\/code> m\u00f4\u017ee by\u0165 \u010doko\u013evek, \u010do je mo\u017en\u00e9 stiahnu\u0165 v prehliada\u010di:<\/p>\n<ul>\n<li><code>style<\/code> pre \u0161t\u00fdlov\u00e9 tabu\u013eky,\n<\/li>\n<li><code>script<\/code> pre skripty,\n<\/li>\n<li><code>font<\/code> pre p\u00edsma,\n<\/li>\n<li><code>fetch<\/code> pre zdroje na\u010d\u00edtan\u00e9 pomocou <code>fetch()<\/code> alebo <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>\u00fapln\u00fd zoznam vi\u010f. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">na MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nD\u00f4le\u017eit\u00e9 je uvies\u0165 atrib\u00fat <code>as<\/code> \u2013 pom\u00e1ha to prehliada\u010du spr\u00e1vne stanovi\u0165 priority a pl\u00e1nova\u0165 na\u010d\u00edtanie.<\/p>\n<h3>Kedy pou\u017e\u00edva\u0165<\/h3>\n<p>\nPou\u017eite predna\u010d\u00edtanie, ke\u010f bude zdroj potrebn\u00fd v najbli\u017e\u0161ej dobe. Napr\u00edklad:<\/p>\n<ul>\n<li>Ne\u0161tandardn\u00e9 p\u00edsma z extern\u00e9ho s\u00faboru:\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>\nPredvolene <code>comic-sans.woff2<\/code> za\u010dne sa na\u010d\u00edtava\u0165 iba po na\u010d\u00edtan\u00ed a anal\u00fdze <code>index.css<\/code>. Aby ste ne\u010dakali tak dlho, m\u00f4\u017eete na\u010d\u00edta\u0165 p\u00edsmo sk\u00f4r pomocou <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>Ak rozde\u013eujete svoje \u0161t\u00fdly pod\u013ea pr\u00edstupu <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> na dve \u010dasti, kritick\u00fa (pre okam\u017eit\u00e9 rendrovanie) a nekritick\u00fa:\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>\nPri takom pr\u00edstupe sa nekritick\u00e9 \u0161t\u00fdly za\u010dn\u00fa na\u010d\u00edtava\u0165 iba po spusten\u00ed JavaScriptu, k \u010domu m\u00f4\u017ee d\u00f4js\u0165 nieko\u013eko sek\u00fand po vykreslen\u00ed. Namiesto \u010dakania na JS pou\u017eite <code>&lt;link rel=\"preload\"&gt;<\/code>, aby ste za\u010dali na\u010d\u00edtanie sk\u00f4r:<\/p>\n<pre><code class=\"xml\">\/* Inline kritick\u00e9 \u0161t\u00fdly *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Nezneu\u017e\u00edvajte predna\u010d\u00edtanie<\/b>. Ak na\u010d\u00edtate v\u0161etko, str\u00e1nka sa automaticky neurychl\u00ed; sk\u00f4r naopak, m\u00f4\u017ee to prek\u00e1\u017ea\u0165 prehliada\u010du v spr\u00e1vnom pl\u00e1novan\u00ed pr\u00e1ce.<\/p>\n<p><b> Nezamie\u0148ajte so pre-fetchingom<\/b>. Nepou\u017e\u00edvajte <code>&lt;link rel=\"preload\"&gt;<\/code>, ak nepotrebujete zdroj hne\u010f po na\u010d\u00edtan\u00ed str\u00e1nky. Ak ho budete potrebova\u0165 nesk\u00f4r, napr\u00edklad na nasleduj\u00facej str\u00e1nke, pou\u017eite <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>Toto je povinn\u00fd tag<\/b> na vykonanie prehliada\u010dom (ak ho podporuje), na rozdiel od v\u0161etk\u00fdch ostatn\u00fdch tagov , ktor\u00e9 sa t\u00fdkaj\u00fa predbe\u017en\u00e9ho na\u010d\u00edtania. Prehliada\u010d je povinn\u00fd na\u010d\u00edta\u0165 zdroj uveden\u00fd v <code>&lt;link rel=\"preload\"&gt;<\/code>. V in\u00fdch pr\u00edpadoch m\u00f4\u017ee ignorova\u0165 predbe\u017en\u00e9 na\u010d\u00edtanie, napr\u00edklad ak pracuje na pomalom pripojen\u00ed.<\/p>\n<p><b>Priority<\/b>. R\u00f4znym zdrojom (\u0161t\u00fdly, skripty, p\u00edsma at\u010f.) prehliada\u010de zvy\u010dajne prira\u010fuj\u00fa r\u00f4zne priority, aby sa najprv na\u010d\u00edtali najd\u00f4le\u017eitej\u0161ie zdroje. V tomto pr\u00edpade prehliada\u010d ur\u010duje prioritu pod\u013ea atrib\u00fatu <code>as<\/code>. Pre prehliada\u010d Chrome si m\u00f4\u017eete pozrie\u0165 <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">\u00fapln\u00fa tabu\u013eku prior\u00edt<\/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 a \u010fal\u0161ie zna\u010dky\" 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> \u017eiada prehliada\u010d, aby na\u010d\u00edtal a ulo\u017eil zdroj (napr\u00edklad skript alebo \u0161t\u00fdlov\u00fa tabu\u013eku) na pozad\u00ed. Na\u010d\u00edtanie prebieha s n\u00edzkou prioritou, tak\u017ee nebrzd\u00ed d\u00f4le\u017eitej\u0161ie zdroje. Je to u\u017eito\u010dn\u00e9, ak bude zdroj potrebn\u00fd na nasleduj\u00facej str\u00e1nke a chcete ho vopred ulo\u017ei\u0165 do cache.<\/p>\n<p>Tu tie\u017e prehliada\u010d s hladom ni\u010d nerob\u00ed so zdrojom po na\u010d\u00edtan\u00ed. Skripty sa nevykon\u00e1vaj\u00fa, \u0161t\u00fdlov\u00e9 tabu\u013eky sa neuplat\u0148uj\u00fa. Zdroje sa jednoducho ukladaj\u00fa do cache a okam\u017eite sa poskytuj\u00fa na po\u017eiadanie.<\/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> ukazuje na zdroj, ktor\u00fd chcete stiahnu\u0165.<\/p>\n<p><code> as<\/code> m\u00f4\u017ee by\u0165 \u010doko\u013evek, \u010do je mo\u017en\u00e9 stiahnu\u0165 v prehliada\u010di:<\/p>\n<ul>\n<li><code>style<\/code> pre \u0161t\u00fdlov\u00e9 tabu\u013eky,\n<\/li>\n<li><code>script<\/code> pre skripty,\n<\/li>\n<li><code>font<\/code> pre p\u00edsma,\n<\/li>\n<li><code>fetch<\/code> pre zdroje na\u010d\u00edtan\u00e9 pomocou <code>fetch()<\/code> alebo <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>\u00fapln\u00fd zoznam vi\u010f. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">na MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nD\u00f4le\u017eit\u00e9 je uvies\u0165 atrib\u00fat <code>as<\/code>\u00a0\u2014 pom\u00e1ha prehliada\u010du spr\u00e1vne pride\u013eova\u0165 priority a pl\u00e1nova\u0165 na\u010d\u00edtanie.<\/p>\n<h3>Kedy pou\u017e\u00edva\u0165<\/h3>\n<p>\n<b>Na na\u010d\u00edtanie zdrojov z in\u00fdch str\u00e1nok<\/b>, ak potrebujete zdroj z inej str\u00e1nky a chcete ho predna\u010d\u00edtava\u0165, aby ste nesk\u00f4r ur\u00fdchlili vykreslenie tejto str\u00e1nky. Napr\u00edklad:<\/p>\n<ul>\n<li>M\u00e1te internetov\u00fd obchod a 40% pou\u017e\u00edvate\u013eov odch\u00e1dza z hlavnej str\u00e1nky na str\u00e1nku s produktom. Pou\u017eite <code>&lt;link rel= \"prefetch\"&gt;<\/code>, nahr\u00e1van\u00edm s\u00faborov CSS a JS pre renderovanie str\u00e1nok s produktom.\n<\/li>\n<li>M\u00e1te jednoc str\u00e1nkov\u00fa aplik\u00e1ciu, kde r\u00f4zne str\u00e1nky na\u010d\u00edtavaj\u00fa r\u00f4zne bal\u00edky. Ke\u010f pou\u017e\u00edvate\u013e nav\u0161t\u00edvi nejak\u00fa str\u00e1nku, m\u00f4\u017eete vopred na\u010d\u00edta\u0165 bal\u00edky pre v\u0161etky str\u00e1nky, na ktor\u00e9 odkazuje.<\/li>\n<\/ul>\n<p>\n<b>Pravdepodobne je t\u00e1to zna\u010dka bezpe\u010dne pou\u017eite\u013en\u00e1 v akomko\u013evek objeme<\/b>. Prehliada\u010de zvy\u010dajne pl\u00e1nuj\u00fa prefetch s najni\u017e\u0161ou prioritou, tak\u017ee to nikomu neprek\u00e1\u017ea. Iba majte na pam\u00e4ti, \u017ee sa spotrebov\u00e1va pou\u017e\u00edvate\u013esk\u00fd d\u00e1tov\u00fd prenos, ktor\u00fd m\u00f4\u017ee st\u00e1\u0165 peniaze.<\/p>\n<p><b>Nie pre urgentn\u00e9 po\u017eiadavky<\/b>. Nepou\u017e\u00edvajte <code>&lt;link rel= \"prefetch\"&gt;<\/code>, ke\u010f bude zdroj potrebn\u00fd za p\u00e1r sek\u00fand. V takom pr\u00edpade pou\u017eite <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>Volite\u013en\u00e1 zna\u010dka<\/b>. Prehliada\u010d nie je povinn\u00fd dodr\u017eiava\u0165 tento pokyn, m\u00f4\u017ee ho ignorova\u0165, napr\u00edklad na pomalom pripojen\u00ed.<\/p>\n<p><b>Priorita v Chrome<\/b>. V Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> sa zvy\u010dajne vykon\u00e1va s minim\u00e1lnou prioritou (pozri <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">\u00fapln\u00fa tabu\u013eku prior\u00edt<\/a><\/noindex>), to znamen\u00e1 po na\u010d\u00edtan\u00ed v\u0161etk\u00fdch ostatn\u00fdch.<\/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> po\u017eaduje od prehliada\u010da, aby sa vopred pripojil k dom\u00e9ne, ke\u010f chcete zr\u00fdchli\u0165 ustanovenie spojenia v bud\u00facnosti.<\/p>\n<p>Prehliada\u010d by mal nadviaza\u0165 spojenie, ak na\u010d\u00edtava nejak\u00e9 zdroje z novej extern\u00e9 dom\u00e9ny. Napr\u00edklad, ak na\u010d\u00edtava p\u00edsma z Google Fonts, React z CDN alebo po\u017eaduje odpove\u010f JSON zo servera API.<\/p>\n<p>Ustanovenie nov\u00e9ho spojenia zvy\u010dajne trv\u00e1 nieko\u013eko stoviek milisek\u00fand. Vykon\u00e1va sa iba raz, ale aj tak zaber\u00e1 \u010das. Ak ste u\u017e vopred nadviazali spojenie, u\u0161etr\u00edte \u010das a r\u00fdchlej\u0161ie na\u010d\u00edtate zdroje z tejto dom\u00e9ny.<\/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> ozna\u010duje n\u00e1zov dom\u00e9ny, pre ktor\u00fd je potrebn\u00e9 ur\u010di\u0165 IP adresu. M\u00f4\u017ee by\u0165 uveden\u00fd s prefiksom (<code>https:\/\/domain.com<\/code>) alebo bez neho (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kedy pou\u017e\u00edva\u0165<\/h3>\n<p>\n<b>Pou\u017eite pre dom\u00e9ny, ktor\u00e9 \u010doskoro potrebujete<\/b> na na\u010d\u00edtanie d\u00f4le\u017eit\u00e9ho \u0161t\u00fdlu, skriptu alebo obr\u00e1zku, ale zatia\u013e neviete URL zdroja. Napr\u00edklad:<\/p>\n<ul>\n<li>Va\u0161a aplik\u00e1cia je umiestnen\u00e1 na <code>my-app.com<\/code> a rob\u00ed AJAX po\u017eiadavky na <code>api.my-app.com<\/code>: neviete vopred konkr\u00e9tne po\u017eiadavky, preto\u017ee sa robia dynamicky z JS. Tu je celkom vhodn\u00e9 pou\u017ei\u0165 zna\u010dku na predbe\u017en\u00e9 pripojenie k dom\u00e9ne.\n<\/li>\n<li>Va\u0161a aplik\u00e1cia je umiestnen\u00e1 na <code>my-app.com<\/code> a pou\u017e\u00edva p\u00edsma Google Fonts. Tieto sa na\u010d\u00edtavaj\u00fa v dvoch f\u00e1zach: najprv sa na\u010d\u00edta s\u00fabor CSS z dom\u00e9ny <code>fonts.googleapis.com<\/code>, potom tento s\u00fabor po\u017eaduje p\u00edsma z <code>fonts.gstatic.com<\/code>. Ne m\u00f4\u017eete vedie\u0165, ktor\u00e9 konkr\u00e9tne s\u00fabory p\u00edsiem z <code>fonts.gstatic.com<\/code> Budete ich potrebova\u0165, k\u00fdm nenahrajete s\u00fabor CSS, tak\u017ee vopred m\u00f4\u017eeme iba nastavi\u0165 predbe\u017en\u00e9 pripojenie.<\/li>\n<\/ul>\n<p>\n<b>Pou\u017eite tento tag na mierne zr\u00fdchlenie niektor\u00e9ho extern\u00e9ho skriptu alebo \u0161t\u00fdlu<\/b> v\u010faka predbe\u017en\u00e9mu nastaveniu pripojenia.<\/p>\n<p><b>Nepou\u017e\u00edvajte to nadmerne<\/b>. Nastavenie a udr\u017eiavanie pripojenia je n\u00e1kladn\u00e1 oper\u00e1cia pre klienta aj server. Pou\u017eite tento tag maxim\u00e1lne pre 4-6 dom\u00e9n.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>Volite\u013en\u00e1 zna\u010dka<\/b>. Prehliada\u010d nie je povinn\u00fd dodr\u017eiava\u0165 tento pokyn a m\u00f4\u017ee ho ignorova\u0165, napr\u00edklad ak je u\u017e nastaven\u00fdch ve\u013ea pripojen\u00ed alebo v inej situ\u00e1cii.<\/p>\n<p><b>\u010co zahr\u0148uje proces pripojenia<\/b>. Na pripojenie k ka\u017edej str\u00e1nke mus\u00ed prehliada\u010d vykona\u0165 nasleduj\u00face kroky:<\/p>\n<ul>\n<li><i>Rie\u0161enie DNS<\/i>. N\u00e1js\u0165 IP adresu servera (<code>216.58.215.78<\/code>) pre uveden\u00e9 dom\u00e9nov\u00e9 meno (<code>google.com<\/code>).<\/li>\n<li><i>Rukovanie TCP<\/i>. V\u00fdmena paketov (klient \u2192 server \u2192 klient), aby inicioval TCP pripojenie so serverom.<\/li>\n<li><i>Rukovanie TLS (iba pre HTTPS str\u00e1nky)<\/i>. Dve kol\u00e1 v\u00fdmeny paketov (klient \u2192 server \u2192 klient \u2192 server \u2192 klient), aby inicioval zabezpe\u010den\u00fa rel\u00e1ciu TLS.<\/li>\n<\/ul>\n<p>\nPozn\u00e1mka: HTTP\/3 zlep\u0161\u00ed a ur\u00fdchli mechanizmus rukovania, ale je e\u0161te \u010faleko.<\/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> \u017eiada prehliada\u010d, aby vopred vykonal rie\u0161enie DNS pre dom\u00e9nu, ak sa k nej \u010doskoro pripoj\u00edte a chcete ur\u00fdchli\u0165 po\u010diato\u010dn\u00e9 pripojenie.<\/p>\n<p>Prehliada\u010d mus\u00ed ur\u010di\u0165 IP adresu dom\u00e9ny, ak bude s\u0165ahova\u0165 nejak\u00e9 zdroje z novej extern\u00e9 dom\u00e9ny. Napr\u00edklad s\u0165ahova\u0165 p\u00edsma z Google Fonts, React z CDN alebo \u017eiada\u0165 odpove\u010f JSON zo servera API.<\/p>\n<p>Pre ka\u017ed\u00fa nov\u00fa dom\u00e9nu zvy\u010dajne trv\u00e1 rie\u0161enie DNS okolo 20\u2212120 ms. Toto ovplyv\u0148uje iba na\u010d\u00edtanie prv\u00e9ho zdroja z tejto dom\u00e9ny, ale aj tak predstavuje oneskorenie. Ak vykon\u00e1te rie\u0161enie DNS vopred, u\u0161etr\u00edme \u010das a na\u010d\u00edtame zdroj r\u00fdchlej\u0161ie.<\/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> nazna\u010duje dom\u00e9nov\u00e9 meno, pre ktor\u00e9 sa m\u00e1 nastavi\u0165 IP adresa. M\u00f4\u017eete uvies\u0165 s prefixom (<code>https:\/\/domain.com<\/code>) alebo bez neho (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kedy pou\u017e\u00edva\u0165<\/h3>\n<p>\n<b>Pou\u017eite pre dom\u00e9ny, ktor\u00e9 \u010doskoro potrebujete<\/b> na na\u010d\u00edtanie zdrojov odtia\u013e, o ktor\u00fdch prehliada\u010d nevie vopred. Napr\u00edklad:<\/p>\n<ul>\n<li>Va\u0161a aplik\u00e1cia je umiestnen\u00e1 na <code>my-app.com<\/code> a rob\u00ed AJAX po\u017eiadavky na <code>api.my-app.com<\/code>: neviete vopred konkr\u00e9tne po\u017eiadavky, preto\u017ee sa robia dynamicky z JS. Tu je celkom vhodn\u00e9 pou\u017ei\u0165 zna\u010dku na predbe\u017en\u00e9 pripojenie k dom\u00e9ne.\n<\/li>\n<li>Va\u0161a aplik\u00e1cia je umiestnen\u00e1 na <code>my-app.com<\/code>, a pou\u017e\u00edva p\u00edsma Google Fonts. Tieto sa na\u010d\u00edtavaj\u00fa v dvoch f\u00e1zach: najprv sa na\u010d\u00edta s\u00fabor CSS z dom\u00e9ny <code>fonts.googleapis.com<\/code>, potom tento s\u00fabor po\u017eaduje p\u00edsma z <code>fonts.gstatic.com<\/code>. Ne m\u00f4\u017eete vedie\u0165, ktor\u00e9 konkr\u00e9tne s\u00fabory p\u00edsiem z <code>fonts.gstatic.com<\/code> budete ich potrebova\u0165, k\u00fdm nenahrajete s\u00fabor CSS, tak\u017ee vopred m\u00f4\u017eeme iba nastavi\u0165 predbe\u017en\u00e9 pripojenie.<\/li>\n<\/ul>\n<p>\n<b>Pou\u017eite tento tag na mierne zr\u00fdchlenie niektor\u00e9ho extern\u00e9ho skriptu alebo \u0161t\u00fdlu<\/b> v\u010faka predbe\u017en\u00e9mu nastaveniu pripojenia.<\/p>\n<blockquote><p>Pozrite si podobn\u00e9 charakteristiky na <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> a <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Pou\u017e\u00edvanie ich spolu pre jednu dom\u00e9nu obvykle ned\u00e1va zmysel: <code>&lt;link rel= \"preconnect\"&gt;<\/code> u\u017e zah\u0155\u0148a <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> a mnoho \u010fal\u0161ieho. Je to ospravedlnite\u013en\u00e9 v dvoch pr\u00edpadoch:<\/p>\n<ul>\n<li><i>Chcete podporova\u0165 star\u00e9 prehliada\u010de<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> podporovan\u00e9 <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">za\u010d\u00ednaj\u00fac od IE10 a Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> nejak\u00fd \u010das bolo podporovan\u00e9 v Chrome a Firefox, ale bolo pridan\u00e9 do Safari a\u017e vo verzii 11.1 a <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">st\u00e1le nie je podporovan\u00e9 v IE\/Edge<\/a><\/noindex>. Ak potrebujete podporova\u0165 tieto prehliada\u010de, pou\u017eite <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> ako z\u00e1lo\u017en\u00fa mo\u017enos\u0165 pre <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Chcete ur\u00fdchli\u0165 pripojenie k viac ako 4-6 dom\u00e9nam<\/i>. Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> sa neodpor\u00fa\u010da pou\u017e\u00edva\u0165 s viac ako 4-6 dom\u00e9nami, preto\u017ee nastavenie a udr\u017eiavanie pripojenia je n\u00e1kladn\u00e1 oper\u00e1cia. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> spotrebov\u00e1va menej zdrojov, tak\u017ee ho v pr\u00edpade potreby pou\u017eite.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>Volite\u013en\u00e1 zna\u010dka<\/b>. Prehliada\u010d nie je povinn\u00fd dodr\u017eiava\u0165 tento pokyn, tak\u017ee nemus\u00ed vykona\u0165 DNS resolvovanie, napr\u00edklad ak je na str\u00e1nke ve\u013ea tak\u00fdchto tagov alebo v nejakej inej situ\u00e1cii.<\/p>\n<p><b>\u010co je DNS<\/b>. Ka\u017ed\u00e9mu serveru na internete zodpoved\u00e1 jedine\u010dn\u00e1 IP adresa, ktor\u00e1 vyzer\u00e1 ako <code>216.58.215.78<\/code>. Do adresn\u00e9ho riadka prehliada\u010da sa zvy\u010dajne zad\u00e1va n\u00e1zov webovej str\u00e1nky (napr\u00edklad <code>google.com<\/code>), a servery DNS (Domain Name System) ho prira\u010fuj\u00fa k IP adrese servera (<code>216.58.215.78<\/code>).<\/p>\n<p>Aby ste ur\u010dili IP adresu, mus\u00ed prehliada\u010d vykona\u0165 dopyt na DNS server. Tento proces trv\u00e1 20-120 ms pri pripojen\u00ed k novej extern\u00e9 dom\u00e9ne.<\/p>\n<p><b>DNS sa ukladaj\u00fa do cache, aj ke\u010f nie ve\u013emi spo\u013eahlivo<\/b>. Niektor\u00e9 opera\u010dn\u00e9 syst\u00e9my a prehliada\u010de ukladaj\u00fa DNS dotazy do cache: to u\u0161etr\u00ed \u010das pri opakovan\u00fdch dopytoch, ale na cache sa ned\u00e1 \u00faplne spol\u00edha\u0165. V Linuxe to zvy\u010dajne v\u00f4bec nefunguje. Chrome m\u00e1 DNS cache, ale t\u00e1 \u017eije iba min\u00fatu. Windows uchov\u00e1va odpovede DNS po dobu piatich dn\u00ed.<\/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> \u017eiadam prehliada\u010d, aby na\u010d\u00edtal URL adresu a zobrazil ju na nevidite\u013enej karte. Ke\u010f pou\u017e\u00edvate\u013e klikne na odkaz, str\u00e1nka by sa mala okam\u017eite zobrazi\u0165. Je to u\u017eito\u010dn\u00e9, ak si ste ist\u00ed, \u017ee pou\u017e\u00edvate\u013e nav\u0161t\u00edvi konkr\u00e9tnu str\u00e1nku a chcete ur\u00fdchli\u0165 jej zobrazenie.<\/p>\n<p>Napriek v\u00fdnimo\u010dnej efekt\u00edvnosti tohto tagu (alebo kv\u00f4li nej) je v roku 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> zle podporovan\u00e9 hlavn\u00fdmi prehliada\u010dmi. Viac inform\u00e1ci\u00ed n\u00e1jdete na <noindex><a rel=\"nofollow\" href=\"#1\">ni\u017e\u0161ie<\/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> ozna\u010duje URL, pre ktor\u00fd chcete spusti\u0165 renderovanie na pozad\u00ed.<\/p>\n<h3>Kedy pou\u017e\u00edva\u0165<\/h3>\n<p>\n<b>Ke\u010f ste si skuto\u010dne ist\u00ed, \u017ee pou\u017e\u00edvate\u013e prejde na konkr\u00e9tnu str\u00e1nku<\/b>. Ak m\u00e1te \u201etunel\u201c, cez ktor\u00fd prech\u00e1dza 70% n\u00e1v\u0161tevn\u00edkov str\u00e1nky A na str\u00e1nku B, tak <code>&lt;link rel= \"prerender\"&gt;<\/code> na str\u00e1nke A ve\u013emi r\u00fdchlo zobraz\u00edte str\u00e1nku B.<\/p>\n<p><b>Nepou\u017e\u00edvajte to nadmerne<\/b>. Predbe\u017en\u00e9 renderovanie je mimoriadne n\u00e1kladn\u00e9 z h\u013eadiska prev\u00e1dzky a pam\u00e4te. Nepou\u017e\u00edvajte <code>&lt;link rel= \"prerender\"&gt;<\/code> viac ako pre jednu str\u00e1nku.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>Volite\u013en\u00e1 zna\u010dka<\/b>. Prehliada\u010d nie je povinn\u00fd dodr\u017eiava\u0165 tento pokyn a m\u00f4\u017ee ho ignorova\u0165, napr\u00edklad pri pomalom pripojen\u00ed alebo nedostato\u010dnom vo\u013enom mieste v pam\u00e4ti.<\/p>\n<p>Kv\u00f4li \u00faspore pam\u00e4te <b>Chrome nevykon\u00e1va \u00fapln\u00e9 renderovanie<\/b>, a <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">iba predna\u010d\u00edtanie NoState<\/a><\/noindex>. To znamen\u00e1, \u017ee Chrome na\u010d\u00edta str\u00e1nku a v\u0161etky jej zdroje, ale nevykon\u00e1va renderovanie a neexecutuje JavaScript.<\/p>\n<p>Firefox a Safari v\u00f4bec tento tag nepodporuj\u00fa. To neporu\u0161uje \u0161pecifik\u00e1ciu, preto\u017ee prehliada\u010de nie s\u00fa povinn\u00e9 tento pokyn vykona\u0165; ale st\u00e1le je to smutn\u00e9. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Chyba implement\u00e1cie<\/a><\/noindex> vo Firefoxe bola otvoren\u00e1 sedem rokov. Existuj\u00fa spr\u00e1vy, \u017ee Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">taktie\u017e tento tag nepodporuje.<\/a><\/noindex>.<\/p>\n<h1>Zhrnutie<\/h1>\n<p>\nPou\u017eite:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 ke\u010f potrebujete zdroj za p\u00e1r sek\u00fand\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 ke\u010f potrebujete zdroj na nasleduj\u00facej str\u00e1nke\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 ke\u010f viete, \u017ee \u010doskoro budete potrebova\u0165 zdroj, ale e\u0161te neviete jeho \u00fapln\u00e9 URL\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 podobne, ke\u010f viete, \u017ee \u010doskoro budete potrebova\u0165 zdroj, ale e\u0161te neviete jeho \u00fapln\u00e9 URL (pre star\u00e9 prehliada\u010de)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 ke\u010f si ste ist\u00ed, \u017ee pou\u017e\u00edvatelia prejd\u00fa na ur\u010dit\u00fa str\u00e1nku a chcete ur\u00fdchli\u0165 jej zobrazenie.<\/li>\n<\/ul>\n<p>Zdroj: <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.4 - 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\/sk\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"sk_SK\" \/>\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\/sk\/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 a in\u00e9 tagy | ProHoster","description":"Existuje mnoho sp\u00f4sobov, ako zv\u00fd\u0161i\u0165 webov\u00fa v\u00fdkonnos\u0165. Jedn\u00fdm z nich je predna\u010d\u00edtanie obsahu, ktor\u00fd bude potrebn\u00fd nesk\u00f4r.","canonical_url":"https:\/\/prohoster.info\/sk\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sk_SK","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\/sk\/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\/sk\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sk\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}