ProHoster > Blog > administration > Préchargement, prélecture et autres balises

Préchargement, prélecture et autres balises

Il est de nombreuses façons d'améliorer les performances Web. L’un d’eux consiste à précharger le contenu qui sera nécessaire plus tard. Prétraitement CSS, pré-rendu pleine page ou résolution de nom de domaine. Nous faisons tout à l'avance, puis affichons instantanément le résultat ! Cela paraît bien.

Ce qui est encore plus cool, c’est que c’est très simple à mettre en œuvre. Cinq balises donnez au navigateur une commande pour effectuer des actions préliminaires :

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

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Expliquons brièvement ce qu'ils font et quand les utiliser.

Sauter à: pré-charge · prélecture · préconnexion · DNS-prélecture · pré-rendu

pré-charge

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

Le navigateur ne fait rien avec la ressource après le chargement. Les scripts ne sont pas exécutés, les feuilles de style ne sont pas appliquées. La ressource est simplement mise en cache et immédiatement mise à disposition sur demande.

syntaxe

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

href pointe vers la ressource que vous souhaitez télécharger.

as peut être tout ce qui peut être téléchargé dans le navigateur :

  • style pour les feuilles de style,
  • script pour les scripts,
  • font pour les polices,
  • fetch pour les ressources chargées à l'aide de fetch() ou XMLHttpRequest,
  • voir la liste complète sur MDN.

Il est important de préciser l'attribut as – cela aide le navigateur à hiérarchiser et planifier correctement les téléchargements.

Quand utiliser

Utilisez le préchargement lorsque la ressource est nécessaire dans un avenir très proche. Par exemple:

  • Polices non standard provenant d'un fichier externe : 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

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

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Si vous séparez vos styles selon l'approche CSS critique en deux parties, critique (pour un rendu immédiat) et non critique : 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Avec cette approche, les styles non critiques ne commenceront à se charger que lorsque JavaScript sera exécuté, ce qui peut se produire quelques secondes après le rendu. Au lieu d'attendre, utilisez JS <link rel= "preload">pour commencer le téléchargement plus tôt :

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/fr/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

N'abusez pas du préchargement. Si vous chargez tout d'affilée, le site n'accélérera pas comme par magie, au contraire, cela empêchera le navigateur de planifier correctement son travail.

A ne pas confondre avec la prélecture. Ne pas utiliser <link rel= "preload">, si vous n'avez pas besoin de la ressource immédiatement après le chargement de la page. Si vous en avez besoin plus tard, par exemple pour la page suivante, utilisez <link rel= "prefetch">.

détails

