{"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\/hu\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch \u00e9s m\u00e1s c\u00edmk\u00e9k","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Van <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Sz\u00e1mos m\u00f3dja van a webes teljes\u00edtm\u00e9ny jav\u00edt\u00e1s\u00e1nak<\/a><\/noindex>. Az egyik a k\u00e9s\u0151bb sz\u00fcks\u00e9ges tartalom el\u0151t\u00f6lt\u00e9se. CSS prefetching, teljes oldal el\u0151renderel\u00e9se vagy domain n\u00e9v felold\u00e1sa. El\u0151k\u00e9sz\u00edt\u00fcnk mindent el\u0151re, majd azonnal megjelen\u00edtj\u00fck az eredm\u00e9nyt! J\u00f3l hangzik.<\/p>\n<p>M\u00e9g jobb, hogy ezt nagyon egyszer\u0171en megval\u00f3s\u00edthatjuk. \u00d6t &lt;link rel&gt; c\u00edmke adja a b\u00f6ng\u00e9sz\u0151nek az utas\u00edt\u00e1st az el\u0151k\u00e9sz\u00edt\u0151 l\u00e9p\u00e9sekhez:<\/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 \/>\nR\u00f6viden elmagyar\u00e1zzuk, hogy mit csin\u00e1lnak \u00e9s mikor \u00e9rdemes \u0151ket haszn\u00e1lni.<\/p>\n<p>Ugr\u00e1s ide: <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> jelzi a b\u00f6ng\u00e9sz\u0151nek, hogy a lehet\u0151 leghamarabb t\u00f6ltse le \u00e9s cache-elje a forr\u00e1st (p\u00e9ld\u00e1ul egy scriptet vagy CSS f\u00e1jlt). Ez hasznos, ha a forr\u00e1sra n\u00e9h\u00e1ny m\u00e1sodpercen bel\u00fcl sz\u00fcks\u00e9g lesz a lap bet\u00f6lt\u00e9se ut\u00e1n \u2014 \u00e9s szeretn\u00e9d felgyors\u00edtani a folyamatot.<\/p>\n<p>A b\u00f6ng\u00e9sz\u0151 nem csin\u00e1l semmit a forr\u00e1ssal a let\u00f6lt\u00e9s ut\u00e1n. A script-ek nem futnak, a CSS f\u00e1jlok nem ker\u00fclnek alkalmaz\u00e1sra. A forr\u00e1s egyszer\u0171en cache-lve van \u00e9s azonnal rendelkez\u00e9sre \u00e1ll k\u00e9r\u00e9sre.<\/p>\n<h3>Szintaxis<\/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> megadja a let\u00f6lteni k\u00edv\u00e1nt forr\u00e1st.<\/p>\n<p><code> as<\/code> b\u00e1rmilyen dolog lehet, amit a b\u00f6ng\u00e9sz\u0151 let\u00f6lthet:<\/p>\n<ul>\n<li><code>style<\/code> st\u00edluslapokhoz,\n<\/li>\n<li><code>script<\/code> script-ekhez,\n<\/li>\n<li><code>font<\/code> bet\u0171t\u00edpusokhoz,\n<\/li>\n<li><code>fetch-t<\/code> azokhoz a forr\u00e1sokhoz, amiket a <code>fetch()<\/code> vagy <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>teljes lista ld. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">a MDN-en<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nFontos megadni az attrib\u00fatumot <code>as<\/code> \u2014 ez seg\u00edt a b\u00f6ng\u00e9sz\u0151nek helyesen prioritiz\u00e1lni \u00e9s \u00fctemezni a let\u00f6lt\u00e9st.<\/p>\n<h3>Mikor haszn\u00e1ljuk<\/h3>\n<p>\nHaszn\u00e1lj el\u0151t\u00f6lt\u00e9st, ha a forr\u00e1sra a lehet\u0151 leghamarabb sz\u00fcks\u00e9g lesz. P\u00e9ld\u00e1ul:<\/p>\n<ul>\n<li>K\u00fcls\u0151 f\u00e1jlokb\u00f3l sz\u00e1rmaz\u00f3 nem szabv\u00e1nyos bet\u0171t\u00edpusok:\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>\nm\u00e1r tartalmaz egy el\u0151re l\u00e9trehozott \u00f6nal\u00e1\u00edrt TLS\/SSL tan\u00fas\u00edtv\u00e1nyt. Ennyi nekem elegend\u0151, mivel z\u00e1rva tartom a k\u00fcls\u0151 hozz\u00e1f\u00e9r\u00e9st. Azoknak, akik m\u00e1s t\u00edpus\u00fa tan\u00fas\u00edtv\u00e1nyokat szeretn\u00e9nek haszn\u00e1lni, van <code>comic-sans.woff2<\/code> csak a bet\u00f6lt\u00e9s \u00e9s a parse ut\u00e1n kezd el bet\u00f6lt\u0151dni. <code>index.css<\/code>Hogy ne kelljen olyan sok\u00e1ig v\u00e1rni, a bet\u0171t\u00edpust kor\u00e1bban is bet\u00f6ltheted ezzel: <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>Ha a st\u00edlusaidat a <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> megk\u00f6zel\u00edt\u00e9s szerint k\u00e9t r\u00e9szre osztod, kritikusra (az azonnali renderel\u00e9shez) \u00e9s nem kritikusra:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Inline kritikus st\u00edlusok *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* Egyedi JS, ami elkezdi let\u00f6lteni a nem kritikus st\u00edlusokat *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nEzen megk\u00f6zel\u00edt\u00e9s mellett a nem kritikus st\u00edlusok csak JavaScript bet\u00f6lt\u00e9sekor kezd\u0151dnek el, ami n\u00e9h\u00e1ny m\u00e1sodperccel a renderel\u00e9s ut\u00e1n t\u00f6rt\u00e9nhet meg. A JS v\u00e1rakoz\u00e1sa helyett haszn\u00e1lja <code>&lt;link rel=\"preload\"&gt;<\/code>, hogy kor\u00e1bban kezdje a bet\u00f6lt\u00e9st:<\/p>\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Ne haszn\u00e1lja t\u00falz\u00e1sba a preloaded-t<\/b>. Ha mindent egyszerre t\u00f6lt be, a webhely nem fog var\u00e1zslatos m\u00f3don felgyorsulni, ink\u00e1bb \u00e9ppen ellenkez\u0151leg, megnehez\u00edti a b\u00f6ng\u00e9sz\u0151 sz\u00e1m\u00e1ra a megfelel\u0151 munkamenet tervez\u00e9s\u00e9t.<\/p>\n<p><b> Ne keverje \u00f6ssze a prefetch-el<\/b>. Ne haszn\u00e1lja <code>&lt;link rel=\"preload\"&gt;<\/code>, ha a forr\u00e1sra azonnal nincs sz\u00fcks\u00e9ge az oldal bet\u00f6lt\u00e9se ut\u00e1n. Ha k\u00e9s\u0151bb sz\u00fcks\u00e9ge lesz r\u00e1, p\u00e9ld\u00e1ul a k\u00f6vetkez\u0151 oldalhoz, akkor haszn\u00e1lja <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>R\u00e9szletek<\/h3>\n<p>\n<b>Ez egy k\u00f6telez\u0151 tag<\/b> a b\u00f6ng\u00e9sz\u0151 v\u00e9grehajt\u00e1sa sz\u00e1m\u00e1ra (ha t\u00e1mogatja), ellent\u00e9tben az \u00f6sszes t\u00f6bbi  taggal, amelyek a preload-hoz kapcsol\u00f3dnak. A b\u00f6ng\u00e9sz\u0151nek k\u00f6telez\u0151 bet\u00f6lteni a forr\u00e1st, amelyet a <code>&lt;link rel=\"preload\"&gt;<\/code>meghat\u00e1roz. M\u00e1s esetekben el\u0151fordulhat, hogy figyelmen k\u00edv\u00fcl hagyja a preload-ot, p\u00e9ld\u00e1ul, ha lass\u00fa kapcsolaton dolgozik.<\/p>\n<p><b>Priorit\u00e1sok<\/b>. K\u00fcl\u00f6nb\u00f6z\u0151 forr\u00e1soknak (st\u00edlusok, szkriptek, bet\u0171k stb.) a b\u00f6ng\u00e9sz\u0151k \u00e1ltal\u00e1ban elt\u00e9r\u0151 priorit\u00e1sokat rendelnek, hogy el\u0151sz\u00f6r a legfontosabb forr\u00e1sokat t\u00f6lts\u00e9k be. Ebb\u0151l a szempontb\u00f3l a b\u00f6ng\u00e9sz\u0151 a <code>as<\/code>attrib\u00fatum alapj\u00e1n hat\u00e1rozza meg a priorit\u00e1st. A Chrome b\u00f6ng\u00e9sz\u0151 sz\u00e1m\u00e1ra megteheti <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">a priorit\u00e1sok teljes t\u00e1bl\u00e1zat\u00e1t<\/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 \u00e9s m\u00e1s c\u00edmk\u00e9k\" 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> k\u00e9ri a b\u00f6ng\u00e9sz\u0151t, hogy t\u00f6ltse le \u00e9s t\u00e1rolja a forr\u00e1st (p\u00e9ld\u00e1ul egy szkriptet vagy st\u00edluslapot) h\u00e1tt\u00e9rben. A bet\u00f6lt\u00e9s alacsony priorit\u00e1ssal t\u00f6rt\u00e9nik, \u00edgy nem akad\u00e1lyozza a fontosabb forr\u00e1sokat. Ez hasznos, ha a forr\u00e1sra a k\u00f6vetkez\u0151 oldalon sz\u00fcks\u00e9ge lesz, \u00e9s el\u0151re szeretn\u00e9 t\u00e1rolni.<\/p>\n<p>Itt is a b\u00f6ng\u00e9sz\u0151 nem tesz semmit a forr\u00e1ssal a bet\u00f6lt\u00e9s ut\u00e1n. A szkriptek nem futnak, a st\u00edluslapok nem alkalmaz\u00f3dnak. A forr\u00e1s csak t\u00e1rol\u00f3dik \u00e9s azonnal rendelkez\u00e9sre \u00e1ll k\u00e9r\u00e9s eset\u00e9n.<\/p>\n<h3>Szintaxis<\/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> megadja a let\u00f6lteni k\u00edv\u00e1nt forr\u00e1st.<\/p>\n<p><code> as<\/code> b\u00e1rmilyen dolog lehet, amit a b\u00f6ng\u00e9sz\u0151 let\u00f6lthet:<\/p>\n<ul>\n<li><code>style<\/code> st\u00edluslapokhoz,\n<\/li>\n<li><code>script<\/code> script-ekhez,\n<\/li>\n<li><code>font<\/code> bet\u0171t\u00edpusokhoz,\n<\/li>\n<li><code>fetch-t<\/code> azokhoz a forr\u00e1sokhoz, amiket a <code>fetch()<\/code> vagy <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>teljes lista ld. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">a MDN-en<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nFontos megadni az attrib\u00fatumot <code>as<\/code>\u00a0\u2014 ez seg\u00edt a b\u00f6ng\u00e9sz\u0151nek a priorit\u00e1sok helyes be\u00e1ll\u00edt\u00e1s\u00e1ban \u00e9s a bet\u00f6lt\u00e9s tervez\u00e9s\u00e9ben.<\/p>\n<h3>Mikor haszn\u00e1ljuk<\/h3>\n<p>\n<b>M\u00e1s oldalakr\u00f3l sz\u00e1rmaz\u00f3 forr\u00e1sok let\u00f6lt\u00e9s\u00e9hez<\/b>, ha egy m\u00e1sik oldalr\u00f3l sz\u00fcks\u00e9ge van a forr\u00e1sra, \u00e9s szeretn\u00e9 el\u0151re bet\u00f6lteni, hogy k\u00e9s\u0151bb felgyors\u00edthassa az adott oldal renderel\u00e9s\u00e9t. P\u00e9ld\u00e1ul:<\/p>\n<ul>\n<li>\u00d6nnek van egy online boltja, \u00e9s a felhaszn\u00e1l\u00f3k 40%-a elhagyja a f\u0151oldalt a term\u00e9koldalra. Haszn\u00e1lja <code>&lt;link rel= \"prefetch\"&gt;<\/code>, CSS \u00e9s JS f\u00e1jlok bet\u00f6lt\u00e9se a term\u00e9koldalak megjelen\u00edt\u00e9s\u00e9hez.\n<\/li>\n<li>Egyoldalas alkalmaz\u00e1sod van, ahol a k\u00fcl\u00f6nb\u00f6z\u0151 oldalak k\u00fcl\u00f6nb\u00f6z\u0151 csomagokat t\u00f6ltenek be. Amikor a felhaszn\u00e1l\u00f3 megl\u00e1togat egy oldalt, el\u0151t\u00f6ltheted az \u00f6sszes csomagot, amelyre az hivatkozik.<\/li>\n<\/ul>\n<p>\n<b>Val\u00f3sz\u00edn\u0171leg ezt a taget biztons\u00e1gosan haszn\u00e1lhatod b\u00e1rmilyen mennyis\u00e9gben.<\/b>. A b\u00f6ng\u00e9sz\u0151k \u00e1ltal\u00e1ban a prefetch-t a legalacsonyabb priorit\u00e1ssal tervezik, \u00edgy senkinek sem zavar\u00f3. Csak tartsd \u00e9szben, hogy a felhaszn\u00e1l\u00f3 forgalm\u00e1t haszn\u00e1lja fel, ami p\u00e9nzbe ker\u00fclhet.<\/p>\n<p><b>Nem s\u00fcrg\u0151s k\u00e9r\u00e9sekhez.<\/b>. Ne haszn\u00e1lja <code>&lt;link rel= \"prefetch\"&gt;<\/code>, amikor a forr\u00e1sra n\u00e9h\u00e1ny m\u00e1sodpercen bel\u00fcl sz\u00fcks\u00e9ged van. Ilyen esetben alkalmazd a <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>R\u00e9szletek<\/h3>\n<p>\n<b>Nem k\u00f6telez\u0151 tag.<\/b>. A b\u00f6ng\u00e9sz\u0151nek nem k\u00f6teless\u00e9ge k\u00f6vetni ezt az utas\u00edt\u00e1st, figyelmen k\u00edv\u00fcl hagyhatja, p\u00e9ld\u00e1ul lass\u00fa kapcsolaton.<\/p>\n<p><b>Priorit\u00e1s a Chrome-ban.<\/b>. A Chrome-ban <code>&lt;link rel= \"prefetch\"&gt;<\/code> \u00e1ltal\u00e1ban minim\u00e1lis priorit\u00e1ssal fut (l\u00e1sd a <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">a priorit\u00e1sok teljes t\u00e1bl\u00e1zat\u00e1t<\/a><\/noindex>), azaz minden m\u00e1s bet\u00f6lt\u00e9se ut\u00e1n.<\/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> k\u00e9rheti a b\u00f6ng\u00e9sz\u0151t, hogy csatlakozzon a domainhez el\u0151re, amikor szeretn\u00e9d felgyors\u00edtani a j\u00f6v\u0151beli kapcsolat l\u00e9tes\u00edt\u00e9s\u00e9t.<\/p>\n<p>A b\u00f6ng\u00e9sz\u0151nek l\u00e9tre kell hoznia a kapcsolatot, ha forr\u00e1sokat von ki egy \u00faj k\u00fcls\u0151 domainr\u0151l. P\u00e9ld\u00e1ul, ha Google Fonts bet\u0171t\u00edpusokat, React-et t\u00f6ltesz be a CDN-r\u0151l, vagy JSON v\u00e1laszt k\u00e9rsz az API szerverr\u0151l.<\/p>\n<p>\u00daj kapcsolat l\u00e9tes\u00edt\u00e9se \u00e1ltal\u00e1ban n\u00e9h\u00e1ny sz\u00e1z milliszekundumot vesz ig\u00e9nybe. Ez egyszer t\u00f6rt\u00e9nik meg, de \u00edgy is id\u0151t vesz el. Ha el\u0151re l\u00e9tes\u00edted a kapcsolatot, id\u0151t takar\u00edthatsz meg, \u00e9s gyorsabban t\u00f6ltheted le a forr\u00e1sokat err\u0151l a domainr\u0151l.<\/p>\n<h3>Szintaxis<\/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> megmutatja a domainnevet, amelynek IP-c\u00edm\u00e9t meg kell hat\u00e1rozni. \u00c1ll\u00edthat\u00f3 el\u0151taggal (<code>https:\/\/domain.com<\/code>) vagy an\u00e9lk\u00fcl (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Mikor haszn\u00e1ljuk<\/h3>\n<p>\n<b>Haszn\u00e1lj olyan domaineket, amelyekre hamarosan sz\u00fcks\u00e9ged lesz<\/b> fontos st\u00edlus, script vagy k\u00e9p bet\u00f6lt\u00e9s\u00e9re, de m\u00e9g nem ismered a forr\u00e1s URL-j\u00e9t. P\u00e9ld\u00e1ul:<\/p>\n<ul>\n<li>Az alkalmaz\u00e1sod ezen a helyen fut <code>my-app.com<\/code> \u00e9s AJAX k\u00e9r\u00e9seket ind\u00edt a <code>api.my-app.com<\/code>: nem tudod el\u0151re a konkr\u00e9t k\u00e9r\u00e9seket, mert azok dinamikusan k\u00e9sz\u00fclnek a JS-b\u0151l. Itt teljesen indokolt a tag haszn\u00e1lata az el\u0151zetes csatlakoz\u00e1sra a domainhez.\n<\/li>\n<li>Az alkalmaz\u00e1sod ezen a helyen fut <code>my-app.com<\/code> \u00e9s a Google Fonts bet\u0171t\u00edpusokat haszn\u00e1lja. Ezeket k\u00e9t l\u00e9p\u00e9sben t\u00f6ltik be: el\u0151sz\u00f6r a CSS f\u00e1jl bet\u00f6lt\u00e9se t\u00f6rt\u00e9nik a k\u00f6vetkez\u0151 domainr\u0151l <code>fonts.googleapis.com<\/code>, majd ez a f\u00e1jl k\u00e9ri a bet\u0171t\u00edpusokat a <code>fonts.gstatic.com<\/code>. Nem tudod, hogy pontosan mely bet\u0171t\u00edpus f\u00e1jlok fognak <code>fonts.gstatic.com<\/code> Sz\u00fcks\u00e9ged lesz r\u00e1, am\u00edg le nem t\u00f6lt\u00f6d a CSS f\u00e1jlt, ez\u00e9rt el\u0151re csak egy el\u0151zetes kapcsolatot tudunk l\u00e9trehozni.<\/li>\n<\/ul>\n<p>\n<b>Haszn\u00e1lj ezt a tagelet, hogy kiss\u00e9 felgyors\u00edts egy k\u00fcls\u0151 scriptet vagy st\u00edlust.<\/b> az el\u0151zetes kapcsolat l\u00e9trehoz\u00e1s\u00e1val.<\/p>\n<p><b>Ne abusz\u00e1lj vele.<\/b>A kapcsolat l\u00e9trehoz\u00e1sa \u00e9s fenntart\u00e1sa k\u00f6lts\u00e9ges m\u0171velet az \u00fcgyf\u00e9l \u00e9s a szerver sz\u00e1m\u00e1ra egyar\u00e1nt. Haszn\u00e1lj ezt a taget maximum 4-6 domain eset\u00e9n.<\/p>\n<h3>R\u00e9szletek<\/h3>\n<p>\n<b>Nem k\u00f6telez\u0151 tag.<\/b>A b\u00f6ng\u00e9sz\u0151 nem k\u00f6teles k\u00f6vetni ezt az utas\u00edt\u00e1st, \u00e9s figyelmen k\u00edv\u00fcl hagyhatja, p\u00e9ld\u00e1ul ha m\u00e1r sok kapcsolat van be\u00e1ll\u00edtva, vagy m\u00e1s esetekben.<\/p>\n<p><b>Mit tartalmaz a csatlakoz\u00e1si folyamat<\/b>. A b\u00f6ng\u00e9sz\u0151nek a minden egyes webhelyhez val\u00f3 csatlakoz\u00e1s\u00e1hoz a k\u00f6vetkez\u0151 l\u00e9p\u00e9seket kell v\u00e9grehajtania:<\/p>\n<ul>\n<li><i>DNS felold\u00e1s<\/i>. Megkeresi a szerver IP-c\u00edm\u00e9t (<code>216.58.215.78<\/code>) a megadott domain n\u00e9vhez (<code>mrkaran.dev<\/code>).<\/li>\n<li><i>TCP k\u00e9zfog\u00f3<\/i>. Csomagcsere (\u00fcgyf\u00e9l \u2192 szerver \u2192 \u00fcgyf\u00e9l), hogy TCP kapcsolatot kezdem\u00e9nyezzen a szerverrel.<\/li>\n<li><i>TLS k\u00e9zfog\u00f3 (csak HTTPS webhelyekhez)<\/i>. K\u00e9t k\u00f6r csomagcser\u00e9t v\u00e9gez (\u00fcgyf\u00e9l \u2192 szerver \u2192 \u00fcgyf\u00e9l \u2192 szerver \u2192 \u00fcgyf\u00e9l), hogy biztons\u00e1gos TLS munkamenetet ind\u00edtson.<\/li>\n<\/ul>\n<p>\nMegjegyz\u00e9s: Az HTTP\/3 jav\u00edtja \u00e9s felgyors\u00edtja a k\u00e9zfog\u00f3 mechanizmust, de m\u00e9g mindig messze van.<\/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> k\u00e9ri a b\u00f6ng\u00e9sz\u0151t, hogy el\u0151re hajtsa v\u00e9gre a DNS felold\u00e1st a domainhez, ha hamarosan csatlakozni fogsz hozz\u00e1, \u00e9s szeretn\u00e9d felgyors\u00edtani a kezdeti kapcsolatot.<\/p>\n<p>A b\u00f6ng\u00e9sz\u0151nek meg kell hat\u00e1roznia a domain IP-c\u00edm\u00e9t, ha \u00faj k\u00fcls\u0151 domainr\u0151l szeretne er\u0151forr\u00e1sokat bet\u00f6lteni. P\u00e9ld\u00e1ul Google Fonts bet\u00f6lt\u00e9se, React CDN-b\u0151l vagy JSON v\u00e1lasz lek\u00e9r\u00e9se API szervert\u0151l.<\/p>\n<p>Minden \u00faj domain eset\u00e9n a DNS rekord felold\u00e1sa \u00e1ltal\u00e1ban k\u00f6r\u00fclbel\u00fcl 20-120 ms-ot vesz ig\u00e9nybe. Ez csak a domainr\u0151l els\u0151k\u00e9nt bet\u00f6lt\u00f6tt er\u0151forr\u00e1sra vonatkozik, de \u00edgy is k\u00e9sleked\u00e9st jelent. Ha el\u0151re hajtjuk v\u00e9gre a DNS felold\u00e1st, id\u0151t takar\u00edthatunk meg, \u00e9s gyorsabban bet\u00f6lthetj\u00fck az er\u0151forr\u00e1st.<\/p>\n<h3>Szintaxis<\/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> megadja a domain nevet, amelyhez IP-c\u00edmet kell be\u00e1ll\u00edtani. Megadhat\u00f3 el\u0151t\u00fck\u00f6rrel (<code>https:\/\/domain.com<\/code>) vagy an\u00e9lk\u00fcl (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Mikor haszn\u00e1ljuk<\/h3>\n<p>\n<b>Haszn\u00e1lj olyan domaineket, amelyekre hamarosan sz\u00fcks\u00e9ged lesz<\/b> az ottani er\u0151forr\u00e1sok bet\u00f6lt\u00e9s\u00e9hez, amelyeket a b\u00f6ng\u00e9sz\u0151 nem ismer el\u0151re. P\u00e9ld\u00e1ul:<\/p>\n<ul>\n<li>Az alkalmaz\u00e1sod ezen a helyen fut <code>my-app.com<\/code> \u00e9s AJAX k\u00e9r\u00e9seket ind\u00edt a <code>api.my-app.com<\/code>: nem tudod el\u0151re a konkr\u00e9t k\u00e9r\u00e9seket, mert azok dinamikusan k\u00e9sz\u00fclnek a JS-b\u0151l. Itt teljesen indokolt a tag haszn\u00e1lata az el\u0151zetes csatlakoz\u00e1sra a domainhez.\n<\/li>\n<li>Az alkalmaz\u00e1sod ezen a helyen fut <code>my-app.com<\/code>, \u00e9s Google Fonts bet\u00f6lt\u00e9seket haszn\u00e1l. Ezek k\u00e9t l\u00e9p\u00e9sben t\u00f6lt\u0151dnek be: el\u0151sz\u00f6r a CSS f\u00e1jl t\u00f6lt\u0151dik le a domainr\u0151l. <code>fonts.googleapis.com<\/code>, majd ez a f\u00e1jl k\u00e9ri a bet\u0171t\u00edpusokat a <code>fonts.gstatic.com<\/code>. Nem tudod, hogy pontosan mely bet\u0171t\u00edpus f\u00e1jlok fognak <code>fonts.gstatic.com<\/code> Sz\u00fcks\u00e9ged lesz r\u00e1, am\u00edg le nem t\u00f6lt\u00f6d a CSS f\u00e1jlt, ez\u00e9rt el\u0151re csak egy el\u0151zetes kapcsolatot tudunk l\u00e9trehozni.<\/li>\n<\/ul>\n<p>\n<b>Haszn\u00e1lj ezt a tagelet, hogy kiss\u00e9 felgyors\u00edts egy k\u00fcls\u0151 scriptet vagy st\u00edlust.<\/b> az el\u0151zetes kapcsolat l\u00e9trehoz\u00e1s\u00e1val.<\/p>\n<blockquote><p>K\u00e9rlek, figyelj a hasonl\u00f3 jellemz\u0151kre a <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> \u00e9s <code>&lt;link rel= \"preconnect\"&gt;<\/code>. \u00c1ltal\u00e1ban nincs \u00e9rtelme \u0151ket egy domainhez haszn\u00e1lni: <code>&lt;link rel= \"preconnect\"&gt;<\/code> m\u00e1r tartalmazza <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> \u00e9s m\u00e9g sok m\u00e1st. K\u00e9t esetben lehet indokolt:<\/p>\n<ul>\n<li><i>A r\u00e9gi b\u00f6ng\u00e9sz\u0151k t\u00e1mogat\u00e1s\u00e1ra van sz\u00fcks\u00e9g<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> t\u00e1mogatott <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">IE10-t\u0151l \u00e9s Safari 5-t\u0151l kezd\u0151d\u0151en<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> egy ideig a Chrome \u00e9s a Firefox is t\u00e1mogatta, de a Safari 11.1-ben lett hozz\u00e1adva \u00e9s <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">m\u00e9g mindig nem t\u00e1mogatja az IE\/Edge<\/a><\/noindex>. Ha ezeket a b\u00f6ng\u00e9sz\u0151ket kell t\u00e1mogatni, haszn\u00e1ljon <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> mint tartal\u00e9k opci\u00f3t <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>A kapcsolat gyors\u00edt\u00e1s\u00e1ra t\u00f6bb mint 4\u20136 domainhez<\/i>. A tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> nem aj\u00e1nlott t\u00f6bb mint 4\u20136 domainn\u00e9l, mivel a kapcsolat l\u00e9trehoz\u00e1sa \u00e9s fenntart\u00e1sa k\u00f6lts\u00e9ges m\u0171velet. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> kevesebb er\u0151forr\u00e1st fogyaszt, ez\u00e9rt sz\u00fcks\u00e9g eset\u00e9n haszn\u00e1lja.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>R\u00e9szletek<\/h3>\n<p>\n<b>Nem k\u00f6telez\u0151 tag.<\/b>. A b\u00f6ng\u00e9sz\u0151 nem k\u00f6teles k\u00f6vetni ezt az utas\u00edt\u00e1st, ez\u00e9rt lehet, hogy nem hajtja v\u00e9gre a DNS felold\u00e1st, p\u00e9ld\u00e1ul ha a lapon sok ilyen tag van, vagy valamilyen m\u00e1s esetben.<\/p>\n<p><b>Mi az a DNS<\/b>. Minden internetes szerverhez egyedi IP-c\u00edm tartozik, ami \u00edgy n\u00e9z ki: <code>216.58.215.78<\/code>. A b\u00f6ng\u00e9sz\u0151 c\u00edmsor\u00e1ba \u00e1ltal\u00e1ban a webhely nev\u00e9t \u00edrj\u00e1k be (p\u00e9ld\u00e1ul, <code>mrkaran.dev<\/code>), \u00e9s a DNS-szerverek (Domain Name System) p\u00e1ros\u00edtj\u00e1k azt a szerver IP-c\u00edm\u00e9vel (<code>216.58.215.78<\/code>).<\/p>\n<p>Ahhoz, hogy meghat\u00e1rozzuk az IP-c\u00edmet, a b\u00f6ng\u00e9sz\u0151 DNS-szerverhez kell lek\u00e9rdez\u00e9st k\u00fcldj\u00f6n. Ez 20\u2013120 ms-ot vesz ig\u00e9nybe egy \u00faj k\u00fcls\u0151 domainhez val\u00f3 csatlakoz\u00e1skor.<\/p>\n<p><b>A DNS-t gyors\u00edt\u00f3t\u00e1razza, b\u00e1r nem t\u00fal megb\u00edzhat\u00f3an<\/b>. N\u00e9h\u00e1ny oper\u00e1ci\u00f3s rendszer \u00e9s b\u00f6ng\u00e9sz\u0151 gyors\u00edt\u00f3t\u00e1razza a DNS-lek\u00e9rdez\u00e9seket: ez megtakar\u00edt id\u0151t az ism\u00e9telt lek\u00e9rdez\u00e9sekn\u00e9l, de a gyors\u00edt\u00f3t\u00e1raz\u00e1sra nem lehet t\u00e1maszkodni. Linux alatt \u00e1ltal\u00e1ban egy\u00e1ltal\u00e1n nem m\u0171k\u00f6dik. A Chrome-nak van DNS gyors\u00edt\u00f3t\u00e1ra, de az csak egy percig \u00e9l. A Windows \u00f6t napig gyors\u00edt\u00f3t\u00e1razza a DNS-v\u00e1laszokat.<\/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> k\u00e9ri a b\u00f6ng\u00e9sz\u0151t, hogy t\u00f6ltse le az URL-t \u00e9s jelen\u00edtse meg egy l\u00e1thatatlan f\u00fcl\u00f6n. Amikor a felhaszn\u00e1l\u00f3 r\u00e1kattint a linkre, az oldal azonnal meg kell jelennie. Ez hasznos, ha biztos benne, hogy a felhaszn\u00e1l\u00f3 l\u00e1togatni fog egy adott oldalt, \u00e9s szeretn\u00e9 felgyors\u00edtani a megjelen\u00e9s\u00e9t.<\/p>\n<p>Annak ellen\u00e9re, hogy ennek a tagnak kiv\u00e9teles hat\u00e9konys\u00e1ga van (vagy \u00e9ppen az\u00e9rt), 2019-ben <code>&lt;link rel= \"prerender\"&gt;<\/code> rosszul t\u00e1mogatott\u00e1k a f\u0151 b\u00f6ng\u00e9sz\u0151k. <noindex><a rel=\"nofollow\" href=\"#1\">al\u00e1bb.<\/a><\/noindex>.<\/p>\n<h3>Szintaxis<\/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> a h\u00e1tt\u00e9rben futtatni k\u00edv\u00e1nt URL-re mutat.<\/p>\n<h3>Mikor haszn\u00e1ljuk<\/h3>\n<p>\n<b>Amikor biztos benne, hogy a felhaszn\u00e1l\u00f3 egy adott oldalra megy majd<\/b>. Ha van egy \u201ealag\u00fat\u201d, amelyen a l\u00e1togat\u00f3k 70%-a A oldalr\u00f3l B oldalra navig\u00e1l, akkor <code>&lt;link rel= \"prerender\"&gt;<\/code> A oldalon nagyon gyorsan megjelen\u00edtheti B oldalt.<\/p>\n<p><b>Ne abusz\u00e1lj vele.<\/b>. A korai renderel\u00e9s rendk\u00edv\u00fcl k\u00f6lts\u00e9ges a forgalom \u00e9s a mem\u00f3ria szempontj\u00e1b\u00f3l. Ne haszn\u00e1lja <code>&lt;link rel= \"prerender\"&gt;<\/code> t\u00f6bb mint egy oldal sz\u00e1m\u00e1ra.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>R\u00e9szletek<\/h3>\n<p>\n<b>Nem k\u00f6telez\u0151 tag.<\/b>. A b\u00f6ng\u00e9sz\u0151 nem k\u00f6teles k\u00f6vetni ezt az utas\u00edt\u00e1st, \u00e9s figyelmen k\u00edv\u00fcl hagyhatja azt, p\u00e9ld\u00e1ul lass\u00fa kapcsolat vagy kev\u00e9s szabad mem\u00f3ria eset\u00e9n.<\/p>\n<p>A mem\u00f3ria megtakar\u00edt\u00e1sa \u00e9rdek\u00e9ben <b>a Chrome nem v\u00e9gez teljes renderel\u00e9st<\/b>, \u00e9s <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">csak pre-load NoState<\/a><\/noindex>. Ez azt jelenti, hogy a Chrome bet\u00f6lti az oldalt \u00e9s minden er\u0151forr\u00e1st, de nem v\u00e9gez renderel\u00e9st \u00e9s nem hajtja v\u00e9gre a JavaScript k\u00f3dot.<\/p>\n<p>A Firefox \u00e9s a Safari egy\u00e1ltal\u00e1n nem t\u00e1mogatja ezt a taget. Ez nem s\u00e9rti a specifik\u00e1ci\u00f3t, mivel a b\u00f6ng\u00e9sz\u0151k nem k\u00f6telesek v\u00e9grehajtani ezt az utas\u00edt\u00e1st; de \u00edgy is sajn\u00e1latos. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Egy megval\u00f3s\u00edt\u00e1si hiba<\/a><\/noindex> a Firefoxban h\u00e9t \u00e9ven \u00e1t fenn\u00e1llt. Vannak h\u00edrek arr\u00f3l, hogy a Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">szint\u00e9n nem t\u00e1mogatja ezt a taget<\/a><\/noindex>.<\/p>\n<h1>\u00d6sszefoglal\u00f3<\/h1>\n<p>\nHaszn\u00e1lja:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 amikor egy er\u0151forr\u00e1sra sz\u00fcks\u00e9ge lesz n\u00e9h\u00e1ny m\u00e1sodpercen bel\u00fcl\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 amikor egy er\u0151forr\u00e1st szeretne a k\u00f6vetkez\u0151 oldalon\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 amikor tudja, hogy hamarosan sz\u00fcks\u00e9ge lesz egy er\u0151forr\u00e1sra, de m\u00e9g nem ismeri a teljes URL-j\u00e9t\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 hasonl\u00f3, amikor tudja, hogy hamarosan sz\u00fcks\u00e9ge lesz egy er\u0151forr\u00e1sra, de m\u00e9g nem ismeri a teljes URL-j\u00e9t (r\u00e9gi b\u00f6ng\u00e9sz\u0151k sz\u00e1m\u00e1ra)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 amikor biztos benne, hogy a felhaszn\u00e1l\u00f3k egy adott oldalra navig\u00e1lnak, \u00e9s szeretn\u00e9 felgyors\u00edtani annak megjelen\u00edt\u00e9s\u00e9t<\/li>\n<\/ul>\n<p>Forr\u00e1s: <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\/hu\/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=\"hu_HU\" \/>\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\/hu\/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 \u00e9s egy\u00e9b tagek | ProHoster","description":"Sokf\u00e9le m\u00f3dja van a webteljes\u00edtm\u00e9ny jav\u00edt\u00e1s\u00e1nak. Az egyik m\u00f3dszer a k\u00e9s\u0151bbi felhaszn\u00e1l\u00e1sra val\u00f3 tartalom el\u0151t\u00f6lt\u00e9se.","canonical_url":"https:\/\/prohoster.info\/hu\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hu_HU","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\/hu\/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\/hu\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}