{"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\/et\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch ja muud sildid","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Jah <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Palju viise veebitootlikkuse parandamiseks<\/a><\/noindex>. \u00dcks neist on sisu eelkoormamine, mis on vajalik hiljem. CSS-i eelteenindamine, kogu lehe eelrenderdamine v\u00f5i domeeninime lahendamine. Teeme k\u00f5ik ette, et n\u00e4idata tulemust kohe! K\u00f5lab \u00e4gedalt.<\/p>\n<p>Veelgi \u00e4gedam on see, et see on v\u00e4ga lihtne ellu viia. Viis m\u00e4rgendit  annavad brauserile k\u00e4skluse eelteenindamiseks:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nR\u00e4\u00e4gime l\u00fchidalt, mida need teevad ja millal neid kasutada.<\/p>\n<p>Liikuge edasi: <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> \u00fctleb brauserile, et laadida ja m\u00e4lustada ressurss (nt skript v\u00f5i stiilileht) v\u00f5imalikult kiiresti. See on kasulik, kui ressursse vajatakse paar sekundit p\u00e4rast lehe laadimist \u2014 ja soovite protsessi kiirendada.<\/p>\n<p>Brauser ei tee ressursiga midagi p\u00e4rast laadimist. Skripte ei t\u00e4ideta, stiililehti ei rakendata. Ressursse lihtsalt m\u00e4lustatakse ja antakse kohe n\u00f5udmisel.<\/p>\n<h3>S\u00fcntaks<\/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> n\u00e4itab ressursi asukohta, mida soovite alla laadida.<\/p>\n<p><code> as<\/code> v\u00f5ib olla mis tahes, mida brauseris alla laadida saab:<\/p>\n<ul>\n<li><code>style<\/code> stiililehtede jaoks,\n<\/li>\n<li><code>script<\/code> skriptide jaoks,\n<\/li>\n<li><code>font<\/code> fontide jaoks,\n<\/li>\n<li><code>fetch<\/code> resursside jaoks, mis on alla laaditud kasutades <code>fetch()<\/code> v\u00f5i <code>k\u00e4ivitatakse<\/code>,\n<\/li>\n<li>t\u00e4ielik nimekiri vt. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN-l<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nOluline on m\u00e4\u00e4rata atribuut <code>as<\/code> \u2014 see aitab brauseril \u00f5igesti prioriteete seadistada ja laadimist planeerida.<\/p>\n<h3>Millal kasutada<\/h3>\n<p>\nKasutage eelkoormamist, kui ressursse vajatakse kohe. N\u00e4iteks:<\/p>\n<ul>\n<li>Kohandatud fondid v\u00e4lisest failist:\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>\nVaikimisi <code>comic-sans.woff2<\/code> hakkab laadima alles p\u00e4rast laadimist ja t\u00f5lgendamist <code>index.css<\/code>. Et mitte oodata nii kaua, saab fondi laadida varem kasutades <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>Kui jagate oma stiile l\u00e4henemise alusel <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Kriitiline CSS<\/a><\/noindex> kahte ossa, kriitiline (vahetuks renderdamiseks) ja mitte kriitiline:\n<pre><code class=\"xml\">\/* Inline kriitilised stiilid *\/<\/code><\/pre>\n<p>\nSelle l\u00e4henemisega hakkavad mitte-kriitilised stiilid laadima alles p\u00e4rast JavaScripti k\u00e4ivitamist, mis v\u00f5ib juhtuda mitu sekundit p\u00e4rast renderdamist. Kasutage <code>&lt;link rel= \"preload\"&gt;<\/code>, et alustada laadimist varem:<\/p>\n<pre><code class=\"xml\">\/* Manustatud kriitilised stiilid *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>\u00c4rge kuritarvitage eelkoormamist<\/b>. Kui laadite k\u00f5ike j\u00e4rele, ei kiirenda see veebilehte maagiliselt, vastupidi, see takistab brauserit t\u00f6\u00f6 korralikult planeerimast.<\/p>\n<p><b> \u00c4rge segage seda eelkoormamisega<\/b>. \u00c4rge kasutage <code>&lt;link rel= \"preload\"&gt;<\/code>, kui te ei vaja ressurssi kohe p\u00e4rast lehe laadimist. Kui see on hiljem vajalik, n\u00e4iteks j\u00e4rgmisele lehek\u00fcljele, siis kasutage <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>\u00dcksikasjad<\/h3>\n<p>\n<b>See on kohustuslik silt<\/b> brauseri t\u00f6\u00f6tlemiseks (kui see seda toetab), erinevalt k\u00f5igist muudest siltidest , mis on seotud eelkoormamisega. Brauser peab laadima ressursi, mis on n\u00e4idatud <code>&lt;link rel=\"preload\"&gt;<\/code>. Teistel juhtudel v\u00f5ib see eelkoormamise t\u00e4helepanuta j\u00e4tta, n\u00e4iteks kui ta t\u00f6\u00f6tab aeglasel \u00fchendusel.<\/p>\n<p><b>Prioriteedid<\/b>. Erinevatele ressurssidele (stiilid, skriptid, fondid jne) m\u00e4\u00e4ravad brauserid tavaliselt erinevad prioriteedid, et esmalt laadida k\u00f5ige olulisemad ressursid. Antud juhul m\u00e4\u00e4rab brauseri prioriteedi atribuut <code>as<\/code>. Chrome'i brauseris saate vaadata <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">t\u00e4ielikku prioriteetide tabelit<\/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 ja muud sildid\" 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> palub brauseril laadida ja vahem\u00e4lu ressursse (nt skripti v\u00f5i stiililehte) taustal. Laadimine toimub madala prioriteediga, mist\u00f5ttu see ei sega olulisemaid ressursse. See on kasulik, kui ressurssi on j\u00e4rgmise lehe peal vaja ja soovite selle eelnevalt vahem\u00e4llu salvestada.<\/p>\n<p>Siin ei tee brauser p\u00e4rast laadimist ressursiga midagi. Skripte ei k\u00e4ivitata, stiililehti ei rakendata. Ressurss salvestatakse lihtsalt vahem\u00e4llu ja antakse kohe p\u00e4rast n\u00f5udmist.<\/p>\n<h3>S\u00fcntaks<\/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> n\u00e4itab ressursi asukohta, mida soovite alla laadida.<\/p>\n<p><code> as<\/code> v\u00f5ib olla mis tahes, mida brauseris alla laadida saab:<\/p>\n<ul>\n<li><code>style<\/code> stiililehtede jaoks,\n<\/li>\n<li><code>script<\/code> skriptide jaoks,\n<\/li>\n<li><code>font<\/code> fontide jaoks,\n<\/li>\n<li><code>fetch<\/code> resursside jaoks, mis on alla laaditud kasutades <code>fetch()<\/code> v\u00f5i <code>k\u00e4ivitatakse<\/code>,\n<\/li>\n<li>t\u00e4ielik nimekiri vt. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN-l<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nOluline on m\u00e4\u00e4rata atribuut <code>as<\/code>\u00a0\u2014 see aitab brauseril \u00f5igesti prioritiseerida ja laadimist planeerida.<\/p>\n<h3>Millal kasutada<\/h3>\n<p>\n<b>Teistele lehtedele ressursside laadimiseks<\/b>, kui teil on vajalik ressurss teisest lehelt, ja soovite eelnevalt laadida, et seej\u00e4rel selle lehe renderdamist kiirendada. N\u00e4iteks:<\/p>\n<ul>\n<li>Teil on veebipood ja 40% kasutajatest lahkub avalehelt tootelehe poole. Kasutage <code>&lt;link rel= \"prefetch\"&gt;<\/code>, laadides CSS- ja JS-faile toote lehtede renderdamiseks.\n<\/li>\n<li>Teie rakendus on \u00fche lehega ja erinevad lehed laadivad erinevaid pakette. Kui kasutaja k\u00fclastab teatud lehte, saate eelnevalt laadida pakette k\u00f5igilt lehtedelt, millele see viitab.<\/li>\n<\/ul>\n<p>\n<b>T\u00f5en\u00e4oliselt saab seda silti ohutult kasutada mis tahes mahus<\/b>. Brauserid plaanivad tavaliselt prefetch'i v\u00e4ikese prioriteediga, nii et see ei h\u00e4iri kedagi. Pea siiski meeles, et see kasutab kasutaja andmeid, mis v\u00f5ivad olla kulukad.<\/p>\n<p><b>Ei sobi kiirete p\u00e4ringute jaoks<\/b>. \u00c4rge kasutage <code>&lt;link rel= \"prefetch\"&gt;<\/code>, kui ressurssi on vaja m\u00f5ne sekundi jooksul. Sellistel juhtudel rakendage <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>\u00dcksikasjad<\/h3>\n<p>\n<b>Valikuline silt<\/b>. Brauser ei ole kohustatud j\u00e4rgima seda juhist; ta v\u00f5ib selle n\u00e4iteks aeglases \u00fchenduses ignoreerida.<\/p>\n<p><b>Prioriteet Chrome'is<\/b>. Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> tavaliselt t\u00e4idab minimaalsete prioriteetidega (vt. <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">t\u00e4ielikku prioriteetide tabelit<\/a><\/noindex>), st p\u00e4rast kogu muu laadimist.<\/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> palub brauseril eelnevalt domeeniga \u00fchenduda, kui soovite tulevikus \u00fchenduse loomist kiirendada.<\/p>\n<p>Brauser peaks \u00fchenduse looma, kui ta laadib mingeid ressursse uue kolmanda osapoole domeenilt. N\u00e4iteks kui ta laadib Google Fontse, React'i CDN-ilt v\u00f5i k\u00fcsib JSON vastust API-serverilt.<\/p>\n<p>Uue \u00fchenduse loomine v\u00f5tab tavaliselt mitusada millisekundit. Seda tehakse \u00fcks kord, kuid see v\u00f5tab ikkagi aega. Kui olete eelnevalt \u00fchenduse loonud, siis s\u00e4\u00e4state aega ja laadite selle domeeni ressursse kiiremini.<\/p>\n<h3>S\u00fcntaks<\/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> n\u00e4itab domeeninime, mille jaoks tuleb m\u00e4\u00e4rata IP-aadress. Seda v\u00f5ib anda eelneva t\u00e4hisega (<code>https:\/\/domain.com<\/code>) v\u00f5i ilma selleta (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Millal kasutada<\/h3>\n<p>\n<b>Kasutage domeenide jaoks, mis v\u00f5ivad peagi vajalikud olla<\/b> sealt olulise stiili, skripti v\u00f5i pildi laadimiseks, kuid te ei tea veel ressursi URL-i. N\u00e4iteks:<\/p>\n<ul>\n<li>Teie rakendus asub <code>my-app.com<\/code> ja teeb AJAX-p\u00e4ringuid <code>api.my-app.com<\/code>: te ei tea ette t\u00e4pseid p\u00e4ringuid, kuna need tehakse d\u00fcnaamiliselt JS-ist. Siin on t\u00e4iesti kohane kasutada sildi kasutamist domeeniga eelnevalt \u00fchendamiseks.\n<\/li>\n<li>Teie rakendus asub <code>my-app.com<\/code> ja kasutab Google Fontse. Need laaditakse kahes etapis: k\u00f5igepealt laaditakse CSS-fail domeenilt <code>fonts.googleapis.com<\/code>, seej\u00e4rel k\u00fcsib see fail fonte <code>fonts.gstatic.com<\/code>. Te ei saa teada, millised konkreetsed fonte failid on <code>fonts.gstatic.com<\/code> te peate, kuni laadite CSS-faili, seega saame enne vaid eel\u00fchenduse seadistada.<\/li>\n<\/ul>\n<p>\n<b>Kasutage seda sildi, et veidi kiirendada m\u00f5nda kolmandat osalist skripti v\u00f5i stiili.<\/b> eelnevalt \u00fchenduse seadistamise kaudu.<\/p>\n<p><b>\u00c4rge kuritarvitage.<\/b>\u00dchenduse seadistamine ja hoidmine on kulukas nii kliendile kui ka serverile. Kasutage seda silti maksimaalselt 4-6 domeeni jaoks.<\/p>\n<h3>\u00dcksikasjad<\/h3>\n<p>\n<b>Valikuline silt<\/b>Brauserid ei pruugi j\u00e4rgida seda juhist ja v\u00f5ivad selle ignoreerida, n\u00e4iteks kui on juba loodud palju \u00fchendusi v\u00f5i m\u00f5nes muus olukorras.<\/p>\n<p><b>Mida h\u00f5lmab \u00fchenduse loomise protsess.<\/b>K\u00fcljest \u00fchenduse loomiseks peab brauser tegema j\u00e4rgmised toimingud:<\/p>\n<ul>\n<li><i>DNS-i lahendamine.<\/i>Leidke serveri IP-aadress (<code>216.58.215.78<\/code>) m\u00e4\u00e4ratud domeeninime jaoks (<code>google.com<\/code>).<\/li>\n<li><i>TCP-k\u00e4epigistus.<\/i>Pakettide vahetus (kliendist \u2192 serverisse \u2192 kliendisse), et alustada TCP-\u00fchendust serveriga.<\/li>\n<li><i>TLS-i k\u00e4epigistus (ainult HTTPS-i saitide jaoks).<\/i>Kaks ringi paketivahetust (kliendist \u2192 serverisse \u2192 klient \u2192 serverisse \u2192 kliendisse), et alustada turvalist TLS-seanssi.<\/li>\n<\/ul>\n<p>\nM\u00e4rkus: HTTP\/3 parendab ja kiirendab k\u00e4epigistuse mehhanismi, kuid see on veel kaugel.<\/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> palub brauseril eelnevalt domeeni DNS-i lahendada, kui kavatsete sellele peagi \u00fchenduda ja soovite algset \u00fchendust kiirendada.<\/p>\n<p>Brauser peab m\u00e4\u00e4rama domeeni IP-aadressi, kui see t\u00f5mbab uusi ressursse kolmandast osalisest domeenist. N\u00e4iteks Google Fonts'i fonte, React'i CDN-ist v\u00f5i k\u00fcsides JSON-vastust API-serverilt.<\/p>\n<p>Iga uue domeeni DNS-kirje lahendamine kestab tavaliselt umbes 20\u2013120 ms. See m\u00f5jutab vaid selle domeeni esimest ressursi laadimist, kuid esindab ikkagi viivitust. Kui DNS lahendatakse ette, siis s\u00e4\u00e4stame aega ja laadime ressursi kiiremini.<\/p>\n<h3>S\u00fcntaks<\/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> osutab domeeninimele, mille jaoks tuleb m\u00e4\u00e4rata IP-aadress. Saate anda koos eell\u00fchi (<code>https:\/\/domain.com<\/code>) v\u00f5i ilma selleta (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Millal kasutada<\/h3>\n<p>\n<b>Kasutage domeenide jaoks, mis v\u00f5ivad peagi vajalikud olla<\/b> ressursside laadimiseks sealt, millest brauser ei tea ette. N\u00e4iteks:<\/p>\n<ul>\n<li>Teie rakendus asub <code>my-app.com<\/code> ja teeb AJAX-p\u00e4ringuid <code>api.my-app.com<\/code>: te ei tea ette t\u00e4pseid p\u00e4ringuid, kuna need tehakse d\u00fcnaamiliselt JS-ist. Siin on t\u00e4iesti kohane kasutada sildi kasutamist domeeniga eelnevalt \u00fchendamiseks.\n<\/li>\n<li>Teie rakendus asub <code>my-app.com<\/code>, ja kasutab Google Fonts'i fonte. Need laaditakse kahes etapis: esmalt laaditakse CSS-fail domeenilt. <code>fonts.googleapis.com<\/code>, seej\u00e4rel k\u00fcsib see fail fonte <code>fonts.gstatic.com<\/code>. Te ei saa teada, millised konkreetsed fonte failid on <code>fonts.gstatic.com<\/code> te peate, kuni laadite CSS-faili, seega saame enne vaid eel\u00fchenduse seadistada.<\/li>\n<\/ul>\n<p>\n<b>Kasutage seda sildi, et veidi kiirendada m\u00f5nda kolmandat osalist skripti v\u00f5i stiili.<\/b> eelnevalt \u00fchenduse seadistamise kaudu.<\/p>\n<blockquote><p>Pange t\u00e4hele sarnaseid omadusi. <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> ja <code>&lt;link rel= \"preconnect\"&gt;<\/code>. \u00dches dom\u00e4\u00e4ris nende kasutamine tavaliselt ei ole m\u00f5istlik: <code>&lt;link rel= \"preconnect\"&gt;<\/code> juba sisaldab <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> ja palju muud. Seda v\u00f5ib \u00f5igustada kahes olukorras:<\/p>\n<ul>\n<li><i>Soovite toetada vanu brausereid<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> toetatud <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">alates IE10 ja Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> oli m\u00f5nda aega toetatud Chrome'is ja Firefoxis, kuid lisati Safari'sse alles versioonis 11.1 ja <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">ei toeta endiselt IE\/Edge<\/a><\/noindex>. Kui vajate nende brauserite toetamist, kasutage <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> varuv\u00f5ttena <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Soovite kiirendada \u00fchendust enam kui 4-6 domeeniga<\/i>. Sildi <code>&lt;link rel= \"preconnect\"&gt;<\/code> kasutamine rohkem kui 4-6 domeeni puhul ei ole soovitatav, kuna \u00fchenduse loomine ja toetamine on kulukas operatsioon. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> kasutab v\u00e4hem ressursse, seega kasutage seda vajadusel.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>\u00dcksikasjad<\/h3>\n<p>\n<b>Valikuline silt<\/b>. Brauseril ei ole kohustust j\u00e4rgida seda juhist, seega ei pruugi see DNS-i lahendamist teostada, n\u00e4iteks juhul, kui lehel on palju selliseid silte v\u00f5i mingil muul juhul.<\/p>\n<p><b>Mis on DNS<\/b>. Igal serveril internetis on ainulaadne IP-aadress, mis n\u00e4eb v\u00e4lja nagu <code>216.58.215.78<\/code>. Brauserid sisestavad tavaliselt aadressiribale saidi nime (nt <code>google.com<\/code>), ja DNS-serverid (Domeeninime s\u00fcsteem) seostavad selle serveri IP-aadressiga (<code>216.58.215.78<\/code>).<\/p>\n<p>Kuna IP-aadressi m\u00e4\u00e4ramiseks peab brauser tegema p\u00e4ringu DNS-serverile. See v\u00f5tab 20-120 ms, kui \u00fchendate uue kolmanda osapoole domeeniga.<\/p>\n<p><b>DNS on vahem\u00e4lus, kuigi mitte v\u00e4ga usaldusv\u00e4\u00e4rselt<\/b>. M\u00f5ned ops\u00fcsteemid ja brauserid salvestavad DNS-i p\u00e4ringud: see s\u00e4\u00e4stab aega korduvate p\u00e4ringute puhul, kuid vahem\u00e4lule ei saa toetuda. Linuxis see tavaliselt ei t\u00f6\u00f6ta. Chrome'il on DNS-i vahem\u00e4lu, kuid see kehtib ainult minuti. Windows salvestab DNS-i vastuseid viis p\u00e4eva.<\/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> palub brauseril laadida URL ja kuvada see n\u00e4htamatul vahelehel. Kui kasutaja kl\u00f5psab lingil, peaks leht ilmuma kohe. See on kasulik, kui olete kindel, et kasutaja k\u00fclastab teatud lehte ja soovite selle kuvamist kiirendada.<\/p>\n<p>Hoolimata selle sildi erakordsest t\u00f5hususest (v\u00f5i just selle t\u00f5ttu), on 2019. aastal <code>&lt;link rel= \"prerender\"&gt;<\/code> peamiselt brauserites halvasti toetatud. Lisateavet leiate <noindex><a rel=\"nofollow\" href=\"#1\">allpool<\/a><\/noindex>.<\/p>\n<h3>S\u00fcntaks<\/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> n\u00e4itab URL-i, mille jaoks soovite renderdamise k\u00e4ivitada taustal.<\/p>\n<h3>Millal kasutada<\/h3>\n<p>\n<b>Kui olete t\u00f5eliselt kindel, et kasutaja l\u00e4heb teatud lehele<\/b>Kui teil on \"tunnel\", mille kaudu 70% lehe A k\u00fclastajatest liiguvad lehele B, siis <code>&lt;link rel= \"prerender\"&gt;<\/code> aitab lehe A peal lehe B kiiresti kuvada.<\/p>\n<p><b>\u00c4rge kuritarvitage.<\/b>Eelrenderdamine on v\u00e4ga kulukas liikluse ja m\u00e4lu osas. \u00c4rge kasutage <code>&lt;link rel= \"prerender\"&gt;<\/code> rohkem kui \u00fche lehe jaoks.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>\u00dcksikasjad<\/h3>\n<p>\n<b>Valikuline silt<\/b>Brauser ei ole kohustatud seda juhist j\u00e4rgima ja v\u00f5ib selle n\u00e4iteks aeglases \u00fchenduses v\u00f5i vabade m\u00e4lukohtade puudumise t\u00f5ttu t\u00e4helepanuta j\u00e4tta.<\/p>\n<p>M\u00e4lu s\u00e4\u00e4stmise huvides <b>Chrome ei tee t\u00e4iendavat renderdamist<\/b>, vaid <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">ainult NoState eelkoormust<\/a><\/noindex>. See t\u00e4hendab, et Chrome laadib lehe ja k\u00f5ik selle ressursid, kuid ei tee renderdamist ega t\u00e4ida JavaScripti.<\/p>\n<p>Firefox ja Safari ei toeta seda sildi \u00fcldse. See ei riku spetsifikatsiooni, kuna brauserid ei ole kohustatud seda juhist t\u00e4itma; kuid see on siiski kahetsusv\u00e4\u00e4rne. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Firefoxi teostuse bug<\/a><\/noindex> oli avastatud seitsme aasta jooksul. On teateid, et Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">ka ei toeta seda sildi<\/a><\/noindex>.<\/p>\n<h1>Elulookirjeldus<\/h1>\n<p>\nKasutage:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 kui vajate ressurssi m\u00f5ne sekundi jooksul\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 kui vajate ressurssi j\u00e4rgmisele lehele\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 kui teate, et vajate varsti ressurssi, kuid ei tea veel selle t\u00e4ielikku URL-i\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 sarnaselt, kui teate, et vajate varsti ressurssi, kuid ei tea veel selle t\u00e4ielikku URL-i (vana brauseri jaoks)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 kui olete kindel, et kasutajad liiguvad kindlale lehele ja soovite kiirendada selle kuvamist<\/li>\n<\/ul>\n<p>Allikas: <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.1.1 - 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\/et\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"et_EE\" \/>\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\/et\/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\udd47Eelkoormamine, eelvaade ja muud sildid | ProHoster","description":"Veebit\u00f5hususe parandamiseks on palju viise. \u00dcks neist on sisu eelkoormamine, mis hiljem vajalikuks osutub.","canonical_url":"https:\/\/prohoster.info\/et\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"et_EE","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\/et\/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\/et\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/et\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}