{"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\/sl\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch in druge oznake","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Je <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">mno\u017eica na\u010dinov za izbolj\u0161anje zmogljivosti spletnih mest<\/a><\/noindex>. Eden od njih je prednalaganje vsebine, ki jo bomo potrebovali kasneje. Prednalaganje CSS, predprenovitev celotne strani ali razre\u0161evanje domenskega imena. Vse pripravimo vnaprej in nato takoj prika\u017eemo rezultat! Zveni odli\u010dno.<\/p>\n<p>\u0160e bolje je, da je to zelo enostavno za izvedbo. Pet oznak  da brskalniku ukaz za izvajanje predhodnih dejanj:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nNa kratko bomo opisali, kaj delajo in kdaj jih uporabiti.<\/p>\n<p>Pojdite 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> pove brskalniku, naj \u010dim prej nalo\u017ei in predpomni vir (na primer skript ali stil). To je koristno, ko bo vir potreboval \u010dez nekaj sekund po nalaganju strani \u2014 in \u017eelite pospe\u0161iti postopek.<\/p>\n<p>Brskalnik z virom po nalaganju ne stori ni\u010desar. Skripti se ne izvajajo, slogi se ne uporabijo. Vir se preprosto predpomni in se takoj zagotovi ob zahtevi.<\/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> poka\u017ee na vir, ki ga \u017eelite prenesti.<\/p>\n<p><code> as<\/code> lahko je karkoli, kar se lahko prenese v brskalniku:<\/p>\n<ul>\n<li><code>style<\/code> za stile,\n<\/li>\n<li><code>script<\/code> za skripte,\n<\/li>\n<li><code>font<\/code> za pisave,\n<\/li>\n<li><code>fetch<\/code> za vire, nalo\u017eene s pomo\u010djo <code>fetch()<\/code> ili <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>celoten seznam glej <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>\nPomembno je navesti atribut <code>as<\/code> \u2013 to pomaga brskalniku pravilno dolo\u010diti prioritete in na\u010drtovati nalaganje.<\/p>\n<h3>Kdaj uporabiti<\/h3>\n<p>\nUporabite prednalaganje, ko bo vir potreboval v najbli\u017eji prihodnosti. Na primer:<\/p>\n<ul>\n<li>Neskladne pisave iz zunanje datoteke:\n<pre><code class=\"xml\"><!-- index.html -->\n\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nPrivzeto <code>comic-sans.woff2<\/code> se bo za\u010del nalagati \u0161ele po nalaganju in obdelavi. <code>index.css<\/code>. Da ne bi \u010dakali tako dolgo, lahko pisavo nalo\u017eite prej s pomo\u010djo <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>\u010ce razdelite svoje sloge glede na pristop <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> na dva dela, kriti\u010dni (za takoj\u0161nje prikazovanje) in nekriti\u010dni:\n<pre><code class=\"xml\">\/* Vgrajeni kriti\u010dni slogi *\/<\/code><\/pre>\n<p>\nPri tak\u0161nem pristopu se neodvisni slogi nalo\u017eijo \u0161ele ob zagonu JavaScript, kar se lahko zgodi nekaj sekund po upodabljanju. Namesto da \u010dakate na JS, uporabite <code>&lt;link rel= \"preload\"&gt;<\/code>, da za\u010dnete nalaganje prej:<\/p>\n<pre><code class=\"xml\">\/* Vdrti kriti\u010dni slogi *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Ne zlorabljajte prednalaganja<\/b>. \u010ce nalagate vse naenkrat, se spletna stran ne bo \u010dude\u017eno pospe\u0161ila, temve\u010d ravno nasprotno, to bo oviro brskalniku pri na\u010drtovanju dela.<\/p>\n<p><b> Ne me\u0161ajte s prednalo\u017eitvijo<\/b>. Ne uporabljajte <code>&lt;link rel= \"preload\"&gt;<\/code>, \u010de ne potrebujete vira takoj po nalaganju strani. \u010ce ga boste potrebovali kasneje, na primer za naslednjo stran, uporabite <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>To je obvezna oznaka<\/b> za izvajanje brskalnika (\u010de jo podpira), v nasprotju z vsemi drugimi oznakami , povezanimi s prednalo\u017eitvijo. Brskalnik mora nalo\u017eiti vir, ki je naveden v <code>&lt;link rel=\"preload\"&gt;<\/code>. V drugih primerih lahko brskalnik prednalo\u017eitev ignorira, na primer, \u010de deluje na po\u010dasni povezavi.<\/p>\n<p><b>Prioritete<\/b>. Razli\u010dnim virom (slogi, skripti, pisave itd.) obi\u010dajno dodelijo razli\u010dne prioritete, da se najprej nalo\u017eijo najpomembnej\u0161i viri. V tem primeru brskalnik dolo\u010di prednost po atributu <code>as<\/code>. Za brskalnik Chrome lahko preverite <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">popolno tabelo prioritet<\/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 in druge oznake\" 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> prosi brskalnik, da nalo\u017ei in predpomni vir (na primer skript ali slogovno tabelo) v ozadju. Nalaganje poteka z nizkim prioritetom, zato ne ovira pomembnej\u0161ih virov. To je koristno, \u010de bo vir potreben na naslednji strani in ga \u017eelite vnaprej predpomniti.<\/p>\n<p>Tudi tukaj brskalnik po nalaganju z virom ne stori ni\u010d. Skripti se ne izvajajo, slogovne tabele se ne uporabljajo. Vir se preprosto predpomni in takoj zagotovi na zahtevo.<\/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> poka\u017ee na vir, ki ga \u017eelite prenesti.<\/p>\n<p><code> as<\/code> lahko je karkoli, kar se lahko prenese v brskalniku:<\/p>\n<ul>\n<li><code>style<\/code> za stile,\n<\/li>\n<li><code>script<\/code> za skripte,\n<\/li>\n<li><code>font<\/code> za pisave,\n<\/li>\n<li><code>fetch<\/code> za vire, nalo\u017eene s pomo\u010djo <code>fetch()<\/code> ili <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>celoten seznam glej <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>\nPomembno je navesti atribut <code>as<\/code>\u00a0\u2014 to pomaga brskalniku pravilno postaviti prioritete in na\u010drtovati nalaganje.<\/p>\n<h3>Kdaj uporabiti<\/h3>\n<p>\n<b>Za nalaganje virov z drugih strani<\/b>, \u010de potrebujete vir z druge strani in \u017eelite prednalo\u017eiti, da bi pospe\u0161ili upodabljanje te strani. Na primer:<\/p>\n<ul>\n<li>Imate spletno trgovino in 40 % uporabnikov odide s prve strani na stran izdelka. Uporabite <code>&lt;link rel= \"prefetch\"&gt;<\/code>, nalaganje CSS in JS datotek za upodabljanje strani s produktom.\n<\/li>\n<li>Imate enostransko aplikacijo, ki nalaga razli\u010dne pakete za razli\u010dne strani. Ko uporabnik obi\u0161\u010de dolo\u010deno stran, lahko prednalo\u017eite pakete za vse strani, na katere se ta sklicuje.<\/li>\n<\/ul>\n<p>\n<b>Verjetno je to oznako mogo\u010de varno uporabljati v kateri koli koli\u010dini<\/b>. Brskalniki obi\u010dajno na\u010drtujejo prefetch z najni\u017ejim prioritetom, tako da nikomur ne \u0161kodi. Le imejte v mislih, da se porabi uporabni\u0161ki promet, ki bi ga lahko bilo treba pla\u010dati.<\/p>\n<p><b>Ne za nujne zahteve<\/b>. Ne uporabljajte <code>&lt;link rel= \"prefetch\"&gt;<\/code>, ko bo vir potrebna \u010dez nekaj sekund. V tem primeru uporabite <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>neobvezno oznako<\/b>. Brskalnik te navodila ne sme obvezno upo\u0161tevati, lahko jo ignorira, na primer pri po\u010dasni povezavi.<\/p>\n<p><b>Prednost v Chromu<\/b>. V Chromu <code>&lt;link rel= \"prefetch\"&gt;<\/code> obi\u010dajno poteka z minimalnim prioritetom (glejte <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">popolno tabelo prioritet<\/a><\/noindex>), torej po nalaganju vsega ostalega.<\/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> prosi brskalnik, da se vnaprej pove\u017ee z domeno, ko \u017eelite pospe\u0161iti vzpostavljanje povezave v prihodnje.<\/p>\n<p>Brskalnik mora vzpostaviti povezavo, \u010de prena\u0161a kak\u0161ne vire z nove tuje domene. Na primer, \u010de nalaga pisave Google Fonts, React iz CDN ali zahteva JSON odgovor s stre\u017enika API.<\/p>\n<p>Vzpostavitev nove povezave obi\u010dajno traja nekaj sto milisekund. Izvede se enkrat, vendar \u0161e vedno vzame \u010das. \u010ce ste vnaprej vzpostavili povezavo, prihranite \u010das in hitreje nalo\u017eite vire z te domene.<\/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> dolo\u010da ime domene, za katero je treba dolo\u010diti IP naslov. Lahko ga navedete s predpono (<code>https:\/\/domain.com<\/code>) ali brez nje (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kdaj uporabiti<\/h3>\n<p>\n<b>Uporabite za domene, ki jih boste kmalu potrebovali<\/b> za nalaganje pomembnega sloga, skripte ali slike, a \u0161e ne poznate URL vira. Na primer:<\/p>\n<ul>\n<li>Va\u0161a aplikacija je name\u0161\u010dena na <code>my-app.com<\/code> in izvaja AJAX poizvedbe na <code>api.my-app.com<\/code>: vnaprej ne poznate specifi\u010dnih poizvedb, ker so dinami\u010dno ustvarjene iz JS. Tukaj je povsem primerno uporabiti oznako za predhodno povezovanje z domeno.\n<\/li>\n<li>Va\u0161a aplikacija je name\u0161\u010dena na <code>my-app.com<\/code> in uporablja pisave Google Fonts. Te se nalagajo v dveh fazah: najprej se nalo\u017ei CSS datoteka z domene <code>fonts.googleapis.com<\/code>, nato ta datoteka zahteva pisave z <code>fonts.gstatic.com.<\/code>Ne morete vedeti, katere specifi\u010dne datoteke pisav iz <code>fonts.gstatic.com.<\/code> Potrebovali boste, preden nalo\u017eite datoteko CSS, zato lahko vnaprej samo vzpostavimo predhodno povezavo.<\/li>\n<\/ul>\n<p>\n<b>Uporabite to oznako, da nekoliko pospe\u0161ite dolo\u010den zunanji skript ali slog.<\/b> z vnaprej\u0161njo vzpostavitvijo povezave.<\/p>\n<p><b>Ne zlorabljajte<\/b>. Vzpostavljanje in vzdr\u017eevanje povezave je draga operacija tako za odjemalca kot za stre\u017enik. To oznako uporabite najve\u010d za 4-6 domen.<\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>neobvezno oznako<\/b>. Brskalnik ni dol\u017ean upo\u0161tevati tega navodila in ga lahko prezre, na primer, \u010de je \u017ee vzpostavljenih veliko povezav ali v kak\u0161nem drugem primeru.<\/p>\n<p><b>Kaj vklju\u010duje postopek povezovanja<\/b>. Za povezavo z vsako spletno stranjo mora brskalnik izvesti naslednje korake:<\/p>\n<ul>\n<li><i>Re\u0161evanje DNS<\/i>. Najti IP naslov stre\u017enika (<code>216.58.215.78<\/code>) za navedeno domeno (<code>google.com<\/code>).<\/li>\n<li><i>Vzpostavljanje TCP povezave<\/i>. Izmenjava paketov (odjemalec \u2192 stre\u017enik \u2192 odjemalec), da se uvaja TCP povezava s stre\u017enikom.<\/li>\n<li><i>Vzpostavljanje TLS povezave (samo za HTTPS strani)<\/i>. Dva kroga izmenjave paketov (odjemalec \u2192 stre\u017enik \u2192 odjemalec \u2192 stre\u017enik \u2192 odjemalec), da se za\u010dne varno TLS sejo.<\/li>\n<\/ul>\n<p>\nOpomba: HTTP\/3 bo izbolj\u0161al in pospe\u0161il postopek roke, vendar je \u0161e dale\u010d.<\/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> prosi brskalnik, da vnaprej izvede re\u0161evanje DNS za domeno, \u010de se boste kmalu povezali z njo in \u017eelite pospe\u0161iti za\u010detno povezavo.<\/p>\n<p>Brskalnik mora dolo\u010diti IP naslov domene, \u010de bo pridobival kakr\u0161ne koli vire z nove zunanje domene. Na primer, nalaganje tipografij Google Fonts, React iz CDN ali zahtevanje odgovora JSON s stre\u017enika API.<\/p>\n<p>Za vsako novo domeno obi\u010dajno traja re\u0161evanje DNS zapisov pribli\u017eno 20-120 ms. To vpliva samo na nalaganje prvega vira z te domene, vendar \u0161e vedno predstavlja zamudo. \u010ce izpeljemo re\u0161evanje DNS vnaprej, prihranimo \u010das in nalo\u017eimo virhitreje.<\/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> dolo\u010da ime domene, za katero je treba vzpostaviti IP naslov. Lahko ga navedete s predpono (<code>https:\/\/domain.com<\/code>) ali brez nje (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kdaj uporabiti<\/h3>\n<p>\n<b>Uporabite za domene, ki jih boste kmalu potrebovali<\/b> za nalaganje od tam virov, o katerih brskalnik ne ve vnaprej. Na primer:<\/p>\n<ul>\n<li>Va\u0161a aplikacija je name\u0161\u010dena na <code>my-app.com<\/code> in izvaja AJAX poizvedbe na <code>api.my-app.com<\/code>: vnaprej ne poznate specifi\u010dnih poizvedb, ker so dinami\u010dno ustvarjene iz JS. Tukaj je povsem primerno uporabiti oznako za predhodno povezovanje z domeno.\n<\/li>\n<li>Va\u0161a aplikacija je name\u0161\u010dena na <code>my-app.com<\/code>, in uporablja tipografije Google Fonts. Te se nalo\u017eijo v dveh fazah: najprej se nalo\u017ei datoteka CSS z domene <code>fonts.googleapis.com<\/code>, nato ta datoteka zahteva pisave z <code>fonts.gstatic.com.<\/code>Ne morete vedeti, katere specifi\u010dne datoteke pisav iz <code>fonts.gstatic.com.<\/code> potrebovali boste, preden nalo\u017eite datoteko CSS, zato lahko vnaprej samo vzpostavimo predhodno povezavo.<\/li>\n<\/ul>\n<p>\n<b>Uporabite to oznako, da nekoliko pospe\u0161ite dolo\u010den zunanji skript ali slog.<\/b> z vnaprej\u0161njo vzpostavitvijo povezave.<\/p>\n<blockquote><p>Upo\u0161tevajte podobne zna\u010dilnosti na <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> in <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Uporaba obeh za eno domeno obi\u010dajno ni smiselna: <code>&lt;link rel= \"preconnect\"&gt;<\/code> \u017ee vklju\u010duje <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> in \u0161e ve\u010d. To je mogo\u010de upravi\u010diti v dveh primerih:<\/p>\n<ul>\n<li><i>\u017delite podpirati stare brskalnike<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> podprt <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">od IE10 in Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> je bil podprt nekaj \u010dasa v Chromu in Firefoxu, a je bil dodan v Safari \u0161ele v razli\u010dici 11.1 in <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">\u0161e vedno ni podprt v IE\/Edge.<\/a><\/noindex>. \u010ce potrebujete podporo za te brskalnike, uporabite <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> kot rezervo za <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>\u017delite pospe\u0161iti povezavo z ve\u010d kot 4\u22126 domenami.<\/i>. Oznaka <code>&lt;link rel= \"preconnect\"&gt;<\/code> ni priporo\u010dljiva za uporabo z ve\u010d kot 4\u22126 domenami, saj je vzpostavitev in ohranjanje povezave draga operacija. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> porabi manj virov, zato jo uporabite, \u010de je to potrebno.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>neobvezno oznako<\/b>. Brskalnik ni dol\u017ean upo\u0161tevati teh navodil, zato lahko ne izvede re\u0161evanja DNS, na primer, \u010de je na strani veliko tak\u0161nih oznak ali v kak\u0161nem drugem primeru.<\/p>\n<p><b>Kaj je DNS<\/b>. Vsak stre\u017enik na internetu ima edinstven IP-naslov, ki izgleda kot <code>216.58.215.78<\/code>. V naslovno vrstico brskalnika ponavadi vnesete ime spletne strani (na primer, <code>google.com<\/code>), stre\u017eniki DNS (sistem domen) ga povezujejo z IP-naslovom stre\u017enika (<code>216.58.215.78<\/code>).<\/p>\n<p>Da bi dolo\u010dil IP-naslov, mora brskalnik poslati poizvedbo DNS-stre\u017eniku. To traja 20\u2212120 ms pri povezavi z novo zunanjim domeno.<\/p>\n<p><b>DNS se predpomni, \u010deprav ne zelo zanesljivo.<\/b>. Nekateri operacijski sistemi in brskalniki predpomnijo DNS-poizvedbe: to prihrani \u010das pri ponovnih poizvedbah, vendar se na predpomnitev ni mogo\u010de zana\u0161ati. V Linuxu obi\u010dajno sploh ne deluje. Chrome ima predpomnilnik DNS, vendar ta \u017eivi le eno minuto. Windows predpomni odgovore DNS pet dni.<\/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> dobi brskalnik, da nalo\u017ei URL in ga prika\u017ee na nevidnem zavihku. Ko uporabnik klikne na povezavo, se mora stran takoj prikazati. To je koristno, \u010de ste prepri\u010dani, da bo uporabnik obiskal dolo\u010deno stran in \u017eelite pospe\u0161iti njen prikaz.<\/p>\n<p>Kljub izjemni u\u010dinkovitosti te oznake (ali zaradi nje) je bila leta 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> slabo podprta v glavnih brskalnikih. Ve\u010d informacij najdete v <noindex><a rel=\"nofollow\" href=\"#1\">spodaj<\/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> navaja URL, za katerega \u017eelite izvajati upodabljanje v ozadju.<\/p>\n<h3>Kdaj uporabiti<\/h3>\n<p>\n<b>Ko ste resni\u010dno prepri\u010dani, da bo uporabnik \u0161el na dolo\u010deno stran.<\/b>. \u010ce imate \"tunnel\", skozi katerega 70 % obiskovalcev strani A preide na stran B, <code>&lt;link rel= \"prerender\"&gt;<\/code> bo na strani A zelo hitro prikazana stran B.<\/p>\n<p><b>Ne zlorabljajte<\/b>. Predhodno upodabljanje je izjemno drago glede prometa in pomnilnika. Ne uporabljajte <code>&lt;link rel= \"prerender\"&gt;<\/code> ve\u010d kot za eno stran.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Podrobnosti<\/h3>\n<p>\n<b>neobvezno oznako<\/b>. Brskalnik ni dol\u017ean slediti temu navodilu in ga lahko prezre, na primer, pri po\u010dasni povezavi ali ob nezadostnem prostem pomnilniku.<\/p>\n<p>Za var\u010devanje s pomnilnikom <b>Chrome ne izvaja popolnega upodabljanja,<\/b>, a <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">samo prednalaganja NoState<\/a><\/noindex>. To pomeni, da Chrome nalo\u017ei stran in vse njene vire, vendar ne izvede upodabljanja in ne izvr\u0161i JavaScripta.<\/p>\n<p>Firefox in Safari tega taga sploh ne podpirata. To ne kr\u0161i specifikacije, saj brskalniki niso dol\u017eni izvajati tega navodila; a je \u0161e vedno \u017ealostno. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Napaka v implementaciji<\/a><\/noindex> v Firefoxu je bila odpravljena po sedmih letih. Obstajajo poro\u010dila, da Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">prav tako ne podpira tega taga.<\/a><\/noindex>.<\/p>\n<h1>\u0420\u0435\u0437\u044e\u043c\u0435<\/h1>\n<p>\nUporabite:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 ko potrebujete vir \u010dez nekaj sekund,\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 ko boste potrebovali vir na naslednji strani,\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 ko veste, da boste kmalu potrebovali vir, vendar \u0161e ne poznate njegovega popolnega URL-ja,\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 podobno, ko veste, da boste kmalu potrebovali vir, vendar \u0161e ne poznate njegovega popolnega URL-ja (za stare brskalnike),\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 ko ste prepri\u010dani, da bodo uporabniki pre\u0161li na dolo\u010deno stran in \u017eelite pospe\u0161iti njeno prikazovanje.<\/li>\n<\/ul>\n<p>Izvor: <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\/sl\/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=\"sl_SI\" \/>\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\/sl\/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 in drugi tagi | ProHoster","description":"Obstaja veliko na\u010dinov za izbolj\u0161anje spletne zmogljivosti. Eden od njih je prednalaganje vsebine, ki jo boste potrebovali kasneje.","canonical_url":"https:\/\/prohoster.info\/sl\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sl_SI","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\/sl\/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\/sl\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}