Il existe de
nombreuses façons d'améliorer les performances Web . L'un d'eux est le préchargement du contenu qui sera nécessaire plus tard. Prélecture CSS, rendu de prévisualisation pleine page ou résolution de nom de domaine. Nous faisons tout à l'avance, puis affichons instantanément le résultat! Ça a l'air cool.
Encore plus cool, c'est qu'il est très facile à mettre en œuvre. Cinq balises <link rel> donnent au navigateur une commande pour les actions préliminaires:
<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/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" />
Décrivez brièvement ce qu'ils font et quand les utiliser.
Aller à:
précharger ·
prefetch ·
preconnect ·
dns-prefetch ·
prerenderprécharger
<link rel= "preload"> indique au navigateur de charger et de mettre en cache la ressource (par exemple, un script ou une feuille de style) dès que possible. Ceci est utile lorsque vous avez besoin d'une ressource 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 disponible sur demande.
Syntaxe
<link rel="preload" href="/style.css" as="style" />
href pointe vers la ressource que vous souhaitez télécharger.
as tout ce que vous pouvez télécharger dans un navigateur:
style pour les feuilles de style,
script pour les scripts,
font pour les polices,
fetch ressources chargées à l'aide de fetch() ou XMLHttpRequest ,
- voir la liste complète sur MDN .
Il est important de spécifier l'attribut
as - cela permet au navigateur de prioriser et de planifier correctement les téléchargements.
Quand utiliser
Utilisez la précharge lorsque la ressource est nécessaire dans un avenir proche. Par exemple:
- Polices personnalisées à partir d'un fichier externe:
<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 le chargement qu'après avoir chargé et index.css . Afin de ne pas 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 divisez vos styles selon l'approche CSS critique en deux parties, critique (pour un rendu immédiat) et non critique:
<style> </style> <script> loadCSS('/app/non-critical.css'); </script>
Avec cette approche, les styles non critiques ne commenceront à se charger qu'au lancement de JavaScript, ce qui peut se produire quelques secondes après le rendu. Au lieu d'attendre JS, utilisez <link rel= "preload"> pour démarrer le téléchargement plus tôt:
<style> </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> loadCSS('/app/non-critical.css'); </script>
N'abusez pas de la précharge . Si vous téléchargez tout de suite, le site n'accélèrera pas comme par magie, mais au contraire, cela empêchera le navigateur de planifier correctement le travail.
Ne confondez pas avec la prélecture . N'utilisez
<link rel= "preload"> que si vous avez besoin d'une 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
Il s'agit d'une balise obligatoire pour l'exécution par le navigateur (si elle la prend en charge), contrairement à toutes les autres balises <link> associées 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 s'exécute sur une connexion lente.
Priorités Pour différentes ressources (styles, scripts, polices, etc.), les navigateurs attribuent généralement des priorités différentes afin de charger d'abord les ressources les plus importantes. Dans ce cas, le navigateur priorise l'attribut as. Pour le navigateur Chrome, vous pouvez voir le
tableau complet des priorités .
prélecture
<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 a lieu avec une faible priorité, il n'interfère donc pas avec des ressources plus importantes. Ceci est utile si vous avez besoin de la ressource 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 disponible sur demande.
Syntaxe
<link rel="prefetch" href="/style.css" as="style" />
href pointe vers la ressource que vous souhaitez télécharger.
as tout ce que vous pouvez télécharger dans un navigateur:
style pour les feuilles de style,
script pour les scripts,
font pour les polices,
fetch ressources chargées à l'aide de fetch() ou XMLHttpRequest ,
- voir la liste complète sur MDN .
Il est important de spécifier l'attribut
as - cela permet au navigateur de prioriser et de planifier correctement les téléchargements.
Quand utiliser
Pour télé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 afin d'accélérer le rendu de cette page. Par exemple:
- Vous avez une boutique en ligne et 40% des utilisateurs passent de la page principale à la page du produit. Utilisez
<link rel= "prefetch"> lors du chargement des fichiers CSS et JS pour afficher les pages de produits.
- Vous avez une application d'une page et différentes pages chargent différents packages. Lorsqu'un utilisateur visite une page, vous pouvez précharger des packages pour toutes les pages auxquelles il se réfère.
Probablement, cette balise peut être utilisée en toute sécurité dans n'importe quel volume . Les navigateurs planifient généralement la prélecture avec la priorité la plus basse, donc cela ne dérange personne. N'oubliez pas qu'il consomme du trafic utilisateur, ce qui peut coûter cher.
Pas pour les demandes urgentes . N'utilisez pas
<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 le
tableau des priorités complètes ), c'est-à-dire après avoir téléchargé tout le reste.
se connecter
<link rel= "preconnect"> demande au navigateur de se pré-connecter au domaine lorsque vous souhaitez accélérer la connexion à l'avenir.
Le navigateur doit établir une connexion s'il récupère certaines ressources d'un nouveau domaine tiers. Par exemple, si vous téléchargez des polices Google, des polices React à partir d'un CDN ou si vous demandez une réponse JSON à un serveur API.
L'établissement d'une nouvelle connexion prend généralement plusieurs centaines de millisecondes. C'est fait une fois, mais ça prend quand même du temps. Si vous avez établi une connexion à l'avance, gagnez du temps et téléchargez 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 vous souhaitez déterminer l'adresse IP. Vous pouvez spécifier avec un préfixe (
https://domain.com ) ou sans celui-ci (
//domain.com ).
Quand utiliser
Utilisez pour les domaines dont vous aurez bientôt besoin de 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 fait des demandes AJAX à api.my-app.com : vous ne connaissez pas de demandes spécifiques à l'avance, car elles sont faites dynamiquement depuis JS. Ici, il est tout à fait approprié d'utiliser une balise pour une connexion préliminaire à un domaine.
- Votre application est hébergée sur
my-app.com et utilise les polices Google. Ils sont téléchargés en deux étapes: d'abord, le fichier CSS est téléchargé depuis le domaine fonts.googleapis.com , puis ce fichier demande des polices à fonts.gstatic.com . Vous ne pouvez pas connaître les fichiers de police spécifiques de fonts.gstatic.com vous aurez besoin jusqu'à ce que vous télé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 le style ou le script tiers en préréglant la connexion.
N'abusez pas . L'établissement et le maintien d'une connexion est une opération coûteuse pour le client et le serveur. Utilisez cette balise pour un maximum de 4 à 6 domaines.
Détails
Balise facultative . Le navigateur n'est pas obligé de suivre cette instruction et peut l'ignorer, par exemple, si de nombreuses connexions sont déjà établies ou dans un autre cas.
Qui comprend le processus de connexion . Pour vous connecter à chaque site, le navigateur doit effectuer les étapes suivantes:
- Résolution DNS . Recherchez l'adresse IP du serveur (
216.58.215.78 ) pour le nom de domaine spécifié ( google.com ). - Poignée de main TCP . Échange de paquets (client → serveur → client) pour établir une connexion TCP avec le serveur.
- Prise de contact TLS (sites HTTPS uniquement) . Deux cycles 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 c'est encore loin.
dns-prefetch
<link rel= "dns-prefetch"> demande au navigateur de pré-résoudre le DNS du domaine à l'avance si vous y serez bientôt connecté et que vous souhaitez accélérer la connexion initiale.
Le navigateur doit déterminer l'adresse IP du domaine s'il récupère certaines ressources du nouveau domaine tiers. Par exemple, téléchargez des polices Google, des polices React à partir d'un CDN ou demandez une réponse JSON à un serveur API.
Pour chaque nouveau domaine, la résolution DNS prend généralement environ 20 à 120 ms. Cela n'affecte que le chargement de la première ressource à partir d'un domaine donné, mais représente toujours un retard. Si vous implémentez 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 définir une adresse IP. Vous pouvez spécifier avec un préfixe (
https://domain.com ) ou sans celui-ci (
//domain.com ).
Quand utiliser
Utilisez pour les domaines qui seront bientôt nécessaires pour télé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 fait des demandes AJAX à api.my-app.com : vous ne connaissez pas de demandes spécifiques à l'avance, car elles sont faites dynamiquement depuis JS. Ici, il est tout à fait approprié d'utiliser une balise pour une connexion préliminaire à un domaine.
- Votre application est hébergée sur
my-app.com et utilise les polices Google. Ils sont téléchargés en deux étapes: d'abord, le fichier CSS est téléchargé depuis le domaine fonts.googleapis.com , puis ce fichier demande des polices à fonts.gstatic.com . Vous ne pouvez pas connaître les fichiers de police spécifiques de fonts.gstatic.com vous aurez besoin jusqu'à ce que vous télé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 le style ou le script tiers en préréglant la connexion.
Notez les spécifications similaires sur <link rel= "dns-prefetch"/> et <link rel= "preconnect"> . Les utiliser ensemble pour le même domaine n'a généralement aucun sens: <link rel= "preconnect"> inclut déjà <link rel= "dns-prefetch"/> et bien plus encore. Cela peut se justifier dans deux cas:
- Vous souhaitez prendre en charge les anciens navigateurs .
<link rel= "dns-prefetch" /> est pris en charge depuis IE10 et Safari 5 . <link rel= "preconnect"> été pris en charge pendant un certain temps dans Chrome et Firefox, mais n'a été ajouté à Safari que dans 11.1 et n'est toujours pas pris en charge dans IE / Edge . Si vous devez prendre en charge ces navigateurs, utilisez <link rel= "dns-prefetch" /> comme <link rel= "preconnect"> de <link rel= "preconnect"> pour <link rel= "preconnect"> . - Vous souhaitez accélérer votre connexion à plus de 4 à 6 domaines . La
<link rel= "preconnect"> pas recommandée pour une utilisation avec plus de 4 à 6 domaines, car établir et maintenir une connexion est une opération coûteuse. <link rel= "dns-prefetch" /> consomme moins de ressources, utilisez-le donc si nécessaire.
Détails
Balise facultative . Le navigateur n'est pas obligé de suivre cette instruction, par conséquent, il peut ne pas effectuer de résolution DNS, par exemple, s'il y a beaucoup de telles balises sur la page ou dans un autre cas.
Qu'est-ce que le DNS . Chaque serveur sur Internet a une adresse IP unique qui ressemble à
216.58.215.78 . Le nom du site (par exemple,
google.com ) est généralement entré dans la barre d'adresse du navigateur et les serveurs DNS (Domain Name System) le
216.58.215.78 l'adresse IP du serveur (
216.58.215.78 ).
Pour déterminer l'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 très fiable . Certains systèmes d'exploitation et navigateurs mettent en cache les requêtes DNS: cela vous fera gagner du temps sur les requêtes répétées, mais vous ne pouvez pas compter sur la mise en cache. Sous Linux, cela ne fonctionne généralement pas du tout. Chrome a un cache DNS, mais cela ne dure qu'une minute. Windows met en cache les réponses DNS pendant cinq jours.
prétendant
<link rel= "prerender"> demande au navigateur de télécharger l'URL et de l'afficher sur 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 page spécifique et que vous souhaitez accélérer son affichage.
Malgré l'efficacité exceptionnelle de cette balise (ou à cause d'elle), en 2019,
<link rel= "prerender"> mal pris en charge par les principaux navigateurs. Voir
ci -
dessous pour plus de détails.
Syntaxe
<link rel="prerender" href="https://my-app.com/pricing" />
href pointe vers l'URL pour laquelle vous souhaitez exécuter le rendu en arrière-plan.
Quand utiliser
Lorsque vous êtes vraiment sûr que l'utilisateur ira sur une page spécifique . Si vous avez un «tunnel» à travers lequel 70% des visiteurs de la page A vont à la page B, alors
<link rel= "prerender"> à la page A aidera à afficher la page B très rapidement.
N'abusez pas . Le pré-rendu est extrêmement coûteux en termes de trafic et de mémoire. N'utilisez pas
<link rel= "prerender"> plus d'une page.
Détails
Balise facultative . Le navigateur n'est pas obligé de suivre cette instruction et peut l'ignorer, par exemple sur une connexion lente ou lorsqu'il n'y a pas assez de mémoire libre.
Pour économiser de la mémoire,
Chrome n'effectue pas le rendu complet , mais
seulement précharge NoState . Cela signifie que Chrome charge la page et toutes ses ressources, mais ne rend pas 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 triste quand même.
Le bogue d'implémentation dans Firefox est ouvert depuis sept ans. Il existe des rapports selon lesquels Safari
ne prend pas non plus en charge cette balise .
Résumé
Utilisation:
<link rel= "preload"> - lorsque vous avez besoin d'une ressource en quelques secondes
<link rel= "prefetch"> - lorsque vous avez 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 toujours pas son URL complète (pour les anciens navigateurs)
<link rel= "prerender"> - lorsque vous êtes sûr que les utilisateurs accèdent à une page spécifique et souhaitent accélérer son affichage