{"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\/hr\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch i drugi tagovi","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Postoji <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">mnogi na\u010dini za pobolj\u0161anje web performansi<\/a><\/noindex>. Jedan od njih je predu\u010ditavanje sadr\u017eaja koji \u0107e biti potreban kasnije. Prefetching CSS, prethodno renderiranje cijele stranice ili rje\u0161avanje imena domene. Radimo sve unaprijed, a zatim odmah prikazujemo rezultat! Zvu\u010di sjajno.<\/p>\n<p>Jo\u0161 bolje je \u0161to je to vrlo jednostavno za implementaciju. Pet tagova  daju pretra\u017eiva\u010du naredbu za prethodne radnje:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nUkratko \u0107emo objasniti \u0161to oni rade i kada ih koristiti.<\/p>\n<p>Pre\u0111i 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> govori pretra\u017eiva\u010du da \u0161to prije u\u010dita i ke\u0161ira resurs (npr. skriptu ili stilsku tablicu). To je korisno kada \u0107e resurs biti potreban za nekoliko sekundi nakon u\u010ditavanja stranice \u2014 i \u017eelite ubrzati proces.<\/p>\n<p>Pretra\u017eiva\u010d ne radi ni\u0161ta s resursom nakon u\u010ditavanja. Skripte se ne izvr\u0161avaju, stilovi se ne primjenjuju. Resurs se jednostavno ke\u0161ira i odmah se pru\u017ea na zahtjev.<\/p>\n<h3>Sintaksa<\/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 resurs koji \u017eelite preuzeti.<\/p>\n<p><code> as<\/code> mo\u017ee biti bilo \u0161to \u0161to se mo\u017ee preuzeti u pretra\u017eiva\u010du:<\/p>\n<ul>\n<li><code>style<\/code> za stilizaciju,\n<\/li>\n<li><code>script<\/code> za skripte,\n<\/li>\n<li><code>font<\/code> za fontove,\n<\/li>\n<li><code>fetch<\/code> za resurse preuzete pomo\u0107u <code>fetch()<\/code> ili <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>cjelovit popis vidi <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>\nVa\u017eno je navesti atribut <code>as<\/code> \u2013 to poma\u017ee pretra\u017eiva\u010du da ispravno postavi prioritete i planira u\u010ditavanje.<\/p>\n<h3>Kada koristiti<\/h3>\n<p>\nKoristite predu\u010ditavanje kada \u0107e resurs biti potreban u vrlo bliskoj budu\u0107nosti. Na primjer:<\/p>\n<ul>\n<li>Nestandardni fontovi iz vanjske 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>\nPo defaultu <code>comic-sans.woff2<\/code> zapo\u010dinje u\u010ditavanje tek nakon u\u010ditavanja i analize <code>index.css<\/code>. Da ne \u010dekate toliko dugo, mo\u017eete u\u010ditati font ranije pomo\u0107u <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>Ako svoje stilove dijelite prema pristupu <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> na dva dijela, kriti\u010dki (za odmah renderiranje) i nekriti\u010dki:\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<p>\nS ovim pristupom, nekriti\u010dne stilove \u0107e po\u010deti u\u010ditavati samo kada se pokrene JavaScript, \u0161to se mo\u017ee dogoditi nekoliko sekundi nakon renderiranja. Umjesto \u010dekanja na JS, koristite <code>&lt;link rel= \"preload\"&gt;<\/code>, kako biste zapo\u010deli u\u010ditavanje ranije:<\/p>\n<pre><code class=\"xml\">\/* Ugra\u0111eni kriti\u010dni stilovi *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Ne zlorabite preuzimanje<\/b>. Ako preuzimate sve nasumi\u010dno, sajt se ne\u0107e \u010darobno ubrzati, naprotiv, to mo\u017ee ometati pravilno planiranje rada pretra\u017eiva\u010da.<\/p>\n<p><b> Ne brkajte s prefetchingom<\/b>. Ne koristite <code>&lt;link rel= \"preload\"&gt;<\/code>, ako vam resurs nije potreban odmah nakon u\u010ditavanja stranice. Ako \u0107e biti potreban kasnije, na primjer, za sljede\u0107u stranicu, koristite <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Detalji<\/h3>\n<p>\n<b>Ovo je obavezan tag<\/b> za izvr\u0161avanje od strane pretra\u017eiva\u010da (ako ga podr\u017eava), za razliku od svih drugih  tagova povezanih s unaprijed u\u010ditavanjem. Pretra\u017eiva\u010d mora preuzeti resurs naveden u <code>&lt;link rel=\"preload\"&gt;<\/code>. U drugim slu\u010dajevima mo\u017ee ignorirati unaprijed u\u010ditavanje, na primjer, ako radi na sporoj vezi.<\/p>\n<p><b>Prioriteti<\/b>. Razli\u010ditim resursima (stilovima, skriptama, fontovima itd.), pretra\u017eiva\u010di obi\u010dno dodjeljuju razli\u010dite prioritete kako bi prvo u\u010ditali najva\u017enije resurse. U ovom slu\u010daju, pretra\u017eiva\u010d odre\u0111uje prioritet prema atributu <code>as<\/code>. Za pretra\u017eiva\u010d Chrome mo\u017eete vidjeti <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">potpunu tabelu prioriteta<\/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 i drugi tagovi\" 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> tra\u017ei od pretra\u017eiva\u010da da preuzme i ke\u0161ira resurs (na primjer, skriptu ili tabelu stilova) u pozadini. U\u010ditavanje se odvija s niskim prioritetom, stoga ne ometa va\u017enije resurse. Ovo je korisno ako \u0107e resurs biti potreban na sljede\u0107oj stranici i \u017eelite ga prethodno ke\u0161irati.<\/p>\n<p>Ni ovdje pretra\u017eiva\u010d ne radi ni\u0161ta s resursom nakon preuzimanja. Skripte se ne izvr\u0161avaju, tabele stilova se ne primjenjuju. Resurs se jednostavno ke\u0161ira i odmah se pru\u017ea na zahtjev.<\/p>\n<h3>Sintaksa<\/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 resurs koji \u017eelite preuzeti.<\/p>\n<p><code> as<\/code> mo\u017ee biti bilo \u0161to \u0161to se mo\u017ee preuzeti u pretra\u017eiva\u010du:<\/p>\n<ul>\n<li><code>style<\/code> za stilizaciju,\n<\/li>\n<li><code>script<\/code> za skripte,\n<\/li>\n<li><code>font<\/code> za fontove,\n<\/li>\n<li><code>fetch<\/code> za resurse preuzete pomo\u0107u <code>fetch()<\/code> ili <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>cjelovit popis vidi <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>\nVa\u017eno je navesti atribut <code>as<\/code>\u00a0\u2014 to poma\u017ee pretra\u017eiva\u010du da pravilno postavi prioritete i planira u\u010ditavanje.<\/p>\n<h3>Kada koristiti<\/h3>\n<p>\n<b>Za u\u010ditavanje resursa s drugih stranica<\/b>, ako vam je potreban resurs s druge stranice, a \u017eelite ga unaprijed u\u010ditati kako biste kasnije ubrzali renderiranje te stranice. Na primjer:<\/p>\n<ul>\n<li>Imate internetsku trgovinu, a 40% korisnika napu\u0161ta po\u010detnu stranicu da bi pre\u0161lo na stranicu proizvoda. Iskoristite <code>&lt;link rel= \"prefetch\"&gt;<\/code>, u\u010ditavanjem CSS i JS datoteka za renderiranje stranica s proizvodom.\n<\/li>\n<li>Imate jednostranu aplikaciju, a razli\u010dite stranice u\u010ditavaju razli\u010dite pakete. Kada korisnik posjeti neku stranicu, mogu\u0107e je unaprijed u\u010ditati pakete za sve stranice na koje se ona referira.<\/li>\n<\/ul>\n<p>\n<b>Vjerojatno se ova oznaka mo\u017ee sigurno koristiti u neograni\u010denim koli\u010dinama<\/b>. Preglednici obi\u010dno planiraju prefetch s najmanjim prioritetom, tako da nikome ne smeta. Samo imajte na umu da se tro\u0161i korisni\u010dki promet, \u0161to mo\u017ee ko\u0161tati novac.<\/p>\n<p><b>Ne za hitne zahtjeve<\/b>. Ne koristite <code>&lt;link rel= \"prefetch\"&gt;<\/code>, kada \u0107e resurs biti potreban za nekoliko sekundi. U tom slu\u010daju koristite <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Detalji<\/h3>\n<p>\n<b>Neobavezna oznaka<\/b>. Preglednik nije du\u017ean slijediti ovu uputu, mo\u017ee je ignorirati, na primjer, na sporoj vezi.<\/p>\n<p><b>Prioritet u Chromeu<\/b>. U Chromeu <code>&lt;link rel= \"prefetch\"&gt;<\/code> obi\u010dno se izvr\u0161ava s minimalnim prioritetom (vidi <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">potpunu tabelu prioriteta<\/a><\/noindex>), odnosno nakon u\u010ditavanja svega ostalog.<\/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> tra\u017ei od preglednika da se unaprijed pove\u017ee s domenom kada \u017eelite ubrzati uspostavu veze u budu\u0107nosti.<\/p>\n<p>Preglednik bi trebao uspostaviti vezu ako preuzima nekakve resurse s novog vanjskog domena. Na primjer, ako u\u010ditava Google Fonts, React iz CDN-a ili tra\u017ei JSON odgovor s API servera.<\/p>\n<p>Uspostavljanje nove veze obi\u010dno traje nekoliko stotina milisekundi. Izvr\u0161ava se jednom, ali ipak oduzima vrijeme. Ako ste unaprijed uspostavili vezu, u\u0161tedjet \u0107ete vrijeme i br\u017ee u\u010ditati resurse s te domene.<\/p>\n<h3>Sintaksa<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"preconnect\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> ozna\u010dava ime domene za koju treba odrediti IP adresu. Mo\u017ee se navesti s prefiksom (<code>https:\/\/domain.com<\/code>) ili bez njega (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kada koristiti<\/h3>\n<p>\n<b>Koristite za domene koje \u0107e uskoro biti potrebne<\/b> za u\u010ditavanje va\u017enog stila, skripte ili slike s njih, ali ne znate URL resursa unaprijed. Na primjer:<\/p>\n<ul>\n<li>Va\u0161a aplikacija je smje\u0161tena na <code>my-app.com<\/code> i \u0161alje AJAX zahtjeve na <code>api.my-app.com<\/code>: ne znate unaprijed konkretne zahtjeve, jer se oni dinami\u010dki generiraju iz JS-a. Ovdje je sasvim prikladna upotreba oznake za unaprijed povezivanje s domenom.\n<\/li>\n<li>Va\u0161a aplikacija je smje\u0161tena na <code>my-app.com<\/code> i koristi Google Fonts. U\u010ditavaju se u dva koraka: prvo se u\u010ditava CSS datoteka s domene <code>fonts.googleapis.com<\/code>, zatim ova datoteka tra\u017ei fontove s <code>fonts.gstatic.com<\/code>. Ne mo\u017eete znati koje konkretne datoteke fontova iz <code>fonts.gstatic.com<\/code> \u0107e vam biti potrebne dok ne preuzmete CSS datoteku, stoga unaprijed mo\u017eemo samo uspostaviti preliminarnu vezu.<\/li>\n<\/ul>\n<p>\n<b>Upotrijebite ovu oznaku da malo ubrzate neku vanjsku skriptu ili stil<\/b> prijenosom preliminarne veze.<\/p>\n<p><b>Nemojte pretjerivati<\/b>. Uspostavljanje i odr\u017eavanje veze je skupa operacija kako za klijenta, tako i za poslu\u017eitelj. Koristite ovu oznaku maksimalno za 4-6 domena.<\/p>\n<h3>Detalji<\/h3>\n<p>\n<b>Neobavezna oznaka<\/b>. Preglednik nije obvezan slijediti ovu instrukciju i mo\u017ee je ignorirati, na primjer, ako su ve\u0107 uspostavljene mnoge veze ili u nekom drugom slu\u010daju.<\/p>\n<p><b>\u0160to uklju\u010duje proces povezivanja<\/b>. Da bi se spojio na svaku web stranicu, preglednik mora izvr\u0161iti sljede\u0107e radnje:<\/p>\n<ul>\n<li><i>Rje\u0161avanje DNS-a<\/i>. Prona\u0107i IP adresu poslu\u017eitelja (<code>216.58.215.78<\/code>) za navedeno domena (<code>google.com<\/code>).<\/li>\n<li><i>TCP rukovanje<\/i>. Razmjena paketa (klijent \u2192 poslu\u017eitelj \u2192 klijent) radi iniciranja TCP veze s poslu\u017eiteljem.<\/li>\n<li><i>TLS rukovanje (samo za HTTPS stranice)<\/i>. Dva kruga razmjene paketa (klijent \u2192 poslu\u017eitelj \u2192 klijent \u2192 poslu\u017eitelj \u2192 klijent) za iniciranje sigurnog TLS sesije.<\/li>\n<\/ul>\n<p>\nNapomena: HTTP\/3 \u0107e pobolj\u0161ati i ubrzati mehanizam rukovanja, ali to je jo\u0161 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> tra\u017ei od preglednika da unaprijed izvr\u0161i rje\u0161avanje DNS-a za domenu, ako \u0107ete se ubrzo povezati s njom i \u017eelite ubrzati po\u010detnu vezu.<\/p>\n<p>Preglednik mora odrediti IP adresu domene ako \u0107e preuzimati resurse s nove vanjske domene. Na primjer, preuzimanje Google Fonts ili React iz CDN-a, ili tra\u017eenje JSON odgovora s API poslu\u017eitelja.<\/p>\n<p>Za svaku novu domenu, rje\u0161avanje DNS zapisa obi\u010dno traje oko 20\u2212120 ms. To utje\u010de samo na u\u010ditavanje prvog resursa s te domene, ali i dalje predstavlja ka\u0161njenje. Ako izvr\u0161imo rje\u0161avanje DNS-a unaprijed, mo\u017eemo u\u0161tedjeti vrijeme i u\u010ditati resurs br\u017ee.<\/p>\n<h3>Sintaksa<\/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> ukazuje na domensko ime za koje treba uspostaviti IP adresu. Mo\u017ee se ozna\u010diti s prefiksom (<code>https:\/\/domain.com<\/code>) ili bez njega (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Kada koristiti<\/h3>\n<p>\n<b>Koristite za domene koje \u0107e uskoro biti potrebne<\/b> kako bi se preuzeli resursi s kojih preglednik unaprijed ne zna. Na primjer:<\/p>\n<ul>\n<li>Va\u0161a aplikacija je smje\u0161tena na <code>my-app.com<\/code> i \u0161alje AJAX zahtjeve na <code>api.my-app.com<\/code>: ne znate unaprijed konkretne zahtjeve, jer se oni dinami\u010dki generiraju iz JS-a. Ovdje je sasvim prikladna upotreba oznake za unaprijed povezivanje s domenom.\n<\/li>\n<li>Va\u0161a aplikacija je smje\u0161tena na <code>my-app.com<\/code>, i koristi Google Fonts. U\u010ditavaju se u dva koraka: prvo se preuzima CSS datoteka s domene <code>fonts.googleapis.com<\/code>, zatim ova datoteka tra\u017ei fontove s <code>fonts.gstatic.com<\/code>. Ne mo\u017eete znati koje konkretne datoteke fontova iz <code>fonts.gstatic.com<\/code> \u0107e vam biti potrebne dok ne preuzmete CSS datoteku, stoga unaprijed mo\u017eemo samo uspostaviti preliminarnu vezu.<\/li>\n<\/ul>\n<p>\n<b>Upotrijebite ovu oznaku da malo ubrzate neku vanjsku skriptu ili stil<\/b> prijenosom preliminarne veze.<\/p>\n<blockquote><p>Obratite pa\u017enju na sli\u010dne karakteristike na <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> i <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Njihovo kori\u0161tenje zajedno za jednu domenu obi\u010dno nema smisla: <code>&lt;link rel= \"preconnect\"&gt;<\/code> ve\u0107 uklju\u010duje <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> i mnogo vi\u0161e. Ovo se mo\u017ee opravdati u dva slu\u010daja:<\/p>\n<ul>\n<li><i>\u017delite podr\u017eati stare preglednike<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> podr\u017eava <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">od IE10 i Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> neko vreme je podr\u017eavan u Chrome-u i Firefox-u, ali je u Safari uba\u010den tek u 11.1 i <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">jo\u0161 uvek nije podr\u017ean u IE\/Edge<\/a><\/noindex>. Ako je potrebno podr\u017eavati te preglednike, koristite <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> kao rezervnu opciju za <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>\u017delite ubrzati vezu sa vi\u0161e od 4\u22126 domena<\/i>. Tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> se ne preporu\u010duje koristiti sa vi\u0161e od 4\u22126 domena, jer je uspostavljanje i odr\u017eavanje veze skupa operacija. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> tro\u0161i manje resursa, pa ga u slu\u010daju potrebe koristite.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Detalji<\/h3>\n<p>\n<b>Neobavezna oznaka<\/b>. Preglednik nije du\u017ean slijediti ovu instrukciju, pa mo\u017eda ne\u0107e izvr\u0161iti DNS rezoluciju, na primjer, ako na stranici ima mnogo takvih tagova ili u nekom drugom slu\u010daju.<\/p>\n<p><b>\u0160to je DNS<\/b>. Svakom serveru na internetu pripada jedinstvena IP adresa koja izgleda kao <code>216.58.215.78<\/code>. U adresnu traku preglednika obi\u010dno se unosi naziv sajta (na primjer, <code>google.com<\/code>), a DNS serveri (Domain Name System) ga uskla\u0111uju sa IP adresom servera (<code>216.58.215.78<\/code>).<\/p>\n<p>Da bi odredio IP adresu, preglednik mora poslati zahtjev DNS serveru. To traje 20\u2212120 ms prilikom povezivanja sa novom eksternom domenom.<\/p>\n<p><b>DNS se ke\u0161ira, iako ne ba\u0161 pouzdano<\/b>. Neki operativni sistemi i pregleda\u010di ke\u0161iraju DNS zahtjeve: to \u0107e u\u0161tedeti vreme prilikom ponovnih zahtjeva, ali na ke\u0161iranje se ne mo\u017ee osloniti. U Linuxu to obi\u010dno uop\u0161te ne funkcioni\u0161e. Chrome ima DNS ke\u0161, ali opstaje samo minut. Windows ke\u0161ira DNS odgovore pet dana.<\/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> tra\u017ei pregledniku da u\u010dita URL adresu i prika\u017ee je na nevidljivoj kartici. Kada korisnik klikne na link, stranica bi trebala prikazati odmah. Ovo je korisno ako ste sigurni da \u0107e korisnik posetiti odre\u0111enu stranicu i \u017eelite ubrzati njeno prikazivanje.<\/p>\n<p>Uprkos izuzetnoj efikasnosti ovog taga (ili zbog nje), 2019. godine <code>&lt;link rel= \"prerender\"&gt;<\/code> slabo je podr\u017ean u glavnim preglednicima. Vi\u0161e detalja na <noindex><a rel=\"nofollow\" href=\"#1\">donjem<\/a><\/noindex>.<\/p>\n<h3>Sintaksa<\/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> ukazuje na URL za koji \u017eelite pokrenuti renderovanje u pozadini.<\/p>\n<h3>Kada koristiti<\/h3>\n<p>\n<b>Kada ste zaista sigurni da \u0107e korisnik pre\u0107i na odre\u0111enu stranicu<\/b>. Ako imate \u00abtunel\u00bb kroz koji 70% posjetitelja stranice A prelazi na stranicu B, tada <code>&lt;link rel= \"prerender\"&gt;<\/code> na stranici A vrlo brzo mo\u017ee prikazati stranicu B.<\/p>\n<p><b>Nemojte pretjerivati<\/b>. Predrensanje je iznimno skupo u smislu prometa i memorije. Nemojte koristiti <code>&lt;link rel= \"prerender\"&gt;<\/code> vi\u0161e od jedne stranice.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Detalji<\/h3>\n<p>\n<b>Neobavezna oznaka<\/b>. Preglednik nije obavezan slijediti ovu instrukciju i mo\u017ee je ignorirati, na primjer, na sporoj vezi ili kada nema dovoljno slobodne memorije.<\/p>\n<p>Radi u\u0161tede memorije <b>Chrome ne radi potpuno rendanje<\/b>, ve\u0107 <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">samo predu\u010ditavanje NoState<\/a><\/noindex>. To zna\u010di da Chrome u\u010ditava stranicu i sve njene resurse, ali ne radi rendanje i ne izvr\u0161ava JavaScript.<\/p>\n<p>Firefox i Safari uop\u0107e ne podr\u017eavaju ovu oznaku. To ne kr\u0161i specifikaciju, jer preglednici nisu obavezni izvr\u0161iti ovu instrukciju; ali svejedno je \u017ealosno. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Gre\u0161ka u implementaciji<\/a><\/noindex> u Firefoxu je postojala sedam godina. Ima izvje\u0161taja da Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">tako\u0111er ne podr\u017eava ovu oznaku<\/a><\/noindex>.<\/p>\n<h1>Sa\u017eetak<\/h1>\n<p>\nKoristite:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 kada \u0107e vam trebati resurs za nekoliko sekundi\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 kada \u0107e vam trebati resurs na sljede\u0107oj stranici\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 kada znate da \u0107e vam uskoro biti potreban resurs, ali jo\u0161 ne znate njegov puni URL\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 sli\u010dno, kada znate da \u0107e vam uskoro biti potreban resurs, ali jo\u0161 ne znate njegov puni URL (za stare preglednike)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 kada ste sigurni da \u0107e korisnici pre\u0107i na odre\u0111enu stranicu i \u017eelite ubrzati njeno prikazivanje<\/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\/hr\/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=\"hr_HR\" \/>\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\/hr\/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 i druge oznake | ProHoster","description":"Postoji mnogo na\u010dina za pove\u0107anje web performansi. Jedan od njih je predu\u010ditavanje sadr\u017eaja koji \u0107e biti potreban kasnije.","canonical_url":"https:\/\/prohoster.info\/hr\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hr_HR","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\/hr\/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\/hr\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}