Optimisation des performances avec des conseils de ressources
Publié: 2022-03-10Les navigateurs Web modernes utilisent toutes sortes de techniques pour améliorer les performances de chargement des pages en devinant ce que l'utilisateur est susceptible de faire ensuite. Cependant, le navigateur ne sait pas grand-chose de notre site ou de notre application dans son ensemble, et souvent les meilleures informations sur ce qu'un utilisateur est susceptible de faire viennent de nous, le développeur.
Prenons l'exemple d'un contenu paginé, comme un album photo. Nous savons que si l'utilisateur regarde une photo dans un album, la probabilité qu'il clique sur le lien "Suivant" pour afficher l'image suivante dans l'album est assez élevée. Le navigateur, cependant, ne sait pas vraiment que de tous les liens de la page, c'est celui sur lequel l'utilisateur est le plus susceptible de cliquer. Pour un navigateur, tous ces liens ont le même poids.
Et si le navigateur pouvait savoir d'une manière ou d'une autre où l'utilisateur allait ensuite et pouvait récupérer la page suivante à l'avance afin que lorsque l'utilisateur clique sur le lien, le chargement de la page soit beaucoup, beaucoup plus rapide ? C'est en principe ce que sont les indices de ressources. Ils sont un moyen pour le développeur d'informer le navigateur de ce qui est susceptible de se produire à l'avenir afin que le navigateur puisse en tenir compte dans ses choix de chargement des ressources.
Toutes ces indications de ressources utilisent l' rel de l'élément <link> que vous aurez l'habitude de trouver dans le <head> de vos documents HTML. Dans cet article, nous allons examiner les principaux types d'indices de ressources et quand et où nous pouvons les utiliser dans nos pages. Nous passerons des petites allusions subtiles aux gros canons à la fin.
Prélecture DNS
Une recherche DNS est le processus de transformation d'un nom de domaine humain comme example.com en une adresse IP conviviale pour la machine comme 123.54.92.4 qui est réellement nécessaire pour récupérer une ressource.
Chaque fois que vous tapez une URL dans la barre d'adresse du navigateur, suivez un lien dans une page ou même chargez une ressource comme une image d'un domaine différent, le navigateur doit effectuer une recherche DNS pour trouver le serveur qui contient la ressource que nous avons demandé. Pour une page chargée avec beaucoup de ressources externes (comme peut-être un site Web d'actualités avec de nombreuses publicités et trackers), il peut y avoir des dizaines de recherches DNS requises par page.
Le navigateur met en cache les résultats de ces recherches, mais ils peuvent être lents. Une technique d'optimisation des performances consiste à réduire le nombre de recherches DNS requises en organisant les ressources sur moins de domaines. Lorsque ce n'est pas possible, vous pouvez avertir le navigateur des domaines qu'il devra rechercher avec l'indice de ressource dns-prefetch .
<link rel="dns-prefetch" href="https://images.example.com"> Lorsque le navigateur rencontre cet indice, il peut commencer à résoudre le nom de domaine images.example.com dès que possible, même s'il ne sait pas encore comment il sera utilisé. Cela permet au navigateur de prendre de l'avance sur le jeu et de faire plus de travail en parallèle, ce qui réduit le temps de chargement global.
Quand dois-je utiliser dns-prefetch ?
Utilisez dns-prefetch lorsque votre page utilise des ressources d'un domaine différent, pour donner au navigateur une longueur d'avance. La prise en charge du navigateur est vraiment excellente, mais si un navigateur ne la prend pas en charge, aucun mal n'est fait - la prélecture ne se produit tout simplement pas.
Ne prélevez pas les domaines que vous n'utilisez pas , et si vous souhaitez prélever un grand nombre de domaines, vous feriez peut-être mieux d'examiner pourquoi tous ces domaines sont nécessaires et si quelque chose peut être fait pour réduire le nombre.
Préconnexion
Une étape après la prélecture DNS consiste à se préconnecter à un serveur. L'établissement d'une connexion à un serveur hébergeant une ressource se fait en plusieurs étapes :
- Recherche DNS (comme nous venons de le dire) ;
- Prise de contact TCP
Une brève "conversation" entre le navigateur et le serveur pour créer la connexion. - Négociation TLS sur les sites HTTPS
Ceci vérifie que les informations du certificat sont valides et correctes pour la connexion.
Cela se produit généralement une fois par serveur et prend un temps précieux, surtout si le serveur est très éloigné du navigateur et que la latence du réseau est élevée. (C'est là que les CDN distribués dans le monde entier aident vraiment !) De la même manière que la prélecture du DNS peut aider le navigateur à prendre de l'avance sur le jeu avant qu'il ne voie ce qui s'en vient, la pré-connexion à un serveur peut garantir que lorsque le navigateur accède à la partie de la page où une ressource est nécessaire, le lent travail d'établissement de la connexion a déjà eu lieu et la ligne est ouverte et prête à fonctionner.
<link rel="preconnect" href="https://scripts.example.com"> Quand dois-je utiliser preconnect ?
Encore une fois, la prise en charge du navigateur est solide et il n'y a pas de mal si un navigateur ne prend pas en charge la préconnexion - le résultat sera comme avant. Envisagez d'utiliser la préconnexion lorsque vous savez avec certitude que vous allez accéder à une ressource et que vous voulez aller de l'avant.
Veillez à ne pas vous préconnecter puis à ne pas utiliser la connexion, car cela ralentira votre page et monopolisera également une infime quantité de ressources sur le serveur auquel vous vous connectez.
Préchargement de la page suivante
Les deux conseils que nous avons examinés jusqu'à présent se concentrent principalement sur les ressources de la page en cours de chargement. Ils peuvent être utiles pour aider le navigateur à prendre de l'avance sur les images, les scripts ou les polices, par exemple. Les quelques conseils suivants concernent davantage la navigation et la prédiction de l'endroit où l'utilisateur pourrait aller après la page en cours de chargement.
Le premier d'entre eux est la prélecture, et sa balise de lien peut ressembler à ceci :
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">Cela indique au navigateur qu'il peut aller de l'avant et récupérer une page en arrière-plan afin qu'elle soit prête à fonctionner à la demande. Il y a un peu de pari ici parce que vous devez anticiper où vous pensez que l'utilisateur naviguera ensuite. Faites-le correctement et la page suivante peut sembler se charger très rapidement. Si vous vous trompez, vous perdez du temps et des ressources à télécharger quelque chose qui ne sera pas utilisé. Si l'utilisateur utilise une connexion mesurée, comme un forfait de téléphonie mobile limité, vous pourriez en fait lui coûter de l'argent réel.
Lorsqu'une prélecture a lieu, le navigateur effectue la recherche DNS et établit la connexion au serveur que nous avons vue dans les deux types d'indices précédents, mais va ensuite un peu plus loin et demande et télécharge les fichiers. Cependant, il s'arrête à ce stade et les fichiers ne sont ni analysés ni exécutés et ils ne sont en aucun cas appliqués à la page en cours. Ils sont juste demandés et tenus prêts.
Vous pourriez penser qu'un préchargement est un peu comme ajouter un fichier au cache du navigateur. Au lieu de devoir aller sur le serveur et de le télécharger lorsque l'utilisateur clique sur le lien, le fichier peut être extrait de la mémoire et utilisé beaucoup plus rapidement.
L'attribut as
Dans l'exemple ci-dessus, vous pouvez voir que nous définissons l'attribut as sur as="document" . Il s'agit d'un attribut facultatif qui indique au navigateur que ce que nous récupérons doit être traité comme un document (c'est-à-dire une page Web). Cela permet au navigateur de définir le même type d'en-têtes de requête et de politiques de sécurité que si nous venions de suivre un lien vers une nouvelle page.
Il existe de nombreuses valeurs possibles pour l'attribut as en permettant au navigateur de gérer différents types de prélecture de manière appropriée.
Valeur de as | Type de ressource |
|---|---|
audio | Fichiers son et musique |
video | Vidéo |
Track | Pistes vidéo ou audio WebVTT |
script | Fichiers JavaScript |
style | Feuilles de style CSS |
font | Polices Web |
image | Images |
fetch | Requêtes XHR et Fetch API |
worker | Travailleurs Web |
embed | Requêtes multimédia <embed> |
object | Requêtes <object> multimédia |
document | les pages Web |
Les différentes valeurs qui peuvent être utilisées pour spécifier les types de ressources avec l'attribut as .
Quand dois-je utiliser prefetch ?
Encore une fois, la prefetch a un excellent support de navigateur. Vous devez l'utiliser lorsque vous avez une certitude raisonnable que l'utilisateur pourrait suivre votre site si vous pensez que l'accélération de la navigation aura un impact positif sur l'expérience utilisateur. Cela doit être mis en balance avec le risque de gaspiller des ressources en récupérant éventuellement une ressource qui n'est pas ensuite utilisée.
Pré-rendu de la page suivante
Avec prefetch , nous avons vu comment le navigateur peut télécharger les fichiers en arrière-plan prêts à l'emploi, mais nous avons également noté que rien de plus n'a été fait avec eux à ce stade. Le prérendu va encore plus loin et exécute les fichiers, faisant à peu près tout le travail nécessaire pour afficher la page, sauf pour l'afficher réellement.
Cela peut inclure l'analyse de la ressource pour toutes les sous- ressources telles que les fichiers JavaScript et les images et leur prélecture également.
<link rel="prerender" href="https://example.com/news/?page=2">Cela peut vraiment donner l'impression que le chargement de la page suivante est instantané, avec le type de performances de chargement rapides que vous pourriez voir lorsque vous appuyez sur le bouton de retour de votre navigateur. Le pari est encore plus grand ici, cependant, car vous ne passez pas seulement du temps à demander et à télécharger les fichiers, mais vous les exécutez avec n'importe quel JavaScript et autres. Cela pourrait utiliser de la mémoire et du processeur (et donc de la batterie) dont l'utilisateur ne verrait pas l'avantage s'il finissait par ne pas demander la page.
Quand dois-je utiliser prerender ?
La prise en charge du navigateur pour le prerender est actuellement très restreinte, seuls Chrome et l'ancien IE (pas Edge) offrant la prise en charge de l'option. Cela peut limiter son utilité à moins que vous ne cibliez spécifiquement Chrome. Encore une fois, c'est un cas de "pas de mal, pas de faute" car l'utilisateur ne verra pas l'avantage mais cela ne lui causera aucun problème sinon.
Utilisation des conseils de ressources
Nous avons déjà vu comment les indications de ressources peuvent être utilisées dans le <head> d'un document HTML en utilisant la <link> . C'est probablement la façon la plus pratique de le faire, mais vous pouvez également obtenir la même chose avec l'en-tête Link: HTTP.
Par exemple, pour effectuer une prélecture avec un en-tête HTTP :
Link: <https://example.com/logo.png>; rel=prefetch; as=image;Vous pouvez également utiliser JavaScript pour appliquer dynamiquement des conseils de ressource, peut-être en réponse à une interaction d'utilisation. Pour utiliser un exemple du document de spécification W3C :
var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);Cela ouvre des possibilités intéressantes, car il est potentiellement plus facile de prédire où l'utilisateur pourrait naviguer ensuite en fonction de la façon dont il interagit avec la page.
Choses à noter
Nous avons examiné quatre méthodes progressivement plus agressives de préchargement des ressources, de la simple résolution de DNS à la restitution d'une page complète prête à être utilisée en arrière-plan. Il est important de se rappeler que ces indices ne sont que cela ; ce sont des indices sur la façon dont le navigateur pourrait optimiser les performances . Ce ne sont pas des directives. Le navigateur peut prendre nos suggestions et utiliser son meilleur jugement pour décider comment y répondre.
Cela peut signifier que sur un appareil occupé ou surchargé, le navigateur n'essaie pas du tout de répondre aux conseils. Si le navigateur sait qu'il se trouve sur une connexion limitée, il peut prérécupérer le DNS mais pas les ressources entières, par exemple. Si la mémoire est faible, le navigateur peut à nouveau décider qu'il ne vaut pas la peine de récupérer la page suivante tant que la page actuelle n'a pas été déchargée.
La réalité est que sur un navigateur de bureau, les conseils seront probablement tous suivis comme le suggère le développeur, mais sachez que cela dépend du navigateur dans tous les cas.
L'importance de l'entretien
Si vous travaillez sur le Web depuis plus de deux ans, vous savez que si quelque chose sur une page n'est pas visible, il peut souvent être négligé. Les métadonnées cachées (telles que les descriptions de page) en sont un bon exemple. Si les personnes qui s'occupent du site ne peuvent pas voir facilement les données, elles peuvent facilement être négligées et devenir obsolètes.
C'est un risque réel avec des indices de ressources. Comme le code est caché et qu'il n'est pratiquement pas détecté en cours d'utilisation, il serait très facile pour la page de changer et que les conseils de ressources ne soient pas mis à jour. La conséquence, par exemple, de précharger une page que vous n'utilisez pas, signifie que les outils que vous avez mis en place pour améliorer les performances de votre site lui nuisent alors activement. Il est donc très important d'avoir de bonnes procédures en place pour mettre à jour vos indices de ressources.
Ressources
- « Spécification des conseils de ressources », W3C
- "Accélérez les navigations sur la page suivante avec la prélecture", Addy Osmani