{"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\/cs\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch a dal\u0161\u00ed tagy","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Existuje <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Existuje mnoho zp\u016fsob\u016f, jak zv\u00fd\u0161it v\u00fdkon webu<\/a><\/noindex>. Jedn\u00edm z nich je p\u0159edna\u010d\u00edt\u00e1n\u00ed obsahu, kter\u00fd bude pot\u0159eba pozd\u011bji. Prefetching CSS, p\u0159edrenderov\u00e1n\u00ed cel\u00e9 str\u00e1nky nebo resolvov\u00e1n\u00ed dom\u00e9nov\u00e9ho jm\u00e9na. V\u0161e ud\u011bl\u00e1me p\u0159edem, a pak okam\u017eit\u011b zobraz\u00edme v\u00fdsledek! Zn\u00ed to skv\u011ble.<\/p>\n<p>Je\u0161t\u011b lep\u0161\u00ed je, \u017ee to je velmi jednoduch\u00e9 na implementaci. P\u011bt tag\u016f &lt;link rel&gt; d\u00e1v\u00e1 prohl\u00ed\u017ee\u010di p\u0159\u00edkaz k p\u0159edb\u011b\u017en\u00fdm akc\u00edm:<\/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 \/>\nStru\u010dn\u011b pop\u00ed\u0161eme, co d\u011blaj\u00ed a kdy je pou\u017e\u00edvat.<\/p>\n<p>P\u0159ej\u00edt na: <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> \u0159\u00edk\u00e1 prohl\u00ed\u017ee\u010di, aby co nejd\u0159\u00edve na\u010detl a ulo\u017eit zdroj (nap\u0159\u00edklad skript nebo stylovou tabulku). To je u\u017eite\u010dn\u00e9, kdy\u017e bude zdroj pot\u0159eba za n\u011bkolik sekund po na\u010dten\u00ed str\u00e1nky \u2013 a chcete tento proces urychlit.<\/p>\n<p>Prohl\u00ed\u017ee\u010d nic ned\u011bl\u00e1 se zdrojem po jeho na\u010dten\u00ed. Skripty se nevykon\u00e1vaj\u00ed, stylov\u00e9 tabulky se neuplat\u0148uj\u00ed. Zdrav\u00fd zdroj se pouze uchov\u00e1v\u00e1 v mezipam\u011bti a ihned se poskytuje na po\u017e\u00e1d\u00e1n\u00ed.<\/p>\n<h3>Syntaxe<\/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, kter\u00fd chcete st\u00e1hnout.<\/p>\n<p><code> as<\/code> m\u016f\u017ee b\u00fdt cokoliv, co lze st\u00e1hnout v prohl\u00ed\u017ee\u010di:<\/p>\n<ul>\n<li><code>style<\/code> pro stylov\u00e9 tabulky,\n<\/li>\n<li><code>script<\/code> pro skripty,\n<\/li>\n<li><code>font<\/code> pro p\u00edsma,\n<\/li>\n<li><code>fetch<\/code> pro zdroje na\u010d\u00edtan\u00e9 pomoc\u00ed <code>fetch()<\/code> nebo <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>\u00fapln\u00fd seznam viz. <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>\nJe d\u016fle\u017eit\u00e9 uv\u00e9st atribut <code>as<\/code> \u2013 pom\u00e1h\u00e1 to prohl\u00ed\u017ee\u010di spr\u00e1vn\u011b ur\u010dovat priority a pl\u00e1novat na\u010d\u00edt\u00e1n\u00ed.<\/p>\n<h3>Kdy pou\u017e\u00edt<\/h3>\n<p>\nPou\u017e\u00edvejte p\u0159edna\u010d\u00edt\u00e1n\u00ed, kdy\u017e bude zdroj pot\u0159eba v nejbli\u017e\u0161\u00ed dob\u011b. Nap\u0159\u00edklad:<\/p>\n<ul>\n<li>Nestandardn\u00ed p\u00edsma z extern\u00edho souboru:\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>\nVe v\u00fdchoz\u00edm nastaven\u00ed <code>comic-sans.woff2<\/code> za\u010dne se na\u010d\u00edtat a\u017e po na\u010dten\u00ed a anal\u00fdze <code>index.css<\/code>. Aby nebylo \u010dek\u00e1n\u00ed tak dlouh\u00e9, lze p\u00edsmo na\u010d\u00edst d\u0159\u00edve pomoc\u00ed <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>Pokud rozd\u011blujete sv\u00e9 styly podle p\u0159\u00edstupu <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> na dv\u011b \u010d\u00e1sti, kritickou (pro okam\u017eit\u00e9 vykreslen\u00ed) a nekritickou:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Inline kritick\u00e9 styly *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* Vlastn\u00ed JS, kter\u00fd za\u010dne stahovat nekritick\u00e9 styly *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nP\u0159i tomto p\u0159\u00edstupu se nekritick\u00e9 styly za\u010dnou na\u010d\u00edtat teprve po spu\u0161t\u011bn\u00ed JavaScriptu, co\u017e m\u016f\u017ee prob\u011bhnout n\u011bkolik sekund po vykreslen\u00ed. M\u00edsto \u010dek\u00e1n\u00ed na JS pou\u017eijte <code>&lt;link rel=\"preload\"&gt;<\/code>, abyste spustili na\u010d\u00edt\u00e1n\u00ed d\u0159\u00edve:<\/p>\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Nep\u0159eh\u00e1n\u011bjte to s p\u0159edna\u010d\u00edt\u00e1n\u00edm<\/b>. Pokud budete na\u010d\u00edtat v\u0161echno mo\u017en\u00e9, web se nezrychl\u00ed kouzeln\u00fdm zp\u016fsobem, sp\u00ed\u0161e naopak, m\u016f\u017ee to br\u00e1nit prohl\u00ed\u017ee\u010di v efektivn\u00edm pl\u00e1nov\u00e1n\u00ed pr\u00e1ce.<\/p>\n<p><b> Neple\u0165te si to s prefetchingem<\/b>. Nepou\u017e\u00edvejte <code>&lt;link rel=\"preload\"&gt;<\/code>, pokud nepot\u0159ebujete zdroj hned po na\u010dten\u00ed str\u00e1nky. Pokud bude pot\u0159eba pozd\u011bji, nap\u0159\u00edklad na dal\u0161\u00ed str\u00e1nce, pou\u017eijte <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Detaily<\/h3>\n<p>\n<b>Toto je povinn\u00fd tag<\/b> pro vykon\u00e1n\u00ed prohl\u00ed\u017ee\u010dem (pokud ho podporuje), na rozd\u00edl od ostatn\u00edch tag\u016f , souvisej\u00edc\u00edch s p\u0159edb\u011b\u017en\u00fdm na\u010d\u00edt\u00e1n\u00edm. Prohl\u00ed\u017ee\u010d mus\u00ed na\u010d\u00edst zdroj, uveden\u00fd v <code>&lt;link rel=\"preload\"&gt;<\/code>. V ostatn\u00edch p\u0159\u00edpadech m\u016f\u017ee p\u0159edb\u011b\u017en\u00e9 na\u010d\u00edt\u00e1n\u00ed ignorovat, nap\u0159\u00edklad pokud pracuje na pomal\u00e9m p\u0159ipojen\u00ed.<\/p>\n<p><b>Prioritn\u00ed zdroje<\/b>. R\u016fzn\u00fdm zdroj\u016fm (styly, skripty, p\u00edsma atd.) obvykle prohl\u00ed\u017ee\u010de p\u0159i\u0159azuj\u00ed r\u016fzn\u00e9 priority, aby nejprve na\u010d\u00edtaly ty nejd\u016fle\u017eit\u011bj\u0161\u00ed zdroje. V tomto p\u0159\u00edpad\u011b prohl\u00ed\u017ee\u010d ur\u010duje prioritu podle atributu <code>as<\/code>. Pro prohl\u00ed\u017ee\u010d Chrome m\u016f\u017eete vid\u011bt <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">kompletn\u00ed tabulku priorit<\/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 dal\u0161\u00ed tagy\" 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> po\u017eaduje, aby prohl\u00ed\u017ee\u010d na\u010detl a ulo\u017eit zdroj (nap\u0159\u00edklad skript nebo tabulku styl\u016f) na pozad\u00ed. Na\u010d\u00edt\u00e1n\u00ed prob\u00edh\u00e1 s n\u00edzkou prioritou, tak\u017ee to nebr\u00e1n\u00ed d\u016fle\u017eit\u011bj\u0161\u00edm zdroj\u016fm. To je u\u017eite\u010dn\u00e9, pokud bude zdroj pot\u0159ebn\u00fd na dal\u0161\u00ed str\u00e1nce a chcete si ho p\u0159edem ulo\u017eit do cache.<\/p>\n<p>Ani tady prohl\u00ed\u017ee\u010d s resourcem po na\u010dten\u00ed nic ned\u011bl\u00e1. Skripty se nevykon\u00e1vaj\u00ed, tabulky styl\u016f se neuplat\u0148uj\u00ed. Zdroje se pouze ukl\u00e1daj\u00ed do mezipam\u011bti a okam\u017eit\u011b poskytuj\u00ed na vy\u017e\u00e1d\u00e1n\u00ed.<\/p>\n<h3>Syntaxe<\/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, kter\u00fd chcete st\u00e1hnout.<\/p>\n<p><code> as<\/code> m\u016f\u017ee b\u00fdt cokoliv, co lze st\u00e1hnout v prohl\u00ed\u017ee\u010di:<\/p>\n<ul>\n<li><code>style<\/code> pro stylov\u00e9 tabulky,\n<\/li>\n<li><code>script<\/code> pro skripty,\n<\/li>\n<li><code>font<\/code> pro p\u00edsma,\n<\/li>\n<li><code>fetch<\/code> pro zdroje na\u010d\u00edtan\u00e9 pomoc\u00ed <code>fetch()<\/code> nebo <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>\u00fapln\u00fd seznam viz. <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>\nJe d\u016fle\u017eit\u00e9 uv\u00e9st atribut <code>as<\/code>\u00a0\u2014 pom\u00e1h\u00e1 prohl\u00ed\u017ee\u010di spr\u00e1vn\u011b stanovit priority a pl\u00e1novat na\u010d\u00edt\u00e1n\u00ed.<\/p>\n<h3>Kdy pou\u017e\u00edt<\/h3>\n<p>\n<b>Pro na\u010d\u00edt\u00e1n\u00ed zdroj\u016f z jin\u00fdch str\u00e1nek<\/b>, pokud pot\u0159ebujete zdroj z jin\u00e9 str\u00e1nky a chcete si ho p\u0159ednostn\u011b na\u010d\u00edst, aby se urychlilo vykreslov\u00e1n\u00ed t\u00e9to str\u00e1nky. Nap\u0159\u00edklad:<\/p>\n<ul>\n<li>M\u00e1te internetov\u00fd obchod a 40% u\u017eivatel\u016f opou\u0161t\u00ed hlavn\u00ed str\u00e1nku a p\u0159ech\u00e1z\u00ed na str\u00e1nku produktu. Pou\u017eijte <code>&lt;link rel= \"prefetch\"&gt;<\/code>, na\u010d\u00edt\u00e1n\u00ed CSS a JS soubor\u016f pro vykreslen\u00ed str\u00e1nek s produktem.\n<\/li>\n<li>M\u00e1te jednopage aplikaci, kde r\u016fzn\u00e9 str\u00e1nky na\u010d\u00edtaj\u00ed r\u016fzn\u00e9 bal\u00ed\u010dky. Kdy\u017e u\u017eivatel nav\u0161t\u00edv\u00ed n\u011bjakou str\u00e1nku, je mo\u017en\u00e9 p\u0159edb\u011b\u017en\u011b na\u010d\u00edst bal\u00ed\u010dky pro v\u0161echny str\u00e1nky, na kter\u00e9 odkazuje.<\/li>\n<\/ul>\n<p>\n<b>Mo\u017en\u00e1 lze tento tag bezpe\u010dn\u011b pou\u017e\u00edvat v jak\u00e9mkoli objemu<\/b>. Prohl\u00ed\u017ee\u010de obvykle pl\u00e1nuj\u00ed prefetche s nejni\u017e\u0161\u00ed prioritou, tak\u017ee nikomu nep\u0159ek\u00e1\u017eej\u00ed. Jen m\u011bjte na pam\u011bti, \u017ee se spot\u0159ebov\u00e1v\u00e1 provoz u\u017eivatele, co\u017e m\u016f\u017ee st\u00e1t pen\u00edze.<\/p>\n<p><b>Ne pro urgentn\u00ed po\u017eadavky<\/b>. Nepou\u017e\u00edvejte <code>&lt;link rel= \"prefetch\"&gt;<\/code>, kdy\u017e bude zdroj pot\u0159ebn\u00fd b\u011bhem n\u011bkolika sekund. V tomto p\u0159\u00edpad\u011b pou\u017eijte <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Detaily<\/h3>\n<p>\n<b>Nepovinn\u00fd tag<\/b>. Prohl\u00ed\u017ee\u010d nen\u00ed povinen \u0159\u00eddit se t\u00edmto pokynem, m\u016f\u017ee ho ignorovat, nap\u0159\u00edklad p\u0159i pomal\u00e9m p\u0159ipojen\u00ed.<\/p>\n<p><b>Priorita v Chromu<\/b>. V Chromu <code>&lt;link rel= \"prefetch\"&gt;<\/code> se obvykle prov\u00e1d\u00ed s minim\u00e1ln\u00ed prioritou (viz <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">kompletn\u00ed tabulku priorit<\/a><\/noindex>), tedy po na\u010dten\u00ed v\u0161eho ostatn\u00edho.<\/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> \u017e\u00e1d\u00e1 prohl\u00ed\u017ee\u010d, aby se p\u0159ipojil k dom\u00e9n\u011b p\u0159edem, kdy\u017e chcete urychlit nav\u00e1z\u00e1n\u00ed spojen\u00ed v budoucnu.<\/p>\n<p>Prohl\u00ed\u017ee\u010d by m\u011bl nav\u00e1zat spojen\u00ed, pokud stahuje n\u011bjak\u00e9 zdroje z nov\u00e9 extern\u00ed dom\u00e9ny. Nap\u0159\u00edklad, pokud na\u010d\u00edt\u00e1 p\u00edsma Google Fonts, React z CDN nebo po\u017eaduje odpov\u011b\u010f JSON ze serveru API.<\/p>\n<p>Nav\u00e1z\u00e1n\u00ed nov\u00e9ho spojen\u00ed obvykle trv\u00e1 n\u011bkolik set milisekund. Prov\u00e1d\u00ed se jednou, ale st\u00e1le to zabere \u010das. Pokud jste nav\u00e1zali spojen\u00ed p\u0159edem, u\u0161et\u0159\u00edte \u010das a rychleji na\u010dtete zdroje z t\u00e9to dom\u00e9ny.<\/p>\n<h3>Syntaxe<\/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> ukazuje na dom\u00e9nov\u00e9 jm\u00e9no, pro kter\u00e9 je t\u0159eba ur\u010dit IP adresu. Lze uv\u00e1d\u011bt s prefixem (<code>https:\/\/domain.com<\/code>) nebo bez n\u011bj (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kdy pou\u017e\u00edt<\/h3>\n<p>\n<b>Pou\u017e\u00edvejte pro dom\u00e9ny, kter\u00e9 brzy budete pot\u0159ebovat<\/b> k na\u010dten\u00ed d\u016fle\u017eit\u00e9ho stylu, skriptu nebo obr\u00e1zku, ale zat\u00edm nezn\u00e1te URL zdroje. Nap\u0159\u00edklad:<\/p>\n<ul>\n<li>Va\u0161e aplikace je hostov\u00e1na na <code>my-app.com<\/code> a d\u011bl\u00e1 AJAX po\u017eadavky na <code>api.my-app.com<\/code>: nezn\u00e1te p\u0159edem konkr\u00e9tn\u00ed po\u017eadavky, proto\u017ee se d\u011blaj\u00ed dynamicky z JS. Zde je zcela opr\u00e1vn\u011bn\u00e9 pou\u017eit\u00ed tagu pro p\u0159edb\u011b\u017en\u00e9 p\u0159ipojen\u00ed k dom\u00e9n\u011b.\n<\/li>\n<li>Va\u0161e aplikace je hostov\u00e1na na <code>my-app.com<\/code> a pou\u017e\u00edv\u00e1 p\u00edsma Google Fonts. Ty se na\u010d\u00edtaj\u00ed ve dvou kroc\u00edch: nejprve se na\u010dte CSS soubor z dom\u00e9ny <code>fonts.googleapis.com<\/code>, pot\u00e9 tento soubor po\u017eaduje p\u00edsma z <code>fonts.gstatic.com<\/code>. Nem\u016f\u017eete v\u011bd\u011bt, kter\u00e9 konkr\u00e9tn\u00ed soubory p\u00edsem z <code>fonts.gstatic.com<\/code> budete pot\u0159ebovat, dokud nenahrajete CSS soubor, proto m\u016f\u017eeme p\u0159edem nastavit pouze p\u0159edb\u011b\u017en\u00e9 spojen\u00ed.<\/li>\n<\/ul>\n<p>\n<b>Pou\u017eijte tento tag, abyste trochu urychlili n\u011bjak\u00fd extern\u00ed skript nebo styl.<\/b> d\u00edky p\u0159edb\u011b\u017en\u00e9mu nastaven\u00ed spojen\u00ed.<\/p>\n<p><b>Nep\u0159eh\u00e1n\u011bjte to.<\/b>Nastaven\u00ed a \u00fadr\u017eba spojen\u00ed je n\u00e1kladn\u00e1 operace jak pro klienta, tak pro server. Pou\u017eijte tento tag maxim\u00e1ln\u011b pro 4\u20136 dom\u00e9n.<\/p>\n<h3>Detaily<\/h3>\n<p>\n<b>Nepovinn\u00fd tag<\/b>Prohl\u00ed\u017ee\u010d nemus\u00ed tuto instrukci dodr\u017eovat a m\u016f\u017ee ji ignorovat, nap\u0159\u00edklad pokud ji\u017e bylo nav\u00e1z\u00e1no mnoho spojen\u00ed nebo v n\u011bjak\u00e9m jin\u00e9m p\u0159\u00edpad\u011b.<\/p>\n<p><b>Co zahrnuje proces p\u0159ipojen\u00ed<\/b>. Pro p\u0159ipojen\u00ed k ka\u017ed\u00e9 str\u00e1nce mus\u00ed prohl\u00ed\u017ee\u010d prov\u00e9st n\u00e1sleduj\u00edc\u00ed kroky:<\/p>\n<ul>\n<li><i>Resolving DNS<\/i>. Naj\u00edt IP adresu serveru (<code>216.58.215.78<\/code>) pro dan\u00e9 dom\u00e9nov\u00e9 jm\u00e9no (<code>google.com<\/code>).<\/li>\n<li><i>TCP handshake<\/i>. V\u00fdm\u011bna paket\u016f (klient \u2192 server \u2192 klient), aby se iniciovalo TCP spojen\u00ed se serverem.<\/li>\n<li><i>TLS handshake (pouze pro HTTPS str\u00e1nky)<\/i>. Dva kola v\u00fdm\u011bny paket\u016f (klient \u2192 server \u2192 klient \u2192 server \u2192 klient), aby se iniciovala bezpe\u010dn\u00e1 relace TLS.<\/li>\n<\/ul>\n<p>\nPozn\u00e1mka: HTTP\/3 zlep\u0161\u00ed a urychl\u00ed mechanismus handshake, ale je je\u0161t\u011b daleko.<\/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> \u017e\u00e1d\u00e1 prohl\u00ed\u017ee\u010d, aby provedl p\u0159edb\u011b\u017en\u00e9 vy\u0159e\u0161en\u00ed DNS pro dom\u00e9nu, pokud se k n\u00ed brzy p\u0159ipoj\u00edte a chcete urychlit po\u010d\u00e1te\u010dn\u00ed spojen\u00ed.<\/p>\n<p>Prohl\u00ed\u017ee\u010d by m\u011bl ur\u010dit IP adresu dom\u00e9ny, pokud bude na\u010d\u00edtat n\u011bjak\u00e9 zdroje z nov\u00e9ho extern\u00edho dom\u00e9nov\u00e9ho jm\u00e9na. Nap\u0159\u00edklad na\u010d\u00edt\u00e1n\u00ed p\u00edsem Google Fonts, React z CDN nebo vy\u017eadov\u00e1n\u00ed JSON odpov\u011bdi ze serveru API.<\/p>\n<p>Pro ka\u017edou novou dom\u00e9nu obvykle trv\u00e1 vy\u0159e\u0161en\u00ed DNS z\u00e1znamu kolem 20\u2013120 ms. To ovliv\u0148uje pouze na\u010d\u00edt\u00e1n\u00ed prvn\u00edho zdroje z t\u00e9to dom\u00e9ny, ale st\u00e1le p\u0159edstavuje zpo\u017ed\u011bn\u00ed. Pokud provedeme vy\u0159e\u0161en\u00ed DNS p\u0159edem, u\u0161et\u0159\u00edme \u010das a na\u010dteme zdroj rychleji.<\/p>\n<h3>Syntaxe<\/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> uv\u00e1d\u00ed dom\u00e9nov\u00e9 jm\u00e9no, pro kter\u00e9 m\u00e1 b\u00fdt nastaven\u00e1 IP adresa. M\u016f\u017eete uv\u00e9st s prefixem (<code>https:\/\/domain.com<\/code>) nebo bez n\u011bj (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kdy pou\u017e\u00edt<\/h3>\n<p>\n<b>Pou\u017e\u00edvejte pro dom\u00e9ny, kter\u00e9 brzy budete pot\u0159ebovat<\/b> pro na\u010d\u00edt\u00e1n\u00ed odtud zdroj\u016f, o kter\u00fdch prohl\u00ed\u017ee\u010d nev\u011bd\u011bl p\u0159edem. Nap\u0159\u00edklad:<\/p>\n<ul>\n<li>Va\u0161e aplikace je hostov\u00e1na na <code>my-app.com<\/code> a d\u011bl\u00e1 AJAX po\u017eadavky na <code>api.my-app.com<\/code>: nezn\u00e1te p\u0159edem konkr\u00e9tn\u00ed po\u017eadavky, proto\u017ee se d\u011blaj\u00ed dynamicky z JS. Zde je zcela opr\u00e1vn\u011bn\u00e9 pou\u017eit\u00ed tagu pro p\u0159edb\u011b\u017en\u00e9 p\u0159ipojen\u00ed k dom\u00e9n\u011b.\n<\/li>\n<li>Va\u0161e aplikace je hostov\u00e1na na <code>my-app.com<\/code>, a pou\u017e\u00edv\u00e1 p\u00edsma Google Fonts. Ta se na\u010d\u00edtaj\u00ed ve dvou kroc\u00edch: nejprve se na\u010dte CSS soubor z dom\u00e9ny <code>fonts.googleapis.com<\/code>, pot\u00e9 tento soubor po\u017eaduje p\u00edsma z <code>fonts.gstatic.com<\/code>. Nem\u016f\u017eete v\u011bd\u011bt, kter\u00e9 konkr\u00e9tn\u00ed soubory p\u00edsem z <code>fonts.gstatic.com<\/code> budete pot\u0159ebovat, dokud nenahrajete CSS soubor, proto m\u016f\u017eeme p\u0159edem nastavit pouze p\u0159edb\u011b\u017en\u00e9 spojen\u00ed.<\/li>\n<\/ul>\n<p>\n<b>Pou\u017eijte tento tag, abyste trochu urychlili n\u011bjak\u00fd extern\u00ed skript nebo styl.<\/b> d\u00edky p\u0159edb\u011b\u017en\u00e9mu nastaven\u00ed spojen\u00ed.<\/p>\n<blockquote><p>V\u011bnujte pozornost podobn\u00fdm vlastnostem na <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> a <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Pou\u017e\u00edvat je spole\u010dn\u011b pro jednu dom\u00e9nu obvykle nem\u00e1 smysl: <code>&lt;link rel= \"preconnect\"&gt;<\/code> u\u017e zahrnuje <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> a mnoho dal\u0161\u00edho. To lze obh\u00e1jit ve dvou p\u0159\u00edpadech:<\/p>\n<ul>\n<li><i>Chcete podporovat star\u00e9 prohl\u00ed\u017ee\u010de<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> podporov\u00e1no <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">po\u010d\u00ednaje IE10 a Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> bylo n\u011bjakou dobu podporov\u00e1no v Chrome a Firefoxu, ale do Safari bylo p\u0159id\u00e1no a\u017e v 11.1 a <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">st\u00e1le nen\u00ed podporov\u00e1no v IE\/Edge<\/a><\/noindex>. Pokud je t\u0159eba podporovat tyto prohl\u00ed\u017ee\u010de, pou\u017eijte <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> jako z\u00e1lo\u017en\u00ed mo\u017enost pro <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Chcete urychlit p\u0159ipojen\u00ed k v\u00edce ne\u017e 4\u20136 dom\u00e9n\u00e1m<\/i>. Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> se nedoporu\u010duje pou\u017e\u00edvat s v\u00edce ne\u017e 4\u20136 dom\u00e9nami, proto\u017ee nastaven\u00ed a udr\u017eov\u00e1n\u00ed p\u0159ipojen\u00ed je n\u00e1kladn\u00e1 operace. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> spot\u0159ebov\u00e1v\u00e1 m\u00e9n\u011b zdroj\u016f, tak\u017ee v p\u0159\u00edpad\u011b pot\u0159eby jej pou\u017eijte.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Detaily<\/h3>\n<p>\n<b>Nepovinn\u00fd tag<\/b>. Prohl\u00ed\u017ee\u010d nen\u00ed povinen \u0159\u00eddit se t\u00edmto pokynem, tak\u017ee nemus\u00ed prov\u00e1d\u011bt DNS reslov\u00e1n\u00ed, nap\u0159\u00edklad pokud je na str\u00e1nce mnohem v\u00edce t\u011bchto tag\u016f nebo v jin\u00e9 situaci.<\/p>\n<p><b>Co je DNS<\/b>. Ka\u017ed\u00e9mu serveru na internetu odpov\u00edd\u00e1 jedine\u010dn\u00e1 IP adresa, kter\u00e1 vypad\u00e1 jako <code>216.58.215.78<\/code>. V adresn\u00edm \u0159\u00e1dku prohl\u00ed\u017ee\u010de se obvykle zad\u00e1v\u00e1 n\u00e1zev webu (nap\u0159\u00edklad <code>google.com<\/code>), a servery DNS (Domain Name System) jej p\u0159i\u0159azuj\u00ed k IP adrese serveru (<code>216.58.215.78<\/code>).<\/p>\n<p>Aby prohl\u00ed\u017ee\u010d ur\u010dil IP adresu, mus\u00ed prov\u00e9st dotaz na DNS server. To trv\u00e1 20\u2013120 ms p\u0159i p\u0159ipojen\u00ed k nov\u00e9 extern\u00ed dom\u00e9n\u011b.<\/p>\n<p><b>DNS se ukl\u00e1d\u00e1 do cache, i kdy\u017e ne p\u0159\u00edli\u0161 spolehliv\u011b<\/b>. N\u011bkter\u00e9 opera\u010dn\u00ed syst\u00e9my a prohl\u00ed\u017ee\u010de ukl\u00e1daj\u00ed DNS dotazy do cache: to u\u0161et\u0159\u00ed \u010das p\u0159i opakovan\u00fdch dotazech, ale na caching se nelze spol\u00e9hat. V Linuxu to obvykle v\u016fbec nefunguje. Chrome m\u00e1 DNS cache, ale \u017eije jen minutu. Windows ukl\u00e1d\u00e1 DNS odpov\u011bdi do cache po dobu p\u011bti dn\u016f.<\/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> \u017e\u00e1d\u00e1 prohl\u00ed\u017ee\u010d, aby na\u010detl URL a zobrazil jej na skryt\u00e9 kart\u011b. Kdy\u017e u\u017eivatel klikne na odkaz, str\u00e1nka se m\u00e1 zobrazit okam\u017eit\u011b. To je u\u017eite\u010dn\u00e9, pokud si jste jisti, \u017ee u\u017eivatel nav\u0161t\u00edv\u00ed ur\u010ditou str\u00e1nku a chcete urychlit jej\u00ed zobrazen\u00ed.<\/p>\n<p>Navzdory v\u00fdjime\u010dn\u00e9 efektivit\u011b tohoto tagu (nebo kv\u016fli n\u00ed) je v roce 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> \u0161patn\u011b podporov\u00e1n hlavn\u00edmi prohl\u00ed\u017ee\u010di. V\u00edce informac\u00ed viz <noindex><a rel=\"nofollow\" href=\"#1\">n\u00ed\u017ee<\/a><\/noindex>.<\/p>\n<h3>Syntaxe<\/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> odkazuje na URL, pro kterou chcete spustit rendering na pozad\u00ed.<\/p>\n<h3>Kdy pou\u017e\u00edt<\/h3>\n<p>\n<b>Kdy\u017e si opravdu jste jisti, \u017ee u\u017eivatel p\u0159ejde na ur\u010ditou str\u00e1nku<\/b>Pokud m\u00e1te \u201etunnel\u201c, p\u0159es kter\u00fd 70 % n\u00e1v\u0161t\u011bvn\u00edk\u016f ze str\u00e1nky A p\u0159ech\u00e1z\u00ed na str\u00e1nku B, pak <code>&lt;link rel= \"prerender\"&gt;<\/code> na str\u00e1nce A velmi rychle zobraz\u00ed str\u00e1nku B.<\/p>\n<p><b>Nep\u0159eh\u00e1n\u011bjte to.<\/b>P\u0159edb\u011b\u017en\u00e9 vykreslov\u00e1n\u00ed je extr\u00e9mn\u011b n\u00e1kladn\u00e9 z pohledu provozu a pam\u011bti. Nepou\u017e\u00edvejte <code>&lt;link rel= \"prerender\"&gt;<\/code> v\u00edce ne\u017e pro jednu str\u00e1nku.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Detaily<\/h3>\n<p>\n<b>Nepovinn\u00fd tag<\/b>Prohl\u00ed\u017ee\u010d nen\u00ed povinen tuto instrukci dodr\u017eovat a m\u016f\u017ee ji ignorovat, nap\u0159\u00edklad p\u0159i pomal\u00e9m p\u0159ipojen\u00ed nebo p\u0159i nedostate\u010dn\u00e9m mno\u017estv\u00ed voln\u00e9 pam\u011bti.<\/p>\n<p>Z d\u016fvodu \u00faspory pam\u011bti <b>Chrome neprov\u00e1d\u00ed \u00fapln\u00e9 vykreslov\u00e1n\u00ed,<\/b>, a <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">pouze p\u0159edna\u010d\u00edt\u00e1n\u00ed NoState.<\/a><\/noindex>To znamen\u00e1, \u017ee Chrome na\u010dte str\u00e1nku a v\u0161echny jej\u00ed zdroje, ale nevykresl\u00ed je a nevykon\u00e1 JavaScript.<\/p>\n<p>Firefox a Safari tento tag v\u016fbec nepodporuj\u00ed. To neporu\u0161uje specifikaci, proto\u017ee prohl\u00ed\u017ee\u010de nejsou povinny tuto instrukci dodr\u017eovat; p\u0159esto je to smutn\u00e9. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Chyba implementace<\/a><\/noindex> ve Firefoxu byla otev\u0159ena sedm let. Jsou zpr\u00e1vy, \u017ee Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">tak\u00e9 tento tag nepodporuje.<\/a><\/noindex>.<\/p>\n<h1>Shrnut\u00ed<\/h1>\n<p>\nPou\u017e\u00edvejte:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 kdy\u017e budete pot\u0159ebovat zdroj za p\u00e1r sekund,\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 kdy\u017e bude pot\u0159eba zdroj na n\u00e1sleduj\u00edc\u00ed str\u00e1nce,\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 kdy\u017e v\u00edte, \u017ee brzy budete pot\u0159ebovat zdroj, ale je\u0161t\u011b nezn\u00e1te jeho \u00faplnou URL,\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 obdobn\u011b, kdy\u017e v\u00edte, \u017ee brzy budete pot\u0159ebovat zdroj, ale st\u00e1le nezn\u00e1te jeho \u00faplnou URL (pro star\u0161\u00ed prohl\u00ed\u017ee\u010de),\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 kdy\u017e jste si jisti, \u017ee u\u017eivatel\u00e9 p\u0159ejdou na ur\u010ditou str\u00e1nku a chcete urychlit jej\u00ed zobrazov\u00e1n\u00ed.<\/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.3 - 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\/cs\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"cs_CZ\" \/>\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\/cs\/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\udd47P\u0159edna\u010d\u00edt\u00e1n\u00ed, p\u0159edprefetch a dal\u0161\u00ed tagy | ProHoster","description":"Existuje mnoho zp\u016fsob\u016f, jak zv\u00fd\u0161it v\u00fdkonnost webu. Jedn\u00edm z nich je p\u0159edna\u010d\u00edt\u00e1n\u00ed obsahu, kter\u00fd budete pot\u0159ebovat pozd\u011bji.","canonical_url":"https:\/\/prohoster.info\/cs\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"cs_CZ","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\/cs\/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\/cs\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}