Oui De nombreuses façons d'améliorer la performance web.L'une d'elles est le préchargement de contenu dont vous aurez besoin plus tard. Pré-fetching du CSS, pré-rendu d'une page complète ou résolution d'un nom de domaine. Nous faisons tout à l'avance, puis nous affichons instantanément le résultat ! Ça sonne bien.

Encore mieux, c'est que c'est très simple à mettre en œuvre. Cinq balises donnent au navigateur l'ordre de procéder à des actions anticipées :

En résumé, voici ce qu'elles font et quand les utiliser.

Passer à : preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> indique au navigateur de charger et de mettre en cache la ressource dès que possible (comme un script ou une feuille de style). C'est utile lorsque la ressource sera nécessaire quelques secondes après le chargement de la page - et vous souhaitez accélérer le processus.

Le navigateur ne fait rien avec la ressource après le chargement. Les scripts ne s'exécutent pas, les feuilles de style ne s'appliquent pas. La ressource est simplement mise en cache et immédiatement fournie sur demande.

Syntaxe

<link rel="preload" href="/style.css" as="style" />

href indique la ressource que vous souhaitez télécharger.

as peut être n'importe quoi que vous pouvez télécharger dans un navigateur :

• style pour les feuilles de style,
• script pour les scripts,
• font pour les polices,
• fetch pour les ressources chargées via fetch() ou XMLHttpRequest,
• liste complète sur MDN.

Il est important d'indiquer l'attribut as – cela aide le navigateur à établir les priorités et à planifier le chargement correctement.

Quand utiliser

Utilisez le préchargement lorsque la ressource sera nécessaire très prochainement. Par exemple :

• Polices personnalisées à partir d'un fichier externe :

  
  
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  Par défaut comic-sans.woff2 commencera à se charger seulement après le chargement et l'analyse. index.cssPour ne pas attendre si longtemps, vous pouvez charger la police plus tôt en utilisant <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• Si vous divisez vos styles selon l'approche Critical CSS en deux parties, critiques (pour le rendu immédiat) et non critiques :

  /* Styles critiques en ligne */

  Avec cette approche, les styles non critiques commenceront à se charger seulement lors de l'exécution de JavaScript, ce qui pourra se produire quelques secondes après le rendu. Pour éviter d'attendre JS, utilisez <link rel= "preload">, pour commencer le chargement plus tôt :

  /* Styles critiques en ligne */

N'abusez pas de la précharge. Si vous chargez tout sans distinction, le site ne s'accélérera pas magiquement, au contraire, cela gênera le navigateur dans sa planification efficace.

Ne confondez pas avec le préchargement. N'utilisez pas <link rel= "preload">, si vous n'avez pas besoin de la ressource immédiatement après le chargement de la page. Si elle est nécessaire plus tard, par exemple, pour la page suivante, utilisez <link rel= "prefetch">.

Détails

C'est une balise obligatoire pour l'exécution du navigateur (si elle est prise en charge), contrairement à tous les autres liens liés au préchargement. Le navigateur doit télécharger la ressource indiquée dans <link rel="preload">. Dans d'autres cas, il peut ignorer le préchargement, par exemple, s'il est sur une connexion lente.

Priorités. Aux différentes ressources (styles, scripts, polices, etc.), les navigateurs attribuent généralement des priorités différentes pour charger en premier les ressources les plus importantes. Dans ce cas, le navigateur détermine la priorité selon l'attribut as. Pour le navigateur Chrome, vous pouvez consulter le tableau complet des priorités.

prefetch

<link rel= "prefetch"> demande au navigateur de télécharger et de mettre en cache la ressource (par exemple, un script ou une feuille de style) en arrière-plan. Le téléchargement se fait avec une faible priorité, donc cela n'entrave pas les ressources plus importantes. C'est utile si la ressource sera nécessaire sur la prochaine page, et que vous souhaitez la mettre en cache à l'avance.

Ici aussi, le navigateur ne fait rien avec la ressource après le téléchargement. Les scripts ne s'exécutent pas, les feuilles de style ne sont pas appliquées. La ressource est simplement mise en cache et immédiatement disponible sur demande.

