{"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\/fr\/blog\/preload-prefetch-i-drugie-tegi","title":{"rendered":"Preload, prefetch et autres balises","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Oui <noindex><a rel=\"nofollow\" href=\"http:\/\/3perf.com\/talks\/web-perf-101\">De nombreuses fa\u00e7ons d'am\u00e9liorer la performance web.<\/a><\/noindex>L'une d'elles est le pr\u00e9chargement de contenu dont vous aurez besoin plus tard. Pr\u00e9-fetching du CSS, pr\u00e9-rendu d'une page compl\u00e8te ou r\u00e9solution d'un nom de domaine. Nous faisons tout \u00e0 l'avance, puis nous affichons instantan\u00e9ment le r\u00e9sultat ! \u00c7a sonne bien.<\/p>\n<p>Encore mieux, c'est que c'est tr\u00e8s simple \u00e0 mettre en \u0153uvre. Cinq balises  donnent au navigateur l'ordre de proc\u00e9der \u00e0 des actions anticip\u00e9es :<\/p>\n<pre><code class=\"xml\"><\/code><\/pre>\n<p><noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nEn r\u00e9sum\u00e9, voici ce qu'elles font et quand les utiliser.<\/p>\n<p>Passer \u00e0 : <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> indique au navigateur de charger et de mettre en cache la ressource d\u00e8s que possible (comme un script ou une feuille de style). C'est utile lorsque la ressource sera n\u00e9cessaire quelques secondes apr\u00e8s le chargement de la page - et vous souhaitez acc\u00e9l\u00e9rer le processus.<\/p>\n<p>Le navigateur ne fait rien avec la ressource apr\u00e8s le chargement. Les scripts ne s'ex\u00e9cutent pas, les feuilles de style ne s'appliquent pas. La ressource est simplement mise en cache et imm\u00e9diatement fournie sur demande.<\/p>\n<h3>Syntaxe<\/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> indique la ressource que vous souhaitez t\u00e9l\u00e9charger.<\/p>\n<p><code> as<\/code> peut \u00eatre n'importe quoi que vous pouvez t\u00e9l\u00e9charger dans un navigateur :<\/p>\n<ul>\n<li><code>style<\/code> pour les feuilles de style,\n<\/li>\n<li><code>script<\/code> pour les scripts,\n<\/li>\n<li><code>font<\/code> pour les polices,\n<\/li>\n<li><code>fetch<\/code> pour les ressources charg\u00e9es via <code>fetch()<\/code> ou <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>liste compl\u00e8te sur <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nIl est important d'indiquer l'attribut <code>as<\/code> \u2013 cela aide le navigateur \u00e0 \u00e9tablir les priorit\u00e9s et \u00e0 planifier le chargement correctement.<\/p>\n<h3>Quand utiliser<\/h3>\n<p>\nUtilisez le pr\u00e9chargement lorsque la ressource sera n\u00e9cessaire tr\u00e8s prochainement. Par exemple :<\/p>\n<ul>\n<li>Polices personnalis\u00e9es \u00e0 partir d'un fichier externe :\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>\nPar d\u00e9faut <code>comic-sans.woff2<\/code> commencera \u00e0 se charger seulement apr\u00e8s le chargement et l'analyse. <code>index.css<\/code>Pour ne pas attendre si longtemps, vous pouvez charger la police plus t\u00f4t en utilisant <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>Si vous divisez vos styles selon l'approche <noindex><a rel=\"nofollow\" href=\"https:\/\/3perf.com\/talks\/web-perf-101\/#css-block-rendering-1\">Critical CSS<\/a><\/noindex> en deux parties, critiques (pour le rendu imm\u00e9diat) et non critiques :\n<pre><code class=\"xml\">\/* Styles critiques en ligne *\/<\/code><\/pre>\n<p>\nAvec cette approche, les styles non critiques commenceront \u00e0 se charger seulement lors de l'ex\u00e9cution de JavaScript, ce qui pourra se produire quelques secondes apr\u00e8s le rendu. Pour \u00e9viter d'attendre JS, utilisez <code>&lt;link rel= \"preload\"&gt;<\/code>, pour commencer le chargement plus t\u00f4t :<\/p>\n<pre><code class=\"xml\">\/* Styles critiques en ligne *\/<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\n<b>N'abusez pas de la pr\u00e9charge<\/b>. Si vous chargez tout sans distinction, le site ne s'acc\u00e9l\u00e9rera pas magiquement, au contraire, cela g\u00eanera le navigateur dans sa planification efficace.<\/p>\n<p><b> Ne confondez pas avec le pr\u00e9chargement<\/b>. N'utilisez pas <code>&lt;link rel= \"preload\"&gt;<\/code>, si vous n'avez pas besoin de la ressource imm\u00e9diatement apr\u00e8s le chargement de la page. Si elle est n\u00e9cessaire plus tard, par exemple, pour la page suivante, utilisez <code>&lt;link rel= \"prefetch\"&gt;<\/code>.<\/p>\n<h3>D\u00e9tails<\/h3>\n<p>\n<b>C'est une balise obligatoire<\/b> pour l'ex\u00e9cution du navigateur (si elle est prise en charge), contrairement \u00e0 tous les autres liens  li\u00e9s au pr\u00e9chargement. Le navigateur doit t\u00e9l\u00e9charger la ressource indiqu\u00e9e dans <code>&lt;link rel=\"preload\"&gt;<\/code>. Dans d'autres cas, il peut ignorer le pr\u00e9chargement, par exemple, s'il est sur une connexion lente.<\/p>\n<p><b>Priorit\u00e9s<\/b>. Aux diff\u00e9rentes ressources (styles, scripts, polices, etc.), les navigateurs attribuent g\u00e9n\u00e9ralement des priorit\u00e9s diff\u00e9rentes pour charger en premier les ressources les plus importantes. Dans ce cas, le navigateur d\u00e9termine la priorit\u00e9 selon l'attribut <code>as<\/code>. Pour le navigateur Chrome, vous pouvez consulter <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit#\">le tableau complet des priorit\u00e9s<\/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 et autres balises\" 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> demande au navigateur de t\u00e9l\u00e9charger et de mettre en cache la ressource (par exemple, un script ou une feuille de style) en arri\u00e8re-plan. Le t\u00e9l\u00e9chargement se fait avec une faible priorit\u00e9, donc cela n'entrave pas les ressources plus importantes. C'est utile si la ressource sera n\u00e9cessaire sur la prochaine page, et que vous souhaitez la mettre en cache \u00e0 l'avance.<\/p>\n<p>Ici aussi, le navigateur ne fait rien avec la ressource apr\u00e8s le t\u00e9l\u00e9chargement. Les scripts ne s'ex\u00e9cutent pas, les feuilles de style ne sont pas appliqu\u00e9es. La ressource est simplement mise en cache et imm\u00e9diatement disponible sur demande.<\/p>\n<h3>Syntaxe<\/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> indique la ressource que vous souhaitez t\u00e9l\u00e9charger.<\/p>\n<p><code> as<\/code> peut \u00eatre n'importe quoi que vous pouvez t\u00e9l\u00e9charger dans un navigateur :<\/p>\n<ul>\n<li><code>style<\/code> pour les feuilles de style,\n<\/li>\n<li><code>script<\/code> pour les scripts,\n<\/li>\n<li><code>font<\/code> pour les polices,\n<\/li>\n<li><code>fetch<\/code> pour les ressources charg\u00e9es via <code>fetch()<\/code> ou <code>XMLHttpRequest<\/code>,\n<\/li>\n<li>liste compl\u00e8te sur <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">MDN<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nIl est important d'indiquer l'attribut <code>as<\/code>\u00a0\u2014 cela aide le navigateur \u00e0 correctement \u00e9tablir des priorit\u00e9s et \u00e0 planifier le chargement.<\/p>\n<h3>Quand utiliser<\/h3>\n<p>\n<b>Pour charger des ressources d'autres pages<\/b>, si vous avez besoin de la ressource d'une autre page, et que vous souhaitez la pr\u00e9charger pour ensuite acc\u00e9l\u00e9rer le rendu de cette page. Par exemple :<\/p>\n<ul>\n<li>Vous avez un site e-commerce, et 40 % des utilisateurs quittent la page d'accueil pour la page produit. Utilisez <code>&lt;link rel= \"prefetch\"&gt;<\/code>, en chargeant les fichiers CSS et JS pour le rendu des pages avec le produit.\n<\/li>\n<li>Vous avez une application monopage, et diff\u00e9rentes pages chargent diff\u00e9rents paquets. Lorsque l'utilisateur visite une page, il est possible de pr\u00e9charger les paquets pour toutes les pages auxquelles elle fait r\u00e9f\u00e9rence.<\/li>\n<\/ul>\n<p>\n<b>Il est probable que cette balise puisse \u00eatre utilis\u00e9e sans danger en grande quantit\u00e9.<\/b>. Les navigateurs pr\u00e9voient g\u00e9n\u00e9ralement le pr\u00e9chargement avec une priorit\u00e9 minimale, donc cela n'incommode personne. Gardez simplement \u00e0 l'esprit que cela utilise le trafic de l'utilisateur, ce qui peut avoir un co\u00fbt.<\/p>\n<p><b>Pas pour les requ\u00eates urgentes.<\/b>. N'utilisez pas <code>&lt;link rel= \"prefetch\"&gt;<\/code>, lorsque la ressource sera n\u00e9cessaire dans quelques secondes. Dans ce cas, utilisez. <code>&lt;link rel= \"preload\"&gt;<\/code>.<\/p>\n<h3>D\u00e9tails<\/h3>\n<p>\n<b>Balise optionnelle.<\/b>. Le navigateur n'est pas oblig\u00e9 de suivre cette instruction, il peut l'ignorer, par exemple, sur une connexion lente.<\/p>\n<p><b>Priorit\u00e9 dans Chrome.<\/b>. Dans Chrome. <code>&lt;link rel= \"prefetch\"&gt;<\/code> est g\u00e9n\u00e9ralement execut\u00e9 avec une priorit\u00e9 minimale (voir. <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.google.com\/document\/d\/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc\/edit\">le tableau complet des priorit\u00e9s<\/a><\/noindex>), c'est-\u00e0-dire apr\u00e8s le chargement de tout le reste.<\/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> demande au navigateur de se connecter \u00e0 l'avance au domaine, lorsque vous souhaitez acc\u00e9l\u00e9rer l'\u00e9tablissement de la connexion dans le futur.<\/p>\n<p>Le navigateur doit \u00e9tablir une connexion s'il extrait des ressources d'un nouveau domaine tiers. Par exemple, s'il charge des polices Google Fonts, React \u00e0 partir de CDN ou demande une r\u00e9ponse JSON \u00e0 partir du serveur API.<\/p>\n<p>\u00c9tablir une nouvelle connexion prend g\u00e9n\u00e9ralement quelques centaines de millisecondes. Cela ne se produit qu'une seule fois, mais cela prend quand m\u00eame du temps. Si vous avez \u00e9tabli la connexion \u00e0 l'avance, vous \u00e9conomiserez du temps et chargerez plus rapidement les ressources de ce domaine.<\/p>\n<h3>Syntaxe<\/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> indique le nom de domaine pour lequel il faut d\u00e9terminer l'adresse IP. Cela peut \u00eatre sp\u00e9cifi\u00e9 avec un pr\u00e9fixe (<code>https:\/\/domain.com<\/code>) ou sans (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quand utiliser<\/h3>\n<p>\n<b>Utilisez-le pour les domaines qui seront bient\u00f4t n\u00e9cessaires.<\/b> pour charger un style, un script ou une image importants depuis l\u00e0-bas, mais vous ne connaissez pas encore l'URL de la ressource. Par exemple :<\/p>\n<ul>\n<li>Votre application est h\u00e9berg\u00e9e sur <code>my-app.com<\/code> et effectue des requ\u00eates AJAX vers <code>api.my-app.com<\/code>: vous ne connaissez pas \u00e0 l'avance les requ\u00eates sp\u00e9cifiques car elles sont effectu\u00e9es dynamiquement depuis JS. Ici, l'utilisation de la balise pour la pr\u00e9connexion au domaine est tout \u00e0 fait appropri\u00e9e.\n<\/li>\n<li>Votre application est h\u00e9berg\u00e9e sur <code>my-app.com<\/code> et utilise les polices Google Fonts. Elles sont charg\u00e9es en deux \u00e9tapes : d'abord, le fichier CSS est charg\u00e9 depuis le domaine <code>fonts.googleapis.com<\/code>, puis ce fichier demande les polices depuis <code>fonts.gstatic.com<\/code>. Vous ne pouvez pas savoir quels fichiers de polices sp\u00e9cifiques proviennent de <code>fonts.gstatic.com<\/code> vous aurez besoin d'\u00e9tablir une connexion pr\u00e9alable avant de charger le fichier CSS, donc nous pouvons seulement \u00e9tablir une connexion pr\u00e9liminaire \u00e0 l'avance.<\/li>\n<\/ul>\n<p>\n<b>Utilisez cette balise pour acc\u00e9l\u00e9rer l\u00e9g\u00e8rement un script ou un style tiers.<\/b> gr\u00e2ce \u00e0 l'\u00e9tablissement pr\u00e9alable de la connexion.<\/p>\n<p><b>Ne pas abuser de<\/b>. \u00c9tablir et maintenir une connexion est une op\u00e9ration co\u00fbteuse tant pour le client que pour le serveur. Utilisez cette balise au maximum pour 4 \u00e0 6 domaines.<\/p>\n<h3>D\u00e9tails<\/h3>\n<p>\n<b>Balise optionnelle.<\/b>. Le navigateur n'est pas oblig\u00e9 de suivre cette instruction et peut l'ignorer, par exemple, s'il a d\u00e9j\u00e0 \u00e9tabli de nombreuses connexions ou dans d'autres cas.<\/p>\n<p><b>Ce que comprend le processus de connexion<\/b>. Pour se connecter \u00e0 chaque site, le navigateur doit effectuer les actions suivantes :<\/p>\n<ul>\n<li><i>R\u00e9solution DNS<\/i>. Trouver l'adresse IP du serveur (<code>216.58.215.78<\/code>) pour le nom de domaine sp\u00e9cifi\u00e9 (<code>google.com<\/code>).<\/li>\n<li><i>Handshake TCP<\/i>. \u00c9change de paquets (client \u2192 serveur \u2192 client) pour initier une connexion TCP avec le serveur.<\/li>\n<li><i>Handshake TLS (uniquement pour les sites HTTPS)<\/i>. Deux tours d'\u00e9change de paquets (client \u2192 serveur \u2192 client \u2192 serveur \u2192 client) pour initier une session s\u00e9curis\u00e9e TLS.<\/li>\n<\/ul>\n<p>\nRemarque : HTTP\/3 am\u00e9liorera et acc\u00e9l\u00e9rera le m\u00e9canisme de handshake, mais il est encore loin.<\/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> demande au navigateur de r\u00e9soudre \u00e0 l'avance le DNS pour le domaine si vous allez vous y connecter prochainement et que vous souhaitez acc\u00e9l\u00e9rer la connexion initiale.<\/p>\n<p>Le navigateur doit d\u00e9terminer l'adresse IP du domaine s'il extrait des ressources d'un nouveau domaine tiers. Par exemple, t\u00e9l\u00e9charger des polices Google Fonts, React \u00e0 partir d'un CDN ou demander une r\u00e9ponse JSON d'un serveur API.<\/p>\n<p>Pour chaque nouveau domaine, la r\u00e9solution d'enregistrement DNS prend g\u00e9n\u00e9ralement environ 20 \u00e0 120 ms. Cela n'affecte que le chargement de la premi\u00e8re ressource de ce domaine, mais repr\u00e9sente tout de m\u00eame un d\u00e9lai. Si nous effectuons la r\u00e9solution DNS \u00e0 l'avance, nous \u00e9conomiserons du temps et chargerons la ressource plus rapidement.<\/p>\n<h3>Syntaxe<\/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> indique le nom de domaine pour lequel l'adresse IP doit \u00eatre \u00e9tablie. On peut indiquer avec le pr\u00e9fixe (<code>https:\/\/domain.com<\/code>) ou sans (<code>\/\/domain.com<\/code>).<\/p>\n<h3>Quand utiliser<\/h3>\n<p>\n<b>Utilisez-le pour les domaines qui seront bient\u00f4t n\u00e9cessaires.<\/b> pour charger des ressources \u00e0 partir de l\u00e0 que le navigateur ne conna\u00eet pas \u00e0 l'avance. Par exemple :<\/p>\n<ul>\n<li>Votre application est h\u00e9berg\u00e9e sur <code>my-app.com<\/code> et effectue des requ\u00eates AJAX vers <code>api.my-app.com<\/code>: vous ne connaissez pas \u00e0 l'avance les requ\u00eates sp\u00e9cifiques car elles sont effectu\u00e9es dynamiquement depuis JS. Ici, l'utilisation de la balise pour la pr\u00e9connexion au domaine est tout \u00e0 fait appropri\u00e9e.\n<\/li>\n<li>Votre application est h\u00e9berg\u00e9e sur <code>my-app.com<\/code>, et utilise les polices Google Fonts. Elles sont charg\u00e9es en deux \u00e9tapes : d'abord le fichier CSS est charg\u00e9 \u00e0 partir du domaine <code>fonts.googleapis.com<\/code>, puis ce fichier demande les polices depuis <code>fonts.gstatic.com<\/code>. Vous ne pouvez pas savoir quels fichiers de polices sp\u00e9cifiques proviennent de <code>fonts.gstatic.com<\/code> vous aurez besoin d'\u00e9tablir une connexion pr\u00e9alable avant de charger le fichier CSS, donc nous pouvons seulement \u00e9tablir une connexion pr\u00e9liminaire \u00e0 l'avance.<\/li>\n<\/ul>\n<p>\n<b>Utilisez cette balise pour acc\u00e9l\u00e9rer l\u00e9g\u00e8rement un script ou un style tiers.<\/b> gr\u00e2ce \u00e0 l'\u00e9tablissement pr\u00e9alable de la connexion.<\/p>\n<blockquote><p>Notez les caract\u00e9ristiques similaires sur <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> et <code>&lt;link rel= \"preconnect\"&gt;<\/code>. Utiliser ces \u00e9l\u00e9ments ensemble pour un m\u00eame domaine n'a g\u00e9n\u00e9ralement pas de sens : <code>&lt;link rel= \"preconnect\"&gt;<\/code> inclut d\u00e9j\u00e0 <code>&lt;link rel= \"dns-prefetch\"\/&gt;<\/code> et bien d'autres. Cela peut \u00eatre justifi\u00e9 dans deux cas :<\/p>\n<ul>\n<li><i>Vous souhaitez prendre en charge les anciens navigateurs<\/i>. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> est pris en charge <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-dns-prefetch\">\u00e0 partir d'IE10 et de Safari 5<\/a><\/noindex>. <code>&lt;link rel= \"preconnect\"&gt;<\/code> a \u00e9t\u00e9 support\u00e9 pendant un certain temps dans Chrome et Firefox, mais n'a \u00e9t\u00e9 ajout\u00e9 dans Safari qu'\u00e0 partir de 11.1 et <noindex><a rel=\"nofollow\" href=\"https:\/\/caniuse.com\/#feat=link-rel-preconnect\">n'est toujours pas support\u00e9 dans IE\/Edge<\/a><\/noindex>. Si vous devez prendre en charge ces navigateurs, utilisez <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> comme alternative pour <code>&lt;link rel= \"preconnect\"&gt;<\/code>.<\/li>\n<li><i>Vous souhaitez acc\u00e9l\u00e9rer la connexion \u00e0 plus de 4 \u00e0 6 domaines<\/i>. La balise <code>&lt;link rel= \"preconnect\"&gt;<\/code> n'est pas recommand\u00e9e pour plus de 4 \u00e0 6 domaines, car l'\u00e9tablissement et la maintenance de la connexion sont des op\u00e9rations co\u00fbteuses. <code>&lt;link rel= \"dns-prefetch\" \/&gt;<\/code> consomme moins de ressources, donc en cas de besoin, utilisez-le.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/p>\n<h3>D\u00e9tails<\/h3>\n<p>\n<b>Balise optionnelle.<\/b>. Le navigateur n'est pas oblig\u00e9 de suivre cette instruction, il peut donc ne pas effectuer la r\u00e9solution DNS, par exemple s'il y a trop de balises de ce type sur la page ou dans d'autres cas.<\/p>\n<p><b>Qu'est-ce que le DNS<\/b>. Chaque serveur sur Internet a une adresse IP unique qui ressemble \u00e0 <code>216.58.215.78<\/code>. Dans la barre d'adresse du navigateur, le nom du site est g\u00e9n\u00e9ralement saisi (par exemple, <code>google.com<\/code>), et les serveurs DNS (Domain Name System) l'associent \u00e0 l'adresse IP du serveur (<code>216.58.215.78<\/code>).<\/p>\n<p>Pour d\u00e9terminer l'adresse IP, le navigateur doit effectuer une requ\u00eate au serveur DNS. Cela prend 20 \u00e0 120 ms lors de la connexion \u00e0 un nouveau domaine externe.<\/p>\n<p><b>Le DNS est mis en cache, m\u00eame si ce n'est pas tr\u00e8s fiable<\/b>. Certains syst\u00e8mes d'exploitation et navigateurs mettent en cache les requ\u00eates DNS : cela fait gagner du temps lors des requ\u00eates r\u00e9it\u00e9r\u00e9es, mais on ne peut pas compter sur le cache. Sous Linux, cela ne fonctionne g\u00e9n\u00e9ralement pas du tout. Chrome a un cache DNS, mais il ne dure qu'une minute. Windows met en cache les r\u00e9ponses DNS pendant cinq jours.<\/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> demande au navigateur de charger l'URL et de l'afficher dans un onglet invisible. Lorsque l'utilisateur clique sur le lien, la page doit s'afficher imm\u00e9diatement. C'est utile si vous \u00eates s\u00fbr que l'utilisateur visitera une certaine page et que vous souhaitez acc\u00e9l\u00e9rer son affichage.<\/p>\n<p>Malgr\u00e9 l'efficacit\u00e9 exceptionnelle de cette balise (ou \u00e0 cause de celle-ci), en 2019 <code>&lt;link rel= \"prerender\"&gt;<\/code> est mal support\u00e9e par les navigateurs principaux. Pour plus de d\u00e9tails, voir <noindex><a rel=\"nofollow\" href=\"#1\">ci-dessous<\/a><\/noindex>.<\/p>\n<h3>Syntaxe<\/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> indique l'URL pour laquelle vous souhaitez lancer le rendu en arri\u00e8re-plan.<\/p>\n<h3>Quand utiliser<\/h3>\n<p>\n<b>Lorsque vous \u00eates vraiment s\u00fbr que l'utilisateur se rendra sur une certaine page<\/b>. Si vous avez un \u00ab tunnel \u00bb o\u00f9 70 % des visiteurs de la page A passent \u00e0 la page B, alors <code>&lt;link rel= \"prerender\"&gt;<\/code> la page A affichera tr\u00e8s rapidement la page B.<\/p>\n<p><b>Ne pas abuser de<\/b>. Le rendu pr\u00e9liminaire est extr\u00eamement co\u00fbteux en termes de trafic et de m\u00e9moire. Ne l'utilisez pas <code>&lt;link rel= \"prerender\"&gt;<\/code> pour plus d'une seule page.<\/p>\n<p><noindex><a rel=\"nofollow\" name=\"1\"><\/a><\/noindex><\/p>\n<h3>D\u00e9tails<\/h3>\n<p>\n<b>Balise optionnelle.<\/b>. Le navigateur n'est pas oblig\u00e9 de suivre cette instruction et peut l'ignorer, par exemple, sur une connexion lente ou en cas de faible m\u00e9moire disponible.<\/p>\n<p>Pour \u00e9conomiser de la m\u00e9moire, <b>Chrome ne r\u00e9alise pas un rendu complet<\/b>, et <noindex><a rel=\"nofollow\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/07\/nostate-prefetch\">mais seulement un pr\u00e9chargement NoState.<\/a><\/noindex>. Cela signifie que Chrome charge la page et toutes ses ressources, mais ne fait pas de rendu et n'ex\u00e9cute pas JavaScript.<\/p>\n<p>Firefox et Safari ne prennent pas du tout en charge cette balise. Cela ne viole pas la sp\u00e9cification, car les navigateurs ne sont pas tenus de suivre cette instruction ; mais c'est tout de m\u00eame dommage. <noindex><a rel=\"nofollow\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=730101\">Un bug de mise en \u0153uvre<\/a><\/noindex> dans Firefox a \u00e9t\u00e9 d\u00e9couvert pendant sept ans. Des rapports indiquent que Safari <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/bluesmoon\/status\/1108412360828563456\">ne prend \u00e9galement pas en charge cette balise.<\/a><\/noindex>.<\/p>\n<h1>R\u00e9sum\u00e9<\/h1>\n<p>\nUtilisez :<\/p>\n<ul>\n<li><code>&lt;link rel= \"preload\"&gt;<\/code>\u00a0\u2014 lorsque vous aurez besoin d'une ressource dans quelques secondes\n<\/li>\n<li><code>&lt;link rel= \"prefetch\"&gt;<\/code>\u00a0\u2014 lorsque vous aurez besoin d'une ressource sur la page suivante\n<\/li>\n<li><code>&lt;link rel= \"preconnect\"&gt;<\/code>\u00a0\u2014 lorsque vous savez que vous aurez bient\u00f4t besoin d'une ressource, mais que vous ne connaissez pas encore son URL compl\u00e8te\n<\/li>\n<li><code>&lt;link rel= \"dns-prefetch\"&gt;<\/code>\u00a0\u2014 de m\u00eame, lorsque vous savez que vous aurez bient\u00f4t besoin d'une ressource, mais que vous ne connaissez pas encore son URL compl\u00e8te (pour les anciens navigateurs)\n<\/li>\n<li><code>&lt;link rel= \"prerender\"&gt;<\/code>\u00a0\u2014 lorsque vous \u00eates s\u00fbr que les utilisateurs vont se rendre sur une certaine page et que vous souhaitez acc\u00e9l\u00e9rer son affichage.<\/li>\n<\/ul>\n<p>Source : <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.2 - 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\/fr\/blog\/preload-prefetch-i-drugie-tegi\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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\udd47Pr\u00e9charge, pr\u00e9-r\u00e9cup\u00e9ration et autres balises | ProHoster","description":"Il existe de nombreuses fa\u00e7ons d\u2019am\u00e9liorer la performance web. L'une d'elles est le pr\u00e9chargement de contenu dont vous aurez besoin plus tard.","canonical_url":"https:\/\/prohoster.info\/fr\/blog\/preload-prefetch-i-drugie-tegi","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"fr_FR","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\/fr\/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\/fr\/wp-json\/wp\/v2\/posts\/30281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/comments?post=30281"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/30281\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media?parent=30281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/categories?post=30281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/tags?post=30281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}