{"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\/nl\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch en andere tags","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Er is <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">veel manieren om webprestaties te verbeteren<\/a><\/noindex>. Een daarvan is het voorladen van \u0645\u062d\u062a\u0648\u0627, dat later nodig is. Prefetchen van CSS, v\u00f3\u00f3r renderen van de volledige pagina of het oplossen van de domeinnaam. We doen alles vooraf en tonen vervolgens het resultaat onmiddellijk! Klinkt geweldig.<\/p>\n<p>Nog beter is dat dit heel eenvoudig te implementeren is. Vijf  tags geven de browser de opdracht voor voorafgaande acties:<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nWe zullen kort uitleggen wat ze doen en wanneer je ze moet gebruiken.<\/p>\n<p>Ga naar: <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> vertelt de browser om de bron zo snel mogelijk te downloaden en te cachen (bijvoorbeeld een script of stylesheet). Dit is nuttig wanneer de bron binnen een paar seconden na het laden van de pagina nodig is \u2014 en je het proces wilt versnellen.<\/p>\n<p>De browser doet niets met de bron na het laden. Scripts worden niet uitgevoerd, stylesheets worden niet toegepast. De bron wordt gewoon gecached en onmiddellijk op aanvraag geleverd.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"preload\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> verwijst naar de bron die je wilt downloaden.<\/p>\n<p><code> as<\/code> kan alles zijn dat je kunt downloaden in de browser:<\/p>\n<ul>\n<li><code>style<\/code> voor stylesheets,\n<\/li>\n<li><code>script<\/code> voor scripts,\n<\/li>\n<li><code>font<\/code> voor lettertypen,\n<\/li>\n<li><code>fetch<\/code> voor bronnen die worden geladen met <code>fetch()<\/code> of <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>volledige lijst zie <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">op MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nHet is belangrijk om het attribuut op te geven <code>as<\/code> \u2013 dit helpt de browser om de prioriteiten goed te ordenen en de laadtijden te plannen.<\/p>\n<h3>Wanneer te gebruiken<\/h3>\n<p>\nGebruik preloading wanneer de bron binnenkort nodig is. Bijvoorbeeld:<\/p>\n<ul>\n<li>Niet-standaard lettertypen van een extern bestand:\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>\nStandaard <code>comic-sans.woff2<\/code> zal pas beginnen met laden nadat het is geladen en geparsed <code>index.css<\/code>. Om niet zo lang te hoeven wachten, kan het lettertype eerder worden geladen met <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>Als je je stijlen scheidt volgens de aanpak <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> in twee delen, kritisch (voor onmiddellijke rendering) en niet-kritisch:\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<p>\nMet deze aanpak worden niet-kritieke stijlen pas geladen bij het starten van JavaScript, wat een paar seconden na de rendering kan gebeuren. Gebruik in plaats van te wachten op JS <code>&lt;link rel= \"preload\"&gt;<\/code>, om eerder te beginnen met laden:<\/p>\n<pre><code class=\"xml\">\/* Inlined critical styles *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>Misbruik preload niet<\/b>. Als alles tegelijk wordt geladen, zal de site niet magisch versnellen; eerder het tegendeel, het kan de browser hinderen om effici\u00ebnt te plannen.<\/p>\n<p><b> Verwar dit niet met prefetching<\/b>. Gebruik het niet <code>&lt;link rel= \"preload\"&gt;<\/code>, als je de bron niet onmiddellijk na het laden van de pagina nodig hebt. Als het later nodig is, bijvoorbeeld voor de volgende pagina, gebruik dan <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>Dit is een verplichte tag<\/b> voor de browser (als deze deze ondersteunt), in tegenstelling tot alle andere -tags die met preloaden te maken hebben. De browser is verplicht om de bron te laden die is opgegeven in <code>&lt;link rel=\"preload\"&gt;<\/code>. In andere gevallen kan het preloaden genegeerd worden, bijvoorbeeld als deze op een langzame verbinding werkt.<\/p>\n<p><b>Prioriteiten<\/b>. Verschillende bronnen (stijlen, scripts, lettertypen, enz.) worden doorgaans een andere prioriteit toegekend door browsers, zodat ze in de eerste plaats de belangrijkste bronnen laden. In dit geval bepaalt de browser de prioriteit op basis van het attribuut <code>as<\/code>. Voor de Chrome-browser kun je kijken naar de <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">volledige prioriteitstabel<\/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 en andere 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> verzoekt de browser om de bron (bijvoorbeeld een script of stylesheet) op de achtergrond te laden en in de cache op te slaan. De laadsnelheid is laag, zodat belangrijke bronnen niet worden gehinderd. Dit is nuttig als de bron op de volgende pagina nodig is en je deze van tevoren wilt cachen.<\/p>\n<p>Ook hier doet de browser niets met de bron na het laden. Scripts worden niet uitgevoerd, stylesheets worden niet toegepast. De bron wordt gewoon gecachet en onmiddellijk beschikbaar gemaakt op verzoek.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prefetch\" href=\"\/style.css\" as=\"style\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> verwijst naar de bron die je wilt downloaden.<\/p>\n<p><code> as<\/code> kan alles zijn dat je kunt downloaden in de browser:<\/p>\n<ul>\n<li><code>style<\/code> voor stylesheets,\n<\/li>\n<li><code>script<\/code> voor scripts,\n<\/li>\n<li><code>font<\/code> voor lettertypen,\n<\/li>\n<li><code>fetch<\/code> voor bronnen die worden geladen met <code>fetch()<\/code> of <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>volledige lijst zie <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">op MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nHet is belangrijk om het attribuut op te geven <code>as<\/code>\u00a0\u2014 dit helpt de browser om prioriteiten correct in te stellen en de laadplanning te optimaliseren.<\/p>\n<h3>Wanneer te gebruiken<\/h3>\n<p>\n<b>Voor het laden van bronnen van andere pagina's<\/b>, als je een bron van een andere pagina nodig hebt en deze van tevoren wilt laden om de rendering van die pagina te versnellen. Bijvoorbeeld:<\/p>\n<ul>\n<li>Je hebt een webwinkel, en 40% van de gebruikers verlaat de hoofdpagina voor de productpagina. Gebruik <code>&lt;link rel= \"prefetch\"&gt;<\/code>, door CSS- en JS-bestanden te laden voor het weergeven van pagina's met producten.\n<\/li>\n<li>Je hebt een single-page app, terwijl verschillende pagina's verschillende pakketten laden. Wanneer een gebruiker een pagina bezoekt, kunnen de pakketten voor alle pagina's die eraan zijn gekoppeld vooraf worden geladen.<\/li>\n<\/ul>\n<p>\n<b>Waarschijnlijk kan deze tag veilig in elke hoeveelheid worden gebruikt<\/b>. Browsers plannen meestal prefetch met de laagste prioriteit, zodat het niemand hindert. Houd er alleen rekening mee dat dit de gebruikerstrafiek kost, wat geld kan kosten.<\/p>\n<p><b>Niet voor urgente verzoeken<\/b>. Gebruik het niet <code>&lt;link rel= \"prefetch\"&gt;<\/code>, wanneer de bron binnen enkele seconden nodig is. In dit geval gebruik <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>Een optionele tag<\/b>. De browser is niet verplicht om deze instructie op te volgen, hij kan deze negeren, bijvoorbeeld bij een langzame verbinding.<\/p>\n<p><b>Prioriteit in Chrome<\/b>. In Chrome <code>&lt;link rel= \"prefetch\"&gt;<\/code> wordt meestal met een minimale prioriteit uitgevoerd (zie <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">volledige prioriteitstabel<\/a><\/noindex>), dat wil zeggen nadat al het andere is geladen.<\/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> verzoekt de browser om vooraf verbinding te maken met het domein wanneer je de verbindingsopstelling in de toekomst wilt versnellen.<\/p>\n<p>De browser moet een verbinding tot stand brengen als hij bronnen van een nieuw extern domein ophaalt. Bijvoorbeeld, als het Google Fonts-lettertypen, React van een CDN laadt of een JSON-antwoord van de API-server opvraagt.<\/p>\n<p>Het tot stand brengen van een nieuwe verbinding duurt gewoonlijk enkele honderden milliseconden. Het gebeurt \u00e9\u00e9n keer, maar kost alsnog tijd. Als je een verbinding vooraf hebt vastgesteld, bespaar je tijd en laad je sneller bronnen van dit domein.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"preconnect\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> duidt de domeinnaam aan waarvan het IP-adres moet worden bepaald. Dit kan met een voorvoegsel worden aangegeven (<code>https:\/\/domain.com<\/code>) of zonder (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wanneer te gebruiken<\/h3>\n<p>\n<b>Gebruik voor domeinen die binnenkort nodig zijn<\/b> om belangrijke stijl, script of afbeelding daar te laden, maar waarvan je nog niet weet wat de URL is. Bijvoorbeeld:<\/p>\n<ul>\n<li>Je applicatie wordt gehost op <code>my-app.com<\/code> en doet AJAX-verzoeken naar <code>api.my-app.com<\/code>: je kent de specifieke verzoeken niet van tevoren, omdat deze dynamisch vanuit JS worden gedaan. Hier is het volledig passend om de tag voor voorafgaand verbinden met het domein te gebruiken.\n<\/li>\n<li>Je applicatie wordt gehost op <code>my-app.com<\/code> en gebruikt Google Fonts-lettertypen. Deze worden in twee fasen geladen: eerst wordt het CSS-bestand van het domein <code>fonts.googleapis.com<\/code>, daarna vraagt dit bestand de lettertypen op van <code>fonts.gstatic.com<\/code>. Je kunt niet weten welke specifieke lettertypebestanden uit <code>fonts.gstatic.com<\/code> u heeft deze nodig totdat u het CSS-bestand heeft ge\u00fcpload, dus vooraf kunnen we alleen een voorlopige verbinding tot stand brengen.<\/li>\n<\/ul>\n<p>\n<b>Gebruik deze tag om een externe script of stijl iets sneller te laden.<\/b> door het tot stand brengen van een voorlopige verbinding.<\/p>\n<p><b>Misbruik het niet.<\/b>Het tot stand brengen en onderhouden van een verbinding is een kostbare operatie voor zowel de client als de server. Gebruik deze tag maximaal voor 4-6 domeinen.<\/p>\n<h3>Details<\/h3>\n<p>\n<b>Een optionele tag<\/b>De browser is niet verplicht deze instructie op te volgen en kan deze negeren, bijvoorbeeld als er al veel verbindingen zijn tot stand gebracht of in een andere situatie.<\/p>\n<p><b>Wat omvat het aansluiten?<\/b>Om verbinding te maken met elke website moet de browser de volgende stappen doorlopen:<\/p>\n<ul>\n<li><i>DNS-resolutie<\/i>Zoek het IP-adres van de server (<code>216.58.215.78<\/code>) voor de opgegeven domeinnaam (<code>google.com<\/code>).<\/li>\n<li><i>TCP-handshake<\/i>Verzendpakketten (client \u2192 server \u2192 client) om een TCP-verbinding met de server tot stand te brengen.<\/li>\n<li><i>TLS-handshake (alleen voor HTTPS-sites)<\/i>Twee rondes van pakketuitwisseling (client \u2192 server \u2192 client \u2192 server \u2192 client) om een veilige TLS-sessie te initi\u00ebren.<\/li>\n<\/ul>\n<p>\nOpmerking: HTTP\/3 zal het handshake-mechanisme verbeteren en versnellen, maar het is nog niet ver gevorderd.<\/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> verzoekt de browser om de DNS-resolutie voor het domein vooraf uit te voeren, als u binnenkort verbinding wilt maken en de initi\u00eble verbinding wilt versnellen.<\/p>\n<p>De browser moet het IP-adres van het domein bepalen als het bronnen van een nieuw extern domein gaat ophalen. Bijvoorbeeld het laden van lettertypen van Google Fonts, React van een CDN of het opvragen van een JSON-respons van de API-server.<\/p>\n<p>Voor elke nieuwe domein duurt de DNS-recordresolutie meestal ongeveer 20\u2212120 ms. Dit be\u00efnvloedt alleen de laadtijd van de eerste resource van dat domein, maar het blijft een vertraging. Door DNS vooraf te resolveren, besparen we tijd en laden we de resource sneller.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel= \"dns-prefetch\" href=\"https:\/\/api.my-app.com\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> geeft de domeinnaam aan waarvoor het IP-adres moet worden vastgesteld. U kunt het opgeven met een prefix (<code>https:\/\/domain.com<\/code>) of zonder (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Wanneer te gebruiken<\/h3>\n<p>\n<b>Gebruik voor domeinen die binnenkort nodig zijn<\/b> om daar resources te laden waarmee de browser niet vooraf bekend is. Bijvoorbeeld:<\/p>\n<ul>\n<li>Je applicatie wordt gehost op <code>my-app.com<\/code> en doet AJAX-verzoeken naar <code>api.my-app.com<\/code>: je kent de specifieke verzoeken niet van tevoren, omdat deze dynamisch vanuit JS worden gedaan. Hier is het volledig passend om de tag voor voorafgaand verbinden met het domein te gebruiken.\n<\/li>\n<li>Je applicatie wordt gehost op <code>my-app.com<\/code>, en maakt gebruik van lettertypen van Google Fonts. Ze worden in twee stappen geladen: eerst wordt het CSS-bestand van het domein geladen. <code>fonts.googleapis.com<\/code>, daarna vraagt dit bestand de lettertypen op van <code>fonts.gstatic.com<\/code>. Je kunt niet weten welke specifieke lettertypebestanden uit <code>fonts.gstatic.com<\/code> u heeft deze nodig totdat u het CSS-bestand heeft ge\u00fcpload, dus vooraf kunnen we alleen een voorlopige verbinding tot stand brengen.<\/li>\n<\/ul>\n<p>\n<b>Gebruik deze tag om een externe script of stijl iets sneller te laden.<\/b> door het tot stand brengen van een voorlopige verbinding.<\/p>\n<blockquote><p>Let op overeenkomstige kenmerken op <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> en <code>&lt;link rel= \"preconnect\"&gt;<\/code>Het heeft meestal geen zin om ze samen voor \u00e9\u00e9n domein te gebruiken: <code>&lt;link rel= \"preconnect\"&gt;<\/code> al inbegrepen <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> en nog veel meer. Dit kan gerechtvaardigd zijn in twee gevallen:<\/p>\n<ul>\n<li><i>U wilt oude browsers ondersteunen<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> ondersteunt <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">beginnend met IE10 en Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> werd enige tijd ondersteund in Chrome en Firefox, maar werd pas in Safari toegevoegd in 11.1 en <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">wordt nog steeds niet ondersteund in IE\/Edge<\/a><\/noindex>. Als u deze browsers moet ondersteunen, gebruik dan <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> als een alternatieve optie voor <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>U wilt de verbinding met meer dan 4-6 domeinen versnellen<\/i>. Het is niet aanbevolen om de tag <code>&lt;link rel= \"preconnect\"&gt;<\/code> met meer dan 4-6 domeinen te gebruiken, omdat het opzetten en onderhouden van de verbinding een kostbare operatie is. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> verbruikt minder middelen, dus gebruik het indien nodig.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>Details<\/h3>\n<p>\n<b>Een optionele tag<\/b>. De browser is niet verplicht om deze instructie op te volgen, dus deze kan DNS-resolutie negeren, bijvoorbeeld als er veel van zulke tags op de pagina staan of in een andere situatie.<\/p>\n<p><b>Wat is DNS<\/b>. Aan elke server op het internet is een uniek IP-adres gekoppeld, dat eruitziet als <code>216.58.215.78<\/code>. In de adresbalk van de browser wordt meestal de naam van de site ingevoerd (bijvoorbeeld, <code>google.com<\/code>), en DNS-servers (Domain Name System) koppelen deze aan het IP-adres van de server (<code>216.58.215.78<\/code>).<\/p>\n<p>Om het IP-adres te bepalen, moet de browser een verzoek indienen bij de DNS-server. Dit duurt 20-120 ms bij verbinding met een nieuw derden-domein.<\/p>\n<p><b>DNS wordt gecachet, hoewel niet erg betrouwbaar<\/b>. Sommige besturingssystemen en browsers cachen DNS-verzoeken: dit bespaart tijd bij herhaalde verzoeken, maar je kunt niet op caching rekenen. In Linux werkt het meestal helemaal niet. Chrome heeft een DNS-cache, maar deze leeft maar een minuut. Windows cached DNS-antwoorden gedurende vijf dagen.<\/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> vraagt de browser om de URL te laden en deze weer te geven op een onzichttabblad. Wanneer de gebruiker op de link klik, moet de pagina onmiddellijk worden weergegeven. Dit is nuttig als je er zeker van bent dat de gebruiker een bepaalde pagina zal bezoeken en je de weergave ervan wilt versnellen.<\/p>\n<p>Ondanks de uitzonderlijke effectiviteit van deze tag (of daardoor) wordt deze in 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> slecht ondersteund door de meeste browsers. Meer informatie in <noindex><a rel=\"nofollow\" href=\"#1\">below<\/a><\/noindex>.<\/p>\n<h3>Syntax<\/h3>\n<p><\/p>\n<pre><code class=\"xml\">&lt;link rel=\"prerender\" href=\"https:\/\/my-app.com\/pricing\" \/&gt;<\/code><\/pre>\n<p>\n<code>href<\/code> verwijst naar de URL waarvoor u de render in de achtergrond wilt starten.<\/p>\n<h3>Wanneer te gebruiken<\/h3>\n<p>\n<b>Wanneer u er echt zeker van bent dat de gebruiker naar een bepaalde pagina zal gaan<\/b>. Als je een 'tunnel' hebt waarbij 70% van de bezoekers van pagina A naar pagina B gaat, dan <code>&lt;link rel= \"prerender\"&gt;<\/code> kan het op pagina A deweergave van pagina B aanzienlijk versnellen.<\/p>\n<p><b>Misbruik het niet.<\/b>. Vooraf renderen is extreem kostbaar in termen van verkeer en geheugen. Gebruik het niet <code>&lt;link rel= \"prerender\"&gt;<\/code> voor meer dan \u00e9\u00e9n pagina.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>Details<\/h3>\n<p>\n<b>Een optionele tag<\/b>. De browser is niet verplicht deze instructie op te volgen en kan deze negeren, bijvoorbeeld bij een trage verbinding of onvoldoende vrije geheugenruimte.<\/p>\n<p>Om geheugen te besparen <b>voert Chrome geen volledige weergave uit,<\/b>, met behulp van 1 bit, gelijk aan 0, <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">alleen NoState preloading.<\/a><\/noindex>. Dit betekent dat Chrome de pagina en al haar bronnen laadt, maar geen rendering uitvoert en geen JavaScript uitvoert.<\/p>\n<p>Firefox en Safari ondersteunen deze tag helemaal niet. Dit schendt de specificatie niet, aangezien browsers niet verplicht zijn deze instructie op te volgen; het is echter nog steeds jammer. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Een implementatiefout<\/a><\/noindex> in Firefox is al zeven jaar bekend. Er zijn berichten dat Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">deze tag ook niet ondersteunt.<\/a><\/noindex>.<\/p>\n<h1>Samenvatting<\/h1>\n<p>\nGebruik:<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 wanneer je een bron nodig hebt binnen enkele seconden,\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 wanneer je een bron op de volgende pagina nodig hebt,\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 wanneer je weet dat je binnenkort een bron nodig hebt, maar je kent de volledige URL nog niet,\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 soortgelijk, wanneer je weet dat je binnenkort een bron nodig hebt, maar je kent de volledige URL nog niet (voor oudere browsers),\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 wanneer je zeker weet dat gebruikers naar een bepaalde pagina gaan en je de weergave wilt versnellen.<\/li>\n<\/ul>\n<p>Bron: <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\/nl\/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=\"nl_NL\" \/>\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\/nl\/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 en andere tags | ProHoster","description":"Er zijn veel manieren om de webprestaties te verbeteren. Een daarvan is het preloaden van content die later nodig is.","canonical_url":"https:\/\/prohoster.info\/nl\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"nl_NL","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\/nl\/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\/nl\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}