Syntaxe

<link rel="prefetch" href="/style.css" as="style" />

href indique la ressource que vous souhaitez télécharger.

as peut être n'importe quoi que vous pouvez télécharger dans un navigateur :

• style pour les feuilles de style,
• script pour les scripts,
• font pour les polices,
• fetch pour les ressources chargées via fetch() ou XMLHttpRequest,
• liste complète sur MDN.

Il est important d'indiquer l'attribut as — cela aide le navigateur à correctement établir des priorités et à planifier le chargement.

Quand utiliser

Pour charger des ressources d'autres pages, si vous avez besoin de la ressource d'une autre page, et que vous souhaitez la précharger pour ensuite accélérer le rendu de cette page. Par exemple :

• Vous avez un site e-commerce, et 40 % des utilisateurs quittent la page d'accueil pour la page produit. Utilisez <link rel= "prefetch">, en chargeant les fichiers CSS et JS pour le rendu des pages avec le produit.
• Vous avez une application monopage, et différentes pages chargent différents paquets. Lorsque l'utilisateur visite une page, il est possible de précharger les paquets pour toutes les pages auxquelles elle fait référence.

Il est probable que cette balise puisse être utilisée sans danger en grande quantité.. Les navigateurs prévoient généralement le préchargement avec une priorité minimale, donc cela n'incommode personne. Gardez simplement à l'esprit que cela utilise le trafic de l'utilisateur, ce qui peut avoir un coût.

Pas pour les requêtes urgentes.. N'utilisez pas <link rel= "prefetch">, lorsque la ressource sera nécessaire dans quelques secondes. Dans ce cas, utilisez. <link rel= "preload">.

Détails

Balise optionnelle.. Le navigateur n'est pas obligé de suivre cette instruction, il peut l'ignorer, par exemple, sur une connexion lente.

Priorité dans Chrome.. Dans Chrome. <link rel= "prefetch"> est généralement executé avec une priorité minimale (voir. le tableau complet des priorités), c'est-à-dire après le chargement de tout le reste.

preconnect

<link rel= "preconnect"> demande au navigateur de se connecter à l'avance au domaine, lorsque vous souhaitez accélérer l'établissement de la connexion dans le futur.

Le navigateur doit établir une connexion s'il extrait des ressources d'un nouveau domaine tiers. Par exemple, s'il charge des polices Google Fonts, React à partir de CDN ou demande une réponse JSON à partir du serveur API.

Établir une nouvelle connexion prend généralement quelques centaines de millisecondes. Cela ne se produit qu'une seule fois, mais cela prend quand même du temps. Si vous avez établi la connexion à l'avance, vous économiserez du temps et chargerez plus rapidement les ressources de ce domaine.

Syntaxe

<link rel= "preconnect" href="https://api.my-app.com" />

href indique le nom de domaine pour lequel il faut déterminer l'adresse IP. Cela peut être spécifié avec un préfixe (https://domain.com) ou sans (//domain.com).

Quand utiliser

Utilisez-le pour les domaines qui seront bientôt nécessaires. pour charger un style, un script ou une image importants depuis là-bas, mais vous ne connaissez pas encore l'URL de la ressource. Par exemple :

• Votre application est hébergée sur my-app.com et effectue des requêtes AJAX vers api.my-app.com: vous ne connaissez pas à l'avance les requêtes spécifiques car elles sont effectuées dynamiquement depuis JS. Ici, l'utilisation de la balise pour la préconnexion au domaine est tout à fait appropriée.
• Votre application est hébergée sur my-app.com et utilise les polices Google Fonts. Elles sont chargées en deux étapes : d'abord, le fichier CSS est chargé depuis le domaine fonts.googleapis.com, puis ce fichier demande les polices depuis fonts.gstatic.com. Vous ne pouvez pas savoir quels fichiers de polices spécifiques proviennent de fonts.gstatic.com vous aurez besoin d'établir une connexion préalable avant de charger le fichier CSS, donc nous pouvons seulement établir une connexion préliminaire à l'avance.

Utilisez cette balise pour accélérer légèrement un script ou un style tiers. grâce à l'établissement préalable de la connexion.

Ne pas abuser de. Établir et maintenir une connexion est une opération coûteuse tant pour le client que pour le serveur. Utilisez cette balise au maximum pour 4 à 6 domaines.

Détails

Balise optionnelle.. Le navigateur n'est pas obligé de suivre cette instruction et peut l'ignorer, par exemple, s'il a déjà établi de nombreuses connexions ou dans d'autres cas.

Ce que comprend le processus de connexion. Pour se connecter à chaque site, le navigateur doit effectuer les actions suivantes :

• Résolution DNS. Trouver l'adresse IP du serveur (216.58.215.78) pour le nom de domaine spécifié (google.com).
• Handshake TCP. Échange de paquets (client → serveur → client) pour initier une connexion TCP avec le serveur.
• Handshake TLS (uniquement pour les sites HTTPS). Deux tours d'échange de paquets (client → serveur → client → serveur → client) pour initier une session sécurisée TLS.

Remarque : HTTP/3 améliorera et accélérera le mécanisme de handshake, mais il est encore loin.

dns-prefetch

<link rel= "dns-prefetch"> demande au navigateur de résoudre à l'avance le DNS pour le domaine si vous allez vous y connecter prochainement et que vous souhaitez accélérer la connexion initiale.

Le navigateur doit déterminer l'adresse IP du domaine s'il extrait des ressources d'un nouveau domaine tiers. Par exemple, télécharger des polices Google Fonts, React à partir d'un CDN ou demander une réponse JSON d'un serveur API.

Pour chaque nouveau domaine, la résolution d'enregistrement DNS prend généralement environ 20 à 120 ms. Cela n'affecte que le chargement de la première ressource de ce domaine, mais représente tout de même un délai. Si nous effectuons la résolution DNS à l'avance, nous économiserons du temps et chargerons la ressource plus rapidement.

Syntaxe

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indique le nom de domaine pour lequel l'adresse IP doit être établie. On peut indiquer avec le préfixe (https://domain.com) ou sans (//domain.com).

Quand utiliser

Utilisez-le pour les domaines qui seront bientôt nécessaires. pour charger des ressources à partir de là que le navigateur ne connaît pas à l'avance. Par exemple :

• Votre application est hébergée sur my-app.com et effectue des requêtes AJAX vers api.my-app.com: vous ne connaissez pas à l'avance les requêtes spécifiques car elles sont effectuées dynamiquement depuis JS. Ici, l'utilisation de la balise pour la préconnexion au domaine est tout à fait appropriée.
• Votre application est hébergée sur my-app.com, et utilise les polices Google Fonts. Elles sont chargées en deux étapes : d'abord le fichier CSS est chargé à partir du domaine fonts.googleapis.com, puis ce fichier demande les polices depuis fonts.gstatic.com. Vous ne pouvez pas savoir quels fichiers de polices spécifiques proviennent de fonts.gstatic.com vous aurez besoin d'établir une connexion préalable avant de charger le fichier CSS, donc nous pouvons seulement établir une connexion préliminaire à l'avance.

Utilisez cette balise pour accélérer légèrement un script ou un style tiers. grâce à l'établissement préalable de la connexion.

Notez les caractéristiques similaires sur <link rel= "dns-prefetch"/> et <link rel= "preconnect">. Utiliser ces éléments ensemble pour un même domaine n'a généralement pas de sens : <link rel= "preconnect"> inclut déjà <link rel= "dns-prefetch"/> et bien d'autres. Cela peut être justifié dans deux cas :

• Vous souhaitez prendre en charge les anciens navigateurs. <link rel= "dns-prefetch" /> est pris en charge à partir d'IE10 et de Safari 5. <link rel= "preconnect"> a été supporté pendant un certain temps dans Chrome et Firefox, mais n'a été ajouté dans Safari qu'à partir de 11.1 et n'est toujours pas supporté dans IE/Edge. Si vous devez prendre en charge ces navigateurs, utilisez <link rel= "dns-prefetch" /> comme alternative pour <link rel= "preconnect">.
• Vous souhaitez accélérer la connexion à plus de 4 à 6 domaines. La balise <link rel= "preconnect"> n'est pas recommandée pour plus de 4 à 6 domaines, car l'établissement et la maintenance de la connexion sont des opérations coûteuses. <link rel= "dns-prefetch" /> consomme moins de ressources, donc en cas de besoin, utilisez-le.

Détails

Balise optionnelle.. Le navigateur n'est pas obligé de suivre cette instruction, il peut donc ne pas effectuer la résolution DNS, par exemple s'il y a trop de balises de ce type sur la page ou dans d'autres cas.

Qu'est-ce que le DNS. Chaque serveur sur Internet a une adresse IP unique qui ressemble à 216.58.215.78. Dans la barre d'adresse du navigateur, le nom du site est généralement saisi (par exemple, google.com), et les serveurs DNS (Domain Name System) l'associent à l'adresse IP du serveur (216.58.215.78).

Pour déterminer l'adresse IP, le navigateur doit effectuer une requête au serveur DNS. Cela prend 20 à 120 ms lors de la connexion à un nouveau domaine externe.

Le DNS est mis en cache, même si ce n'est pas très fiable. Certains systèmes d'exploitation et navigateurs mettent en cache les requêtes DNS : cela fait gagner du temps lors des requêtes réitérées, mais on ne peut pas compter sur le cache. Sous Linux, cela ne fonctionne généralement pas du tout. Chrome a un cache DNS, mais il ne dure qu'une minute. Windows met en cache les réponses DNS pendant cinq jours.

prerender

<link rel= "prerender"> 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édiatement. C'est utile si vous êtes sûr que l'utilisateur visitera une certaine page et que vous souhaitez accélérer son affichage.

Malgré l'efficacité exceptionnelle de cette balise (ou à cause de celle-ci), en 2019 <link rel= "prerender"> est mal supportée par les navigateurs principaux. Pour plus de détails, voir ci-dessous.

Syntaxe

<link rel="prerender" href="https://my-app.com/pricing" />

href indique l'URL pour laquelle vous souhaitez lancer le rendu en arrière-plan.

Quand utiliser

Lorsque vous êtes vraiment sûr que l'utilisateur se rendra sur une certaine page. Si vous avez un « tunnel » où 70 % des visiteurs de la page A passent à la page B, alors <link rel= "prerender"> la page A affichera très rapidement la page B.

Ne pas abuser de. Le rendu préliminaire est extrêmement coûteux en termes de trafic et de mémoire. Ne l'utilisez pas <link rel= "prerender"> pour plus d'une seule page.

Détails

Balise optionnelle.. Le navigateur n'est pas obligé de suivre cette instruction et peut l'ignorer, par exemple, sur une connexion lente ou en cas de faible mémoire disponible.

Pour économiser de la mémoire, Chrome ne réalise pas un rendu complet, et mais seulement un préchargement NoState.. Cela signifie que Chrome charge la page et toutes ses ressources, mais ne fait pas de rendu et n'exécute pas JavaScript.

Firefox et Safari ne prennent pas du tout en charge cette balise. Cela ne viole pas la spécification, car les navigateurs ne sont pas tenus de suivre cette instruction ; mais c'est tout de même dommage. Un bug de mise en œuvre dans Firefox a été découvert pendant sept ans. Des rapports indiquent que Safari ne prend également pas en charge cette balise..

Résumé

Utilisez :

• <link rel= "preload"> — lorsque vous aurez besoin d'une ressource dans quelques secondes
• <link rel= "prefetch"> — lorsque vous aurez besoin d'une ressource sur la page suivante
• <link rel= "preconnect"> — lorsque vous savez que vous aurez bientôt besoin d'une ressource, mais que vous ne connaissez pas encore son URL complète
• <link rel= "dns-prefetch"> — de même, lorsque vous savez que vous aurez bientôt besoin d'une ressource, mais que vous ne connaissez pas encore son URL complète (pour les anciens navigateurs)
• <link rel= "prerender"> — lorsque vous êtes sûr que les utilisateurs vont se rendre sur une certaine page et que vous souhaitez accélérer son affichage.

Source : habr.com