Ceci est une balise obligatoire à exécuter par le navigateur (s'il le supporte), contrairement à toutes les autres balises liés au préchargement. Le navigateur doit télécharger la ressource spécifiée dans <link rel="preload">. Dans d'autres cas, il peut ignorer le préchargement, par exemple s'il fonctionne sur une connexion lente.

Les priorités. Les navigateurs attribuent généralement différentes priorités aux différentes ressources (styles, scripts, polices, etc.) afin de charger en premier les ressources les plus importantes. Dans ce cas, le navigateur détermine la priorité par attribut as. Pour le navigateur Chrome, vous pouvez consulter tableau de priorité complet.

Préchargement, prélecture et autres balises

prélecture

<link rel= "prefetch"> demande au navigateur de télécharger et de mettre en cache une ressource (telle qu'un script ou une feuille de style) en arrière-plan. Le chargement s'effectue avec une faible priorité afin de ne pas interférer avec des ressources plus importantes. Ceci est utile si la ressource est nécessaire sur la page suivante et que vous souhaitez la mettre en cache à l'avance.

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

syntaxe

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

href pointe vers la ressource que vous souhaitez télécharger.

as peut être tout ce qui peut être téléchargé dans le navigateur :

  • style pour les feuilles de style,
  • script pour les scripts,
  • font pour les polices,
  • fetch pour les ressources chargées à l'aide de fetch() ou XMLHttpRequest,
  • voir la liste complète sur MDN.

Il est important de préciser l'attribut as - cela aide le navigateur à prioriser et planifier correctement les téléchargements.

Quand utiliser

Pour charger des ressources à partir d'autres pages, si vous avez besoin d'une 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 possédez une boutique en ligne, et 40 % des utilisateurs quittent la page d’accueil pour la page produit. Utiliser <link rel= "prefetch">, en chargeant les fichiers CSS et JS pour afficher les pages de produits.
  • Vous disposez d'une application d'une seule page et différentes pages chargent différents packages. Lorsqu'un utilisateur visite une page, les packages de toutes les pages vers lesquelles il renvoie peuvent être préchargés.

Il est probable que cette balise puisse être utilisée en toute sécurité dans n’importe quelle mesure.. Les navigateurs planifient généralement la prélecture avec la priorité la plus basse, cela ne dérange donc personne. Gardez simplement à l’esprit que cela consomme du trafic utilisateur, ce qui peut coûter de l’argent.

Pas pour les demandes urgentes. Ne pas utiliser <link rel= "prefetch">, lorsque la ressource est nécessaire en quelques secondes. Dans ce cas, utilisez <link rel= "preload">.

détails

Balise facultative. 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"> généralement exécuté avec une priorité minimale (voir tableau de priorité complet), c'est-à-dire après avoir chargé tout le reste.

préconnexion

<link rel= "preconnect"> demande au navigateur de se connecter au domaine à l'avance lorsque vous souhaitez accélérer la configuration de la connexion à l'avenir.

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

L'établissement d'une nouvelle connexion prend généralement quelques centaines de millisecondes. Cela se fait une fois, mais cela prend quand même du temps. Si vous avez établi une connexion à l'avance, vous gagnerez du temps et téléchargerez plus rapidement les ressources de ce domaine.

syntaxe

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

href indique le nom de domaine dont vous souhaitez déterminer l'adresse IP. Peut être spécifié avec un préfixe (https://domain.com) ou sans (//domain.com).

Quand utiliser

À utiliser pour les domaines qui seront bientôt nécessaires pour télécharger un style, un script ou une image important à partir de là, mais vous ne connaissez pas encore l'URL de la ressource. Par exemple:

  • Votre application est hébergée sur my-app.com et envoie des requêtes AJAX à api.my-app.com: Vous ne connaissez pas les requêtes spécifiques à l'avance car elles sont effectuées dynamiquement à partir de JS. Ici, il est tout à fait approprié d'utiliser une balise pour se pré-connecter au domaine.
  • Votre application est hébergée sur my-app.com et utilise Google Fonts. Ils sont téléchargés en deux étapes : tout d'abord, le fichier CSS est téléchargé depuis le domaine fonts.googleapis.com, alors ce fichier demande des polices avec fonts.gstatic.com. Vous ne pouvez pas savoir de quels fichiers de polices spécifiques proviennent fonts.gstatic.com vous en aurez besoin jusqu'à ce que vous chargiez le fichier CSS, nous ne pouvons donc établir qu'une connexion préliminaire au préalable.

Utilisez cette balise pour accélérer un peu un script ou un style tiers en raison d'une connexion préétablie.

Ne pas abuser. L'établissement et le maintien d'une connexion sont une opération coûteuse tant pour le client que pour le serveur. Utilisez cette balise pour un maximum de 4 à 6 domaines.

détails

Balise facultative. Le navigateur n'est pas tenu de suivre cette instruction et peut l'ignorer, par exemple si de nombreuses connexions ont déjà été établies ou dans d'autres cas.

Que comprend le processus de connexion ?. Pour se connecter à chaque site, le navigateur doit procéder comme suit :

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

Remarque : HTTP/3 améliorera et accélérera le mécanisme de prise de contact, mais on en est encore loin.

DNS-prélecture

<link rel= "dns-prefetch"> demande au navigateur d'effectuer à l'avance la résolution DNS du domaine si vous comptez vous y connecter bientôt et souhaitez accélérer la connexion initiale.

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

Pour chaque nouveau domaine, la résolution des enregistrements DNS prend généralement environ 20 à 120 ms. Cela n'affecte que le chargement de la première ressource d'un domaine donné, mais introduit quand même un délai. Si nous effectuons la résolution DNS à l'avance, nous gagnerons 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 vous souhaitez définir l'adresse IP. Peut être spécifié avec un préfixe (https://domain.com) ou sans (//domain.com).

Quand utiliser

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

  • Votre application est hébergée sur my-app.com et envoie des requêtes AJAX à api.my-app.com: Vous ne connaissez pas les requêtes spécifiques à l'avance car elles sont effectuées dynamiquement à partir de JS. Ici, il est tout à fait approprié d'utiliser une balise pour se pré-connecter au domaine.
  • Votre application est hébergée sur my-app.com, et utilise Google Fonts. Ils sont téléchargés en deux étapes : tout d'abord, le fichier CSS est téléchargé depuis le domaine fonts.googleapis.com, alors ce fichier demande des polices avec fonts.gstatic.com. Vous ne pouvez pas savoir de quels fichiers de polices spécifiques proviennent fonts.gstatic.com vous en aurez besoin jusqu'à ce que vous chargiez le fichier CSS, nous ne pouvons donc établir qu'une connexion préliminaire à l'avance.

Utilisez cette balise pour accélérer un peu un script ou un style tiers en raison d'une connexion préétablie.

Veuillez noter des caractéristiques similaires à <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Cela n'a généralement pas de sens de les utiliser ensemble pour un même domaine : <link rel= "preconnect"> comprend déjà <link rel= "dns-prefetch"/> et beaucoup plus. Cela peut se justifier dans deux cas :

  • Voulez-vous prendre en charge les anciens navigateurs ?. <link rel= "dns-prefetch" /> soutenu par depuis IE10 et Safari 5. <link rel= "preconnect"> a été pris en charge pendant un certain temps dans Chrome et Firefox, mais n'a été ajouté à Safari que dans 11.1 et toujours pas pris en charge dans IE/Edge. Si vous devez prendre en charge ces navigateurs, utilisez <link rel= "dns-prefetch" /> comme option de sauvegarde pour <link rel= "preconnect">.
  • Vous souhaitez accélérer les connexions à plus de 4 à 6 domaines. Étiqueter <link rel= "preconnect"> Il n'est pas recommandé de l'utiliser avec plus de 4 à 6 domaines, car l'établissement et le maintien d'une connexion sont une opération coûteuse. <link rel= "dns-prefetch" /> consomme moins de ressources, alors utilisez-le si nécessaire.

détails

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

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

Pour déterminer une adresse IP, le navigateur doit interroger le serveur DNS. Cela prend 20 à 120 ms lors de la connexion à un nouveau domaine tiers.

Le DNS est mis en cache, mais pas de manière très fiable. Certains systèmes d'exploitation et navigateurs mettent en cache les requêtes DNS : cela permettra de gagner du temps sur les requêtes répétées, mais la mise en cache n'est pas fiable. Sous Linux, cela ne fonctionne généralement pas du tout. Chrome dispose d'un cache DNS, mais il ne dure qu'une minute. Windows met en cache les réponses DNS pendant cinq jours.

pré-rendu

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

Malgré (ou à cause de) l'efficacité exceptionnelle de cette balise, en 2019 <link rel= "prerender"> mal pris en charge dans les principaux navigateurs. Voir plus de détails. au-dessous.

syntaxe

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

href pointe vers l'URL dont vous souhaitez démarrer le rendu en arrière-plan.

Quand utiliser

Lorsque vous êtes vraiment sûr que l'utilisateur ira à une certaine page. Si vous disposez d'un « tunnel » par lequel 70 % des visiteurs de la page A accèdent à la page B, alors <link rel= "prerender"> sur la page A permettra d’afficher la page B très rapidement.

Ne pas abuser. Le pré-rendu est extrêmement coûteux en termes de bande passante et de mémoire. Ne pas utiliser <link rel= "prerender"> pour plus d'une page.

détails

Balise facultative. Le navigateur n'est pas obligé de suivre cette instruction et peut l'ignorer, par exemple, en cas de connexion lente ou lorsque la mémoire libre est insuffisante.

Pour économiser de la mémoire Chrome ne fait pas de rendu completEt précharger uniquement NoState. Cela signifie que Chrome charge la page et toutes ses ressources, mais n'affiche ni n'exécute JavaScript.

Firefox et Safari ne prennent pas du tout en charge cette balise. Cela ne viole pas la spécification, puisque les navigateurs ne sont pas tenus de suivre cette instruction ; mais toujours triste. Bogue d'implémentation Firefox est ouvert depuis sept ans. Il y a des rapports selon lesquels Safari ne supporte pas non plus cette balise.

Résumé

Utiliser:

  • <link rel= "preload"> - quand vous avez besoin d'une ressource en quelques secondes
  • <link rel= "prefetch"> - quand vous avez besoin de la ressource sur la page suivante
  • <link rel= "preconnect"> - quand 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 navigateurs plus anciens)
  • <link rel= "prerender"> — lorsque vous êtes sûr que les utilisateurs accéderont à une certaine page et que vous souhaitez accélérer son affichage

Source: habr.com

Ajouter un commentaire