{"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\/da\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch og andre tags","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Der er <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">Mange m\u00e5der at forbedre webydelsen p\u00e5.<\/a><\/noindex>En af dem er at forudindl\u00e6se indhold, der skal bruges senere. Prefetching af CSS, forudindl\u00e6sning af hele siden eller opl\u00f8sning af dom\u00e6nenavnet. Vi g\u00f8r det hele p\u00e5 forh\u00e5nd, og s\u00e5 viser vi straks resultatet! Det lyder cool.<\/p>\n<p>Endnu mere fantastisk er, at det er meget enkelt at implementere. Fem &lt;link rel&gt;-tags giver browseren besked om at foretage forudg\u00e5ende handlinger:<\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;\n&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;\n\n&lt;link rel=\"preconnect\" href=\"https:\/\/example.com\" \/&gt;\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/example.com\" \/&gt;\n\n&lt;link rel=\"prerender\" href=\"https:\/\/example.com\/about.html\" \/&gt;<\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nLad os kort forklare, hvad de g\u00f8r, og hvorn\u00e5r de skal bruges.<\/p>\n<p>G\u00e5 til: <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> fort\u00e6ller browseren, at den hurtigst muligt skal hente og cache ressourcen (for eksempel et script eller en stylesheet). Dette er nyttigt, n\u00e5r ressourcen vil v\u00e6re n\u00f8dvendig f\u00e5 sekunder efter indl\u00e6sningen af siden \u2014 og du vil fremskynde processen.<\/p>\n<p>Browseren g\u00f8r ikke noget med ressourcen efter indl\u00e6sningen. Scripts k\u00f8res ikke, stylesheets anvendes ikke. Ressourcen caches blot og stilles straks til r\u00e5dighed efter anmodning.<\/p>\n<h3>Syntaks<\/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> angiver den ressource, du \u00f8nsker at downloade.<\/p>\n<p><code> as<\/code> kan v\u00e6re hvad som helst, der kan downloades i browseren:<\/p>\n<ul>\n<li><code>style<\/code> for stylesheets,\n<\/li>\n<li><code>script<\/code> for scripts,\n<\/li>\n<li><code>font<\/code> for skrifttyper,\n<\/li>\n<li><code>fetch<\/code> for ressourcer, der hentes med <code>fetch()<\/code> eller <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>fuld liste se. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">p\u00e5 MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nDet er vigtigt at angive attributten <code>as<\/code> \u2014 det hj\u00e6lper browseren med at prioritere og planl\u00e6gge indl\u00e6sningen korrekt.<\/p>\n<h3>Hvorn\u00e5r skal man bruge<\/h3>\n<p>\nBrug preload, n\u00e5r ressourcen vil v\u00e6re n\u00f8dvendig om kort tid. For eksempel:<\/p>\n<ul>\n<li>Skrifttyper fra eksterne filer:\n<pre><code class=\"xml\">&lt;!-- index.html --&gt;\n&lt;link rel=\"stylesheet\" href=\"index.css\" \/&gt;\n\/* index.css *\/\n@font-face {\n  src: url('comic-sans.woff2') format('woff2');\n}<\/code><\/pre>\n<p>\nBy default <code>comic-sans.woff2<\/code> vil begynde at blive indl\u00e6st f\u00f8rst efter indl\u00e6sning og parsing af <code>index.css<\/code>. For ikke at vente s\u00e5 l\u00e6nge kan du indl\u00e6se skrifttypen tidligere med <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>Hvis du opdeler dine styles i henhold til tilgangen <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> i to dele, kritiske (til omg\u00e5ende rendering) og ikke-kritiske:\n<pre><code class=\"xml\">&lt;style&gt;\n\/* Inlined critical styles *\/\n&lt;\/style&gt;\n\n&lt;script&gt;\n\/* Custom JS that starts downloading non-critical styles *\/\nloadCSS('\/app\/non-critical.css');\n&lt;\/script&gt;<\/code><\/pre>\n<p>\nMed denne tilgang vil ikke-kritiske stilarter begynde at indl\u00e6se f\u00f8rst, n\u00e5r JavaScript aktiveres, hvilket kan ske et par sekunder efter rendering. I stedet for at vente p\u00e5 JS, brug <code>&lt;link rel=\"preload\"&gt;<\/code>, for at starte indl\u00e6sningen tidligere:<\/p>\n<pre><code class=\"xml\">\/* Inline kritiske stilarter *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Misbrug ikke preloading<\/b>. Hvis du indl\u00e6ser alt muligt, vil hjemmesiden ikke magisk accelerere; tv\u00e6rtimod vil det hindrer browseren i at planl\u00e6gge arbejdet ordentligt.<\/p>\n<p><b> Forveksl ikke med prefetching<\/b>. Brug ikke <code>&lt;link rel=\"preload\"&gt;<\/code>, hvis du ikke har brug for ressourcen straks efter sideindl\u00e6sning. Hvis den skal bruges senere, for eksempel til n\u00e6ste side, s\u00e5 brug <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Detaljer<\/h3>\n<p>\n<b>Dette er et obligatorisk tag<\/b> for browseren at udf\u00f8re (hvis den underst\u00f8tter det), i mods\u00e6tning til alle andre  tags der er relateret til forh\u00e5ndsindl\u00e6sning. Browseren er forpligtet til at indl\u00e6se ressourcen angivet i <code>&lt;link rel=\"preload\"&gt;<\/code>. I andre tilf\u00e6lde kan den ignorere forh\u00e5ndsindl\u00e6sningen, for eksempel hvis den arbejder p\u00e5 en langsom forbindelse.<\/p>\n<p><b>Prioriteter<\/b>. Forskellige ressourcer (stilarter, scripts, skrifttyper osv.) tildeles typisk forskellige prioriteter af browsere, s\u00e5 de vigtigste ressourcer indl\u00e6ses f\u00f8rst. I dette tilf\u00e6lde bestemmer browseren prioriteten ud fra attributten <code>as<\/code>. For Chrome-browsere kan du se <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">den komplette prioritets tabel<\/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 og andre tags\" 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> beder browseren om at indl\u00e6se og cache ressourcen (for eksempel et script eller en stylesheet) i baggrunden. Indl\u00e6sningen sker med lav prioritet, s\u00e5 det ikke hindrer vigtigere ressourcer. Dette er nyttigt, hvis ressourcen skal bruges p\u00e5 n\u00e6ste side, og du vil cache den p\u00e5 forh\u00e5nd.<\/p>\n<p>Her g\u00f8r browseren heller ikke noget med ressourcen efter indl\u00e6sning. Scripts udf\u00f8res ikke, stylesheets anvendes ikke. Ressourcen caches simpelthen og stilles straks til r\u00e5dighed p\u00e5 anmodning.<\/p>\n<h3>Syntaks<\/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> angiver den ressource, du \u00f8nsker at downloade.<\/p>\n<p><code> as<\/code> kan v\u00e6re hvad som helst, der kan downloades i browseren:<\/p>\n<ul>\n<li><code>style<\/code> for stylesheets,\n<\/li>\n<li><code>script<\/code> for scripts,\n<\/li>\n<li><code>font<\/code> for skrifttyper,\n<\/li>\n<li><code>fetch<\/code> for ressourcer, der hentes med <code>fetch()<\/code> eller <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>fuld liste se. <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">p\u00e5 MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nDet er vigtigt at angive attributten <code>as<\/code>\u00a0\u2014 det hj\u00e6lper browseren med at prioritere ordentligt og planl\u00e6gge indl\u00e6sning.<\/p>\n<h3>Hvorn\u00e5r skal man bruge<\/h3>\n<p>\n<b>For at indl\u00e6se ressourcer fra andre sider<\/b>, hvis du har brug for en ressourc fra en anden side, og du \u00f8nsker at forudindl\u00e6se den for at fremskynde rendering af denne side. For eksempel:<\/p>\n<ul>\n<li>Du har en e-handelsbutik, og 40% af brugerne forlader startsiden for en produktside. Brug <code>&lt;link rel= \"prefetch\"&gt;<\/code>, ved at indl\u00e6se CSS- og JS-filer til rendering af sider med produktet.\n<\/li>\n<li>Du har en enkelt-sides applikation, hvor forskellige sider indl\u00e6ser forskellige pakker. N\u00e5r en bruger bes\u00f8ger en bestemt side, kan du forudindl\u00e6se pakkerne for alle de sider, som den henviser til.<\/li>\n<\/ul>\n<p>\n<b>Dette tag kan sandsynligvis sikkert bruges i hvilken som helst m\u00e6ngde<\/b>. Browsere planl\u00e6gger typisk prefetch med lavest prioritet, s\u00e5 det generer ikke nogen. Bare husk, at det bruger brugerens data, hvilket kan koste penge.<\/p>\n<p><b>Ikke til presserende anmodninger<\/b>. Brug ikke <code>&lt;link rel= \"prefetch\"&gt;<\/code>, n\u00e5r ressourcen er n\u00f8dvendig inden for et par sekunder. I dette tilf\u00e6lde skal du anvende <code>&lt;link rel=\"preload\"&gt;<\/code>.<\/p>\n<h3>Detaljer<\/h3>\n<p>\n<b>Et valgfrit tag<\/b>. Browseren er ikke forpligtet til at f\u00f8lge denne instruktion, den kan ignorere den, for eksempel p\u00e5 en langsom forbindelse.<\/p>\n<p><b>Prioritet i Chrome<\/b>. I Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> udf\u00f8res normalt med minimal prioritet (se <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">den komplette prioritets tabel<\/a><\/noindex>), dvs. efter at hele resten er indl\u00e6st.<\/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> beder browseren om at oprette forbindelse til dom\u00e6net p\u00e5 forh\u00e5nd, n\u00e5r du \u00f8nsker at fremskynde forbindelsesetableringen i fremtiden.<\/p>\n<p>Browseren skal oprette forbindelsen, hvis den henter ressourcer fra et nyt tredjepartsdom\u00e6ne. For eksempel, hvis den indl\u00e6ser skrifttyper fra Google Fonts, React fra CDN eller anmoder om et JSON-svar fra API-serveren.<\/p>\n<p>Oprettelse af en ny forbindelse tager normalt et par hundrede millisekunder. Det sker \u00e9n gang, men tager stadig tid. Hvis du opretter forbindelsen p\u00e5 forh\u00e5nd, sparer du tid og indl\u00e6ser ressourcer fra dette dom\u00e6ne hurtigere.<\/p>\n<h3>Syntaks<\/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> angiver dom\u00e6nenavnet, for hvilket IP-adressen skal bestemmes. Du kan angive det med pr\u00e6fiks (<code>https:\/\/domain.com<\/code>) eller uden (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Hvorn\u00e5r skal man bruge<\/h3>\n<p>\n<b>Brug det til dom\u00e6ner, der snart vil v\u00e6re n\u00f8dvendige<\/b> til at indl\u00e6se vigtig stil, script eller billede derfra, men du kender endnu ikke URL-adressen p\u00e5 ressourcen. For eksempel:<\/p>\n<ul>\n<li>Din applikation hostes p\u00e5 <code>my-app.com<\/code> og laver AJAX-anmodninger til <code>api.my-app.com<\/code>: du ved ikke p\u00e5 forh\u00e5nd de specifikke anmodninger, fordi de g\u00f8res dynamisk fra JS. Her er brugen af tagget til forh\u00e5ndsoprettelse af forbindelsen til dom\u00e6net passende.\n<\/li>\n<li>Din applikation hostes p\u00e5 <code>my-app.com<\/code> og bruger skrifttyper fra Google Fonts. De indl\u00e6ses i to trin: f\u00f8rst indl\u00e6ses CSS-filen fra dom\u00e6net <code>fonts.googleapis.com<\/code>, derefter anmoder denne fil om skrifttyper fra <code>fonts.gstatic.com<\/code>. Du kan ikke vide, hvilke specifikke skrifttypefiler der kommer fra <code>fonts.gstatic.com<\/code> du har brug for, indtil du uploader CSS-filen, s\u00e5 vi kan kun oprette en forudg\u00e5ende forbindelse p\u00e5 forh\u00e5nd.<\/li>\n<\/ul>\n<p>\n<b>Brug denne tag for at lidt hurtigere indl\u00e6se et tredjeparts script eller stil<\/b> ved hj\u00e6lp af forudg\u00e5ende forbindelse.<\/p>\n<p><b>Misbrug ikke<\/b>. Etablering og vedligeholdelse af forbindelsen er en kostbar operation b\u00e5de for klienten og serveren. Brug denne tag maks til 4-6 dom\u00e6ner.<\/p>\n<h3>Detaljer<\/h3>\n<p>\n<b>Et valgfrit tag<\/b>. Browseren er ikke forpligtet til at f\u00f8lge denne instruktion og kan ignorere den, for eksempel hvis der allerede er oprettet mange forbindelser eller i en anden situation.<\/p>\n<p><b>Hvad processen med tilslutning indeb\u00e6rer<\/b>. For at oprette forbindelse til hvert websted skal browseren udf\u00f8re f\u00f8lgende handlinger:<\/p>\n<ul>\n<li><i>DNS-opl\u00f8sning<\/i>. Find IP-adressen p\u00e5 serveren (<code>216.58.215.78<\/code>) for det angivne dom\u00e6nenavn (<code>google.com<\/code>).<\/li>\n<li><i>TCP-handshake<\/i>. Pakkeudveksling (klient \u2192 server \u2192 klient) for at initiere en TCP-forbindelse til serveren.<\/li>\n<li><i>TLS-handshake (kun for HTTPS-websteder)<\/i>. To runder af pakkeudveksling (klient \u2192 server \u2192 klient \u2192 server \u2192 klient) for at initiere en sikker TLS-session.<\/li>\n<\/ul>\n<p>\nBem\u00e6rk: HTTP\/3 vil forbedre og fremskynde handshake-mekanismen, men det er stadig langt.<\/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> beder browseren om at udf\u00f8re DNS-opl\u00f8sningen p\u00e5 forh\u00e5nd for dom\u00e6net, hvis du snart vil oprette forbindelse til det og \u00f8nsker at fremskynde den indledende forbindelse.<\/p>\n<p>Browseren skal bestemme IP-adressen for dom\u00e6net, hvis den vil hente nogen ressourcer fra et nyt tredjepartsdom\u00e6ne. For eksempel at indl\u00e6se skrifttyper fra Google Fonts, React fra CDN eller anmode om et JSON-svar fra API-serveren.<\/p>\n<p>For hvert nyt dom\u00e6ne tager det normalt omkring 20-120 ms at opl\u00f8se DNS-posten. Dette p\u00e5virker kun indl\u00e6sningen af den f\u00f8rste ressource fra dette dom\u00e6ne, men udg\u00f8r stadig en forsinkelse. Hvis vi udf\u00f8rer DNS-opl\u00f8sningen p\u00e5 forh\u00e5nd, sparer vi tid og indl\u00e6ser ressourcen hurtigere.<\/p>\n<h3>Syntaks<\/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> angiver dom\u00e6nenavnet, for hvilket IP-adressen skal etableres. Kan angives med pr\u00e6fix (<code>https:\/\/domain.com<\/code>) eller uden (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Hvorn\u00e5r skal man bruge<\/h3>\n<p>\n<b>Brug det til dom\u00e6ner, der snart vil v\u00e6re n\u00f8dvendige<\/b> for at indl\u00e6se ressourcer derfra, som browseren ikke kender p\u00e5 forh\u00e5nd. For eksempel:<\/p>\n<ul>\n<li>Din applikation hostes p\u00e5 <code>my-app.com<\/code> og laver AJAX-anmodninger til <code>api.my-app.com<\/code>: du ved ikke p\u00e5 forh\u00e5nd de specifikke anmodninger, fordi de g\u00f8res dynamisk fra JS. Her er brugen af tagget til forh\u00e5ndsoprettelse af forbindelsen til dom\u00e6net passende.\n<\/li>\n<li>Din applikation hostes p\u00e5 <code>my-app.com<\/code>, og bruger skrifttyper fra Google Fonts. Disse indl\u00e6ses i to faser: f\u00f8rst indl\u00e6ses CSS-filen fra dom\u00e6net, <code>fonts.googleapis.com<\/code>, derefter anmoder denne fil om skrifttyper fra <code>fonts.gstatic.com<\/code>. Du kan ikke vide, hvilke specifikke skrifttypefiler der kommer fra <code>fonts.gstatic.com<\/code> du har brug for, indtil du uploader CSS-filen, s\u00e5 vi kan kun oprette en forudg\u00e5ende forbindelse p\u00e5 forh\u00e5nd.<\/li>\n<\/ul>\n<p>\n<b>Brug denne tag for at lidt hurtigere indl\u00e6se et tredjeparts script eller stil<\/b> ved hj\u00e6lp af forudg\u00e5ende forbindelse.<\/p>\n<blockquote><p>Bem\u00e6rk de lignende karakteristika i <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> og <code>&lt;link rel= \"preconnect\"&gt;<\/code>. At anvende dem sammen til et dom\u00e6ne giver normalt ikke mening: <code>&lt;link rel= \"preconnect\"&gt;<\/code> allerede inkluderer <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> og meget mere. Dette kan retf\u00e6rdigg\u00f8res i to tilf\u00e6lde:<\/p>\n<ul>\n<li><i>Du \u00f8nsker at underst\u00f8tte gamle browsere<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> underst\u00f8ttes <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">begyndende fra IE10 og Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> var underst\u00f8ttet i et stykke tid i Chrome og Firefox, men blev f\u00f8rst tilf\u00f8jet i Safari i 11.1 og <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">underst\u00f8ttes stadig ikke i IE\/Edge<\/a><\/noindex>. Hvis du skal underst\u00f8tte disse browsere, s\u00e5 brug <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> som et backup-alternativ for <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Du \u00f8nsker at accelerere forbindelsen til mere end 4-6 dom\u00e6ner<\/i>. Taggen <code>&lt;link rel= \"preconnect\"&gt;<\/code> anbefales ikke til brug med mere end 4-6 dom\u00e6ner, da oprettelsen og vedligeholdelsen af forbindelsen er en kostbar operation. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> forbruger mindre ressourcer, s\u00e5 brug det i tilf\u00e6lde af behov.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Detaljer<\/h3>\n<p>\n<b>Et valgfrit tag<\/b>. Browsere er ikke forpligtede til at f\u00f8lge denne instruktion, s\u00e5 de kan undlade at udf\u00f8re DNS-opslag, for eksempel hvis der er mange s\u00e5danne tags p\u00e5 siden eller i andre tilf\u00e6lde.<\/p>\n<p><b>Hvad er DNS<\/b>. Hver server p\u00e5 internettet har en unik IP-adresse, der ser ud som <code>216.58.215.78<\/code>. I browserens adresselinje indtastes normalt webstedets navn (for eksempel, <code>google.com<\/code>), og DNS-servere (Domain Name System) kortl\u00e6gger det til serverens IP-adresse (<code>216.58.215.78<\/code>).<\/p>\n<p>For at bestemme IP-adressen skal browseren foretage en anmodning til DNS-serveren. Det tager 20-120 ms ved forbindelse til et nyt eksternt dom\u00e6ne.<\/p>\n<p><b>DNS caches, selvom det ikke er meget p\u00e5lideligt<\/b>. Nogle operativsystemer og browsere cacher DNS-anmodninger: det sparer tid ved gentagne anmodninger, men man kan ikke stole p\u00e5 cachen. I Linux virker det normalt ikke overhovedet. Chrome har en DNS-cache, men den lever kun i et minut. Windows cacher DNS-svar i fem dage.<\/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> beder browseren om at indl\u00e6se URL'en og vise den p\u00e5 en usynlig fane. N\u00e5r brugeren klikker p\u00e5 linket, skal siden vises straks. Dette er nyttigt, hvis du er sikker p\u00e5, at brugeren vil bes\u00f8ge en bestemt side, og du \u00f8nsker at fremskynde visningen.<\/p>\n<p>P\u00e5 trods af dette tags enest\u00e5ende effektivitet (eller m\u00e5ske p\u00e5 grund af den), i 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> er den d\u00e5rligt underst\u00f8ttet i de fleste browsere. L\u00e6s mere <noindex><a rel=\"nofollow\" href=\"#1\">nedenfor<\/a><\/noindex>.<\/p>\n<h3>Syntaks<\/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> henviser til URL'en, som du \u00f8nsker at k\u00f8re baggrundsrendering for.<\/p>\n<h3>Hvorn\u00e5r skal man bruge<\/h3>\n<p>\n<b>N\u00e5r du virkelig er sikker p\u00e5, at brugeren vil g\u00e5 til en bestemt side<\/b>Hvis du har en 'tunnel', hvor 70% af bes\u00f8gende p\u00e5 side A g\u00e5r til side B, s\u00e5 <code>&lt;link rel= \"prerender\"&gt;<\/code> vil side A hurtigt hj\u00e6lpe med at vise side B.<\/p>\n<p><b>Misbrug ikke<\/b>Forh\u00e5ndsrendering er ekstremt dyrt i forhold til trafik og hukommelse. Brug ikke <code>&lt;link rel= \"prerender\"&gt;<\/code> mere end til \u00e9n side.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Detaljer<\/h3>\n<p>\n<b>Et valgfrit tag<\/b>Browseren er ikke forpligtet til at f\u00f8lge denne instruktion og kan ignorere den, for eksempel p\u00e5 en langsom forbindelse eller ved utilstr\u00e6kkelig ledig hukommelse.<\/p>\n<p>For at spare hukommelse <b>udf\u00f8rer Chrome ikke en fuld rendering<\/b>, og <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">kun preloading NoState<\/a><\/noindex>. Det betyder, at Chrome indl\u00e6ser siden og alle dens ressourcer, men ikke udf\u00f8rer renderingen eller k\u00f8rer JavaScript.<\/p>\n<p>Firefox og Safari underst\u00f8tter slet ikke denne tag. Det bryder ikke specifikationen, da browserne ikke er forpligtet til at f\u00f8lge denne instruktion; men det er stadig \u00e6rgerligt. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Implementeringsfejlen<\/a><\/noindex> i Firefox har v\u00e6ret \u00e5ben i syv \u00e5r. Der er rapporter om, at Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">heller ikke underst\u00f8tter denne tag<\/a><\/noindex>.<\/p>\n<h1>CV<\/h1>\n<p>\nBrug:<\/p>\n<ul>\n<li><code>&lt;link rel=\"preload\"&gt;<\/code>\u00a0\u2014 n\u00e5r du har brug for en ressource om et par sekunder\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 n\u00e5r du har brug for en ressource p\u00e5 den n\u00e6ste side\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 n\u00e5r du ved, at du snart f\u00e5r brug for en ressource, men endnu ikke kender dens fulde URL\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 p\u00e5 samme m\u00e5de, n\u00e5r du ved, at du snart f\u00e5r brug for en ressource, men endnu ikke kender dens fulde URL (til gamle browsere)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 n\u00e5r du er sikker p\u00e5, at brugerne vil g\u00e5 til en bestemt side og \u00f8nsker at fremskynde dens visning<\/li>\n<\/ul>\n<p>Kilde: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/445264\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445\u00a0\u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435. \u041f\u0440\u0435\u0444\u0442\u0435\u0447\u0438\u043d\u0433 CSS, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u043d\u0433 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u0417\u0432\u0443\u0447\u0438\u0442 \u043a\u0440\u0443\u0442\u043e. \u0415\u0449\u0451 \u043a\u0440\u0443\u0447\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u041f\u044f\u0442\u044c \u0442\u0435\u0433\u043e\u0432 &lt;link rel&gt; \u0434\u0430\u044e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: &lt;link rel=&#187;prefetch&#187; href=&#187;\/style.css&#187; as=&#187;style&#187; \/&gt; [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-30281","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u2014 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u0437\u0436\u0435.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/da\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"da_DK\" \/>\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\/da\/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 og andre tags | ProHoster","description":"Der er mange m\u00e5der at forbedre webpr\u00e6stationer p\u00e5. En af dem er at preloade indhold, som bliver n\u00f8dvendigt senere.","canonical_url":"https:\/\/prohoster.info\/da\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"da_DK","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\/da\/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\/da\